How to work React? I come with you for 10 fact in React.

Fact summery

1. Why Learn ReactJS?

2. How to create react app?

3. How does the React component work?

4. How to build React js?

5. How to work react router?

6. How is the react hook used?

7. Why we used props?

8. Introducing JSX

9. React Forms

10 . Functions vs classes

1. Why Learn ReactJS?

ReactJS is a medium where you can smooth out all the JavaScript, HTML & CSS together if you want. React is very easy to use due to which its popularity is increasing day by day. It is very easy to create similar in loop different in data. These can be done in many beautiful ways through different components. If you want to create something like this again and again, you don’t have to bother to write again and again. It’s fast, scalable, flexible, powerful, and has a robust developer community that’s rapidly growing. There’s never been a better time to learn React.

2. How to create react app?

First you have to open the command. Then you have to select a folder as you wish. Then you will use this npx create-react-app my-app command. If you show your site then you continue next press next command like cd my-app. after then give this command and show your fast looking react site in live. If you do not understand don’t panic, it has been explained in a beautiful way.

Example:

npx create-react-app my-app
cd my-app
npm start

3. How does the React component work?

The most common reason for using React is the React component. By making small components through it, it gradually becomes much bigger. Any large site can be easily created through React Component. And can be shown in many smooth forms. When HTML CSS JavaScript was used, everything had to be written on very long pages. But because of the react component, it is now possible to create a large site through small components.

4. How to build React js?

If we want to post the React file to the public, then we have to build. If you’re benchmarking or experiencing performance problems in your React apps, make sure you’re testing with the minified production build. If there is a problem then React will show you the error in a very nice way. You can easily fix that survival then. This is how you build a react site. First go to the command then go to where your file is and go there and use this command npm run build.

Example:

npm run build

5. How to work react router?

This is a special feature of React. This reactive router makes the website feel more creative and professional. It is very easy to go from one page to another. Again, if I want to hide a special place, we can use the private route. It will not work if you do not uninstall React. If you haven’t reacted before, you need to install this react first. After that you have to install React Router. How to uninstall React Router is npm install react-router-dom.

Example:

npm install react-router-dom

6. How is the react hooks used?

You can’t think of React without React Hooks. Hooks are functions that let us “hook into” state and lifecycle functionality in function components. Through this we can take a value from another place. I can set one value to another. This can be done very easily through the react hooks. React hooks are usually divided into two types E.g. Basic Hooks and additional Hooks.

i. Basic Hooks

useState, useEffect, useContext.

ii. Additional Hooks

useReducer, useCallback, useMemo, useRef, useImperativeHandle, useLayoutEffectr, useDebugValue.

7. Why we used props?

When we send something from one component to another, we send it as props. Props are very easy for us to send values ​​to another component. We can send without props but everyone recommends props. Below are a few examples of how props are used.

Example:

// 1st page
{
    products.map(pd => <Product pd={pd}></Product>)
}
// 2nd page
const Product = (props) => {
    ...
}

8. Introducing JSX

If at any time we write an HTML tag in a variable, it is called JSX. If we want to give this message to everyone, we can use this. Then the same message will go to everyone at the same time. And will save us a lot of time. Below is an example where a variable named name is used. And an H1 tag is used which is placed in a variable called element. Lastly, all of these are set to one ID.

Example:

const name = 'Mehedy';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

9. React Forms

We often have to take a lot of information from the user. And at that time we can take the information from the user through the form. Below is an example of how we can create a form with React Form. Here two inputs are used, one is named email and the other is named password.

Example:

<form>
  <label>
    Email:
    <input type="email" name="email" />
  </label>
  <label>
    Password:
    <input type="password" name="password" />
  </label>
  <input type="submit" value="Submit" />
</form>

10. Functions vs Classes

Everyone is now familiar with React. React component can be written in two ways it is function & class. Many use the developer function component while others use the class component. Since the introduction of the function recently, the popularity of the class component has decreased a lot and the popularity of the function is increasing day by day. Below are two examples.

Functions Example:

import React from "react";

const Person = props => (
  <div>
    <h1>Hello, {props.name}</h1>
  </div>
);

export default Person;

Classes Example:

import React, { Component } from "react";

class Person extends Component {
  constructor(props){
    super(props);
    this.state = {
      myState: true;
    }
  }
  
  render() {
    return (
      <div>
        <h1>Hello Person</h1>
      </div>
    );
  }
}