Learning React-native : Part II

What will I learn?

About component, state, and prop
Making your own custom component and using it
Building login screen and handling user inputs using props and state.

Requirements

A laptop/PC with Mac OS/ Linux/ Windows
Preinstalled node.js
Preinstalled Code editor

Note: This tutorial is performed in Visual Studio Code Editor in the laptop with Windows 10 Home, 64 bit OS

Difficulty

Intermediate, you must have good knowledge of JavaScript to catch up this tutorial.

Tutorial Content

In my previous session, I explained to you about why I choose react native over other platform and I also described the project structure of the react native and what are they supposed to do. Today we will be learning about components, state, props and how to use them efficiently to make a simple login screen.

Component:

As per definition from official documentation “Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.”

React component can be termed as anything we see on screen. Each application consists of many individual components. A single layout of an application is made up of a bunch of component for example: TextInput and Button are two different component that can be bunched up together to create a single component.

Component must compulsorily have a render method because render method describes how the component is supposed to look in the screen.
Components manage their own state and data to handle many complex UI.

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput placeholder="Add Some text"/>
        <Button title="submit"/>
      </View>
    );
  }
}

Here App is a component.
There are many pre-defined components provided to us by react but sometimes they are not enough. We can need our own component as per the requirement of our application so, we can also make our own custom component. Let us create our own component.

import React,{Component} from "react";
import {View,TextInput,StyleSheet} from "react-native";
class TextInputComponent extends Component{
    render(){
        return(

            <View 
            style={styles.mainView}>
            <TextInput
            style={styles.textInput}
                placeholder="My first custom component"
            />
            </View>
        );
    }
}

const styles=StyleSheet.create(
    {
        textInput:{

            width:"100%"
        },
        mainView:{
            width:"100%"
        }
    }
);
export default TextInputComponent;

We can create the component in react native by simply extending Component and in order to make it work we have to import it from react-native. As already stated each component must compulsorily require render method to create a view. Here in our view we have added TextInput so that we can display it via our App.js component. We have set the width of our TextInput as 100% so that we can display the placeholder value we have set in this component.

Now in order to use this custom component we have to first import it:

import TextInputComponent from './components/TextInputComponent';

Only after importing this we can use it in our main root component.

import React from 'react';
import { StyleSheet, Text, View,TextInput,Button } from 'react-native';
import TextInputComponent from './components/TextInputComponent';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInputComponent/>
        <Button title="submit"/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Here we have only used the and it gives the output like this:

Here we used our first custom component that is TextInputComponent to display the placeholder. Similarly, we can create tons of other components to handle many different functionalities.

State & props:

As we can see that we created our first own custom component but how can we manage the state, data movement within and between the component?
This is where the state and props come into play. State are mutable that is they can be changed whereas props are immutable that is they cannot be changed but can be passed from parent to child.
State can be defined by this.state and they are null by default.
“In react, if the state changes in the component then the component will automatically render and update the DOM if there are changes and if there are no changes then the DOM also doesn’t change. manages the virtual DOM for you. By having virtual DOM update behind the scenes.”
As state is null by default we should initialize it first and the value of state should be set using this.setState if we want to change it.

For example: Let us add onPressEvent in our button and change the value of state once the button is clicked. It can be done by:

state={
    firstState:""
  };
  
  onButtonClicked=val=>{
    this.setState({
      firstState:"Button clicked"
    });
    alert(this.state.firstState)
  };

And in our Button we have to add onPress event like this:

Learning React-native : Part II

comments