React Native: Difference between revisions

From bibbleWiki
Jump to navigation Jump to search
Created page with "=Introduction= ==Why== *True native app *Performance is great *Easy to learn *Shared across platforms *Good community ==Components *React uses components to build apps *React..."
 
No edit summary
Line 21: Line 21:
npx create-react-native-app globo
npx create-react-native-app globo
expo start
expo start
</syntaxhighlight>
==Sample App.js==
This is not much different to java and Xamarin.
<br>
App.js
<syntaxhighlight lang="js">
import React from 'react';
import Home from './app/views/Home.js'
export default class App extends React.Component {
  render() {
    return (
      <Home />
    )
  }
}
</syntaxhighlight>
<br>
App.js
<syntaxhighlight lang="js">
import React from "react";
import { Text, View } from "react-native";
export default class Home extends React.Component {
  render() {
    return (
      <View>
        <Text>This will be the homepage</Text>
        <Text>These other lines are here</Text>
        <Text>So you are not mad</Text>
      </View>
    )
  }
}
</syntaxhighlight>
</syntaxhighlight>

Revision as of 22:27, 10 December 2020

Introduction

Why

  • True native app
  • Performance is great
  • Easy to learn
  • Shared across platforms
  • Good community

==Components

  • React uses components to build apps
  • React Native has many components
  • Including translate features

Installation

sudo npm i -g react-native-cli
sudo npm i -g create-react-native

Create Project

Note ignite is a useful tool for creating components in react-native

react-native init reactiveNativeCLI
npx create-react-native-app globo
expo start

Sample App.js

This is not much different to java and Xamarin.
App.js

import React from 'react';
import Home from './app/views/Home.js'

export default class App extends React.Component {
  render() { 
    return (
      <Home />
    )
  }
}


App.js

import React from "react";
import { Text, View } from "react-native";

export default class Home extends React.Component {
  render() {
    return (
      <View>
        <Text>This will be the homepage</Text>
        <Text>These other lines are here</Text>
        <Text>So you are not mad</Text>
      </View>
    )
  }
}