React Native

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

3 important things you must known before starting react-native

State

State is an object variable which is used to store some values. State variables are mutable. Using state we can change Content or Screen.

You can access a state variable using "this.state.variablename"

You can modifty a state variable using "this.setState(variablename:value)"

class Page extends React.Component{
    state={
        title:"Sample"
    };

    // user defined function
    changeState=()=>{
        this.setState({title:"changed title"});
    }

    render(){
        return <View>
        // Text will change based on state variable value
        <Text>{this.state.title}</Text>
        <Button onPress={this.changeState}>Change State</Button>
        </View>
    }
}

Component

Component is an element like HTML element which is used to build User Interfaces (UI).

• Dummy component

  
  function Page{
      return <View>
      <Text>Hello world!!!</Text>
      </View>
  }
  

• Smart component

  
  class Page extends React.Component{
      state={};
      render(){
          return <View>
          <Text>Hello World!!1</Text>
          </View>
      }
  }
  

Life Cycle

React and Reactnative js are executing certain methods in certail order.

Ex. "render()" must be called.