Yes, React native runs on React. React is one of popular Open source Javascript library, used for building user interfaces with help of Javascript.

There are some core concepts behind the React, those are also used in the React Native.

Components:

Components are like Java Script functions. It let us split the UI into the independent and reusable piece of code.
We can categories components into two part;

i) Function components: These are more like the Java Script function.

For example:function abs(props){
    return <Text> Hello! </Text>
} 

ii) Class components: Here we defines class to create a component.

For example:
class abs extends React.Components{
    render(){
        return <Text> Hello! </Text>
    }
}  

Note : Both will do the same thing, but way of writing a components are different. You can use any of these which one you find suitable and comfortable.

JSX:

This is a very funny tag syntax which is neither String nor HTML. It is a syntax extension to Javascript. It is also called as JSX.

Props:

Properties are also known as Props. Props are Read-Only. It means you must never change the value of props. Lets take some example;

function minus(num1, num2){
  return num1-num2;
}

Note: Above function is a pure Function because these function do not try to manipulate their input value and they always return the same value for same inputs.

function deposit(account, amount){
  account.total += amount;
}

Note: All React components must act like pure functions with respect to their props.

  • State: State is like a personal data storage for a component. State is useful for handling data that changes over time or that comes from user interaction.
For example:
import React, {Components} from “react”;
import {Button, Text, View} from “react-native”;

export default class Cat extends component{
     state = { random : ‘’ };
     render(){
        return(
            <View>
                <Text>  Hi, This is {this.state.random}</Text>
                <Button
                onPress={()=>{
                    this.setState({random: this.state.random+1});
                }}>
            </View>
        )
     }
}

Leave a Reply

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