React Basics you should know!

I struggled understanding React Native without understanding basics of React. So I learned topics that are required to start with it. In this blog, I have covered Basics of React Framework along with explanation and example for better understanding.

At the end of the blog, you will understand

1. What is JSX and its rules

2. What is Components in React

3. Types of Components

4. Core Concepts in React components

5. Lifecycle of component in React

6. Need of Hooks

7. Short explanation and Example of Hooks

JSX

If you have created your first React project, you notice that JavaScript function returns HTML code. This is called JavaScript XML.

In React project, we don't create separate HTML file because JSX allows us to write HTML and JS combined together in same file

We can execute any JavaScript code which may include logic, function, variables inside HTML by using curly braces

function App(){
    const text=`Hello World`;
    
    return(
        <div className="App">
            <p>{text}</p>
        </div>
    );
}

It is also possible to assign HTML tags to JS variables

const message=<h1>Let's learn React</h1>

Following Rules must be considered while writing JSX

1. HTML and components tags must always be closed </>

2. Some attributes like class becomes className

3. We can't return more then one HTML element at once hence make sure to wrap them inside a parent tag.

4. Example

return (
  <div>
    <p>Hello</p>
    <p>World</p>
  </div>
);
//Here div is a parent tag

React Components

A component is an independent, reusable code block which divides the UI into smaller pieces. It handles their own logic, accept data through props, manage state and efficiently update the part of the UI that change.

Let's take Example of Component:

All the Red boxes shows the components. Rather then building the whole UI under one single file, we divide all red marked section into smaller independent pieces.

Functional Components

It is a JavaScript function that returns React element and preferred way to build modern React application. It enable to manage state and lifecycle logic using React hooks

According to documentation, a functional components is a JS function that returns JSX. Component name should always start with a capital letter and takes props as parameter if necessary.

function ToDoItem(props){
    return(
        <li className="todo-item">
            <span>
                <input type="checkbox" />
                <span>{props.text}</span>
            </span>
            <p>...</p>
            
        </li>
    );
}

export default ToDoItem;

Class Components

It is a class that extends React components and returns JSX. It manages component data using this.state property

class Greet extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>;
  }
}

Core concepts in React components

Props

Props are read-only inputs passed from a parent components to child components. It enable dynamic data flow and reusability. It enable communication between components and allow components to get customized from outside.

const Header=(props)=>{
    return <h1>{props.heading}</h1>
}

//Usage in App.js
<Header heading="ToDo App"/>

State

It is a variable that holds some information that may change over the lifetime of the components. Whenever the value of the state changes, the components re-render itself with updated values

const CounterComponent=()=>{
    const [count,setCount]=useState(0);
    

    return(
        <div>
            <p>Count Component - {count}</p>
            <button onClick={()=>{
                setCount(count+1);
            }}>Increment</button>    
        </div>
    );
}

Lifecycle of React Components

It describes the different stages a components goes through and allow code to run at specific moments during its existence.

Three main phases of React components lifecycle:

Mounting

It refers to the process of creating and inserting a components into the DOM for the first time in a React application

Updating

In this phase, components re-renders in response to change in its stare or props ensuring UI reflect the latest data

Unmounting

This is the final phase of the lifecycle of component. The component is unmounted from the DOM

Need of Hooks

Hooks were a feature introduced in 2016 in React 16.8 version. In old react code, we use class components. These had a render method which contained the JSX for rendering the UI. If we want these components to store a state, we need to declare it within a constructor method and change it by calling this.setState

Let's see the example

import React from 'react'

class Counter extends React.Component{
    constructor(props){
        super(props)
        this.state={count:0}
    }

    handleIncrement=function(){
        this.setState(prevState=>{
            return {count:prevState.count+1};
        })
    }
    
    handleDecrement=function(){
        this.setState(prevState=>{
            return {count:prevState.count-1};
        })
    }
    
    render(){
        return(
           <div className="App">

          <button onClick=                  {this.handleIncrement}>Increment</button>
          <button onClick={this.handleDecrement}>Decrement</button>

          <h2>{this.state.count}</h2>
        </div> 
        )
    }
}

export default Counter;

Earlier functional components were only use them for stateless components that didn't store state. But with the incorporation of hooks, we can use use functional components for stateful components.

Short explanation of Hooks along with a example

Hooks enables to implement logic and functionalities in components. Let's see how hooks transform class component to functional component

import { useState } from 'react'

export default function Counter() {

    const [count, setCount] = useState(0)

    const handleIncrement = () => setCount(count+1)
    const handleDecrement = () => setCount(count-1)

    return (
        <div className="App">
            <button onClick={() => handleIncrement()}>Increment</button>
            <button onClick={() => handleDecrement()}>Decrement</button>

            <h2>{count}</h2>
        </div>                    
    )
}