React Native CLI Installation

React Native is wonderful in various points

  1. It is JavaScript – No various artificial separation like HTML, CSS, and a coding block
  2. It prepares Native code for Android and iOS – Final generated source code is pure Java and Objective C. No trace of JavaScript
  3. Balances native and hybrid developer concerns – Will discuss on this later

Installation

React native is available as Yarn and NPM package.

Through out this tutorial I am going to use NPM to install modules. Please make sure NodeJS is installed in your PC/Mac

Install React Native Command line interface as a global module.

$ npm -g react-native-cli

For Mac you might be required to prefix sudo.

After successful installation, We can create new react native project called “MyReactNativeProject” using

$ react-native init MyReactNativeProject

This will prepare new react native project for you. Once it completes, please make sure we move to the project directory by executing

$ cd MyReactNativeProject

Code Editor

I am going to use Visual Studio code as an Editor, Please download it at ______

Open the project folder in Visual Studio code. And we are ready to roll on

Before making any changes to the code, execute following command

$ react-native run-android

We can see the welcome screen in emulator

App.js

This is the file producing above output. Let’s write

If you notice I am importing React module with out a curly brace enclosing but for Component I am using the curly brace ?

What we have just did? We have written a component class “App” duly inhering a class called “Component”

The view is prepared by the function render(), This function produces the layout and underlying views with the help of View and Text Components. Remember View and Text Component are the components defined in ‘react-native’ modules, these components are fully cross platform and brings native interfaces when running in iOS and Android.

The Component class should have compulsory render function in order to display. But wait, this code looks something like XML? Yes, it is JSX syntax. JSX is a preprocessor step that add XML Syntax to JavaScript.

We would be creating number of such Components and render them when they are required.

State and Props

React Native components are primarily relying on two type of objects.

  1. State – This object is used when component needs to track the change of a value and corresponding view where the said object is displayed
  2. Props – This object is used when component has dependency on other components. Let’s say a Parent component renders a child component, We can assign a props value to Child component from the parent component like below.

Let’s discuss in detail

this.state

React native’s this.state object keeps track of changes, When this object is displayed in render function, During the execution, if somewhere its value modified by a function or a code block, the render function gets refreshed and display the changes immediately.

Look at this code

export default class App extends Component {

  constructor(props){
    super(props);
    this.state = {name:'Vasudev',gender:'Male'};
  }

  changeValueOfState = () => this.setState({name:"Shiva"});


  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center',backgroundColor: '#F5FCFF'}}>
        <Text style={styles.welcome}>{this.state.name}</Text>
      </View>
    );
  }
}

the above example has this.state declared with a value {name:"Vasudev", gender:"Male"} in constructor

Look at the function changeValueOfState, it sets the different value for the name property of this.state object. if this function called during the execution, the render function will pick the changes and display modified state value.

In other words if we try to set new value to this.state object using this.setState function, We can expect the re-rendering to be applied for the specified code block.

this.props

Unlike this.state object, this.props object does not keep track of the changes, in this.props, the data flows in one direction -> From the parent to the child. You can write your own components that use props. The idea behind props is that you can make a single component that is used in many different places in your app

Consider this example

export class MyCustomComponent extends Component{

  constructor(props){
    super(props);
    
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center',backgroundColor: '#F5FCFF'}}>
        <Text>{this.props.name} is from {this.props.city}</Text>
      </View>
    );
  }

}


export default class App extends Component {

  constructor(props){
    super(props);
    
  }


  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center',backgroundColor: '#F5FCFF'}}>
        <MyCustomComponent name="Vasudev" city="Chennai"/>
      </View>
    );
  }
}

Here App being a parent component renders MyCustomComponent as a Child, MyCustomComponent has props called name and city properties. So this name and city values can be set from Parent component as mentioned in above way. Thus the data flows in one direction -> From the parent to the child.

Conclusion

We yet to start the full cycle React Native development but it looks like the concept behind react native is usage of state and props objects, When we require dynamic changes in view we use state object, when we just need to set and display values we use props object.

Download source code

Leave a Reply

Your email address will not be published. Required fields are marked *