Let’s Cook React together to serve out!

Photo By Alien holololo

01. What is React JS?

React is a popular JavaScript framework used for user interface development. Software engineers is reluctant to call it a “framework” because it gives developer freedom, speed of work, accurate code, and special features that other frameworks have failed to provide. React is much flexible, declarative and effective JavaScript library. It is a component-based front-end library that can be used to create client layers of just one application.

The history behind of React JS:

“Jordan Walke” engineer of Facebook, wants to add a new dimension to modern UI development through React JS. When he went to create a client side application, he saw that the DOM (Document Object Model) was slowing down for some reason. This issue comes to his notice when he adds HTML and XML files in the app’s API (application programming interface). He prepared React JS by further strengthening the basis of the logical structure.

He first introduced React JS in 2012. Earlier in the app he saw huge success using React JS instead of HTML5. And officially in 2013, the Facebook authorities made it open-source.

02. React Component.

React Component is the building-block of the react. We usually see many components in a React application. The component is not really anything but we can compare it with the parts of a machine. Just as many small parts come together in one machine to form the whole machine, so too in a React application many such components come together to form the whole application.
There are two type of Component in React.js.
1. Class component
2. And Function component

A class components example:

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <p>React Component</p>
  }
}

export default MyComponent;

This is Functional Component Example:

import React from 'react';

const FunctionComponent = () => (
  <div>
    <MyComponent />
    <p>A Function Component</p>
  </div>
)

export default FunctionComponent;

03. How works React hooks ?

Hooks allows you to use other features of state and React without having to use classes.The work of the lifecycle method can also be done. This means that all kinds of functionality can be implemented without the use of class based components. The advantage of this is that state related logic can be shared among many components. This means that if more than one component has the same state logic, it can be reused by implementing it once through a custom hook without repeating it in each component. Moreover, large and complex components are simple because different functions of the same component can be written separately through hooks. You can Explore more about hooks here.

THERE ARE MANY HOOKS IN REACT.JS.

Look The simple example with useState Hook:

04. UseState in React Js.

Using the useState hook, you can now call useState () your function element.
useState () returns an 2 array of things:

01. first value, represents the current state.
02. and Use it to update values.

Look The Example:

import React, { useState } from 'react';

//create your forceUpdate hook
function useForceUpdate(){
    const [value, setValue] = useState(0); // integer state
    return () => setValue(value => value + 1); // update the state to force render
}

function MyComponent() {
    // call your hook here
    const forceUpdate = useForceUpdate();
    
    return (
        <div>
            {/*Clicking on the button will.. force to re-render like force update.. does */}
            <button onClick={forceUpdate}>
                Click to re-render
            </button>
        </div>
    );
}

05. React.js useEffect.

I used useState Hook to declare state this functional component. I have also declared 3 buttons specifying 3 different content type, and onClick event of those is three button , I called the setContentType function to change in the state of “content” . That will update the DOM which the component will re-render. Mainly Effect Hook, useEffect , add the ability to perform a react app side effects from a function components.

06. What About JSX ?

Knowing the JSX syntax is very important for working With React.js.

const element = <h1>Welcome to Auntor World!</h1>;

look the example, That called JSX. That syntax looks similar to HTML, but it is neither HTML nor JavaScript string. This is a syntax extension of JavaScript.

07. Purpose of JSX.

const element = React.createElement(
    "h1",
    null, 
    "Welcome to Auntor World!"
);

How complex the code looks to look like a normal HTML code without JSX. If you want, you can also use this complex code in your React app. But why use so much complex code to have such a nicely arranged syntax? Now I have used a simple code for example. But when you project in real life, think about what will happen if you write code like this? And if you use JSX, you can also write different expressions and logic in the code.

08. JSX Expression embedding.

In the following example, let us declare a variable named name. Then use it on JSX with Curly Brace:

import React from "react";

const Hello = () => {
  const name = "Auntor";

  return (
    <div>
      <h1>Hello,, {name}</h1>
    </div>
  );
};

export default Hello;

In JSX you can write any valid JavaScript expression inside Curly Brace. For example

import React from "react"

const Total = () => {
  return (
     <h1>Total {10 + 7}</h1>
  )
}

export default Total;

This example I have embedded a JavaScript function inside the formatName (user) h1 element.

import React from "react"

const FormatName = () => {

  const user = {
    firstName: 'AJ',
    lastName: 'Auntor'
  };
  
  const formatName = (user) => `${user.firstName} ${user.lastName}`;
  
  return (
    <h1>
      Good Morning, {formatName(user)}!
    </h1>
  )
}

export default FormatName;

09. Why Need Context API in react.js ?

Normally in React application, data is passed parent to child with props, but such usage need cumbersome for case types of props. Context API is a easy way to share components values or pass data like these between components parent to child and also child to parent without using pass props .

10. React Element render.

import React from 'react';
import ReactDOM from 'react-dom';

In this Example you will see two libraries of React. One is a direct reaction, and the other is a reaction. Before, React was basically a library. But later a library was created by separating the functions of the actual react, which is basically react. And the other one that has react-dom is that it will be used to work with our dom. Unlike the browser DOM elements, React elements is plain objects, and are to go create. React DOM takes of updating the react DOM to match the React elements…