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.

Next