• Before I begin I want to tell you that in order to learn react js you need to have basic knowledge of basic Js, advanced HTML, CSS, JS
• Environment dev Visual code, node js
• What can React js do?

• React can be used to code front-end for any web app
• Can self-learn React Native
• Self-taught other SPA frameworks like Angular, Vue JS

What is SPA?

• Before SPA was launched, a normal website worked as follows: When a get request is sent to the server, the server processes and returns the entire HTML page of the page, as well as when we click on a link. That it works the same way.
• Thus, all the processing is handled at the server
• As for SPA, all the processing is on the client side, so every processing we see it is very fast because the first time the page it processes and renders the client, it takes a little time to visit the page. .
• But it is not always true and not always we use SPA. React is a tool that helps us build Single Page Application. React is developed by facebook,

Setting

• Let’s code a small component to understand React better
• There are many ways to set up a React project, here I will guide you to embed reactivate’s cdn, we go to React’s homepage: https://reactjs.org/docs/cdn-links.html and copy the two scripts inside below to paste into html.

<script crossorigin src = “https://unpkg.com/ [email protected] /umd/react.production.min.js”> </script> <script crossorigin src = “https://unpkg.com/react. ../ umd / react-dom.production.min.js “> </script>

Result:

• I would like to explain as follows:

• React.createElement (‘div’, null, ‘Hello word’): React is the library of the above cdn, and createElement is similar to DOM’s document.createElement, the div here is I will create a div, and No options on it and the content is Hello word
• root = document.getElementById should be familiar with you. It is used to get the element whose id is root
• ReactDOM.render (Hello, root) is React’s library, it is used to render the contents of the Hello guy to the root guy.

• So we have a simple application with react js.

JSX

• As our application grows, we cannot use the above syntax to work with React, it will make our code more verbose and difficult to read, so if there is a syntax that helps us write elements like Normal html code why not use it.
• For example: const =
  Hello word

  and in reactjs, there is a tool to help us convert JXS code to normal code that is Babel, please refer here https://babeljs.io/ .

Create React App

• npx create-react-app my-app This command is used to create a React project that people use on large projects.
• cd my-app and npm start to run the app and the directory structure as shown below
• 
• 

Component

• Component is what we use most in React App, a component represents a certain part such as header, footer, menu …

We create a Components directory to hold the components, and to use them on the pages we need to import into the page we use. like php we use include elements to the page.

Props

• “props” is a short acronym for “properties”, but it is a concept in ReactJS. The props are basically an object, they store the values ​​of the attributes of a tag.
• 

Histories or Background are props that are passed from father to child, the default props will be readonly in child components

• To use the props we call the following:

Just type the props. The props name is provided that we need to declare the props in the class:

State

• In a component, state is a concept in React, which is similar to props The state is declared as an object of the component class, when the state changes the component will re-render, this part I will explain later to you. To change the state’s value, do the following:

Handle event in react

There are many ways to define a hendle in react, the way I often use it is

To handle an event in react, we declare an arrow function and simultaneously call that function on the elements in the render. So this? As we see in the function there is a letter using this for it, forcing us to bind this from the component class for it so we can use this as external, you learn bind,

Epilogue

At the end of this article, I am a newbie about React js, the above knowledge is my own study if something goes wrong, please contribute to me In the next articles, I will go into how to Operation of a React APP and its life cycle