React tutorial


Release date:2024-03-09 Update date:2024-03-15 Editor:admin View counts:155

Label:

React tutorial

Image0

React is a JAVASCRIPT library for building user interfaces.

React is mainly used to build UI, and many people think React isthe V (view) in MVC.

React an internal project that originated from Facebook and was used to build Instagram the website was launched in May 2013.

React with high performance, the code logic is very simple, more and more people have begun to pay attention to and use it.

Characteristics of React

  • 1.Declarative design −React by using the declaration paradigm, the application can be easily described.

  • 2.Efficient −React through the simulation of DOM, the interaction with DOM is minimized.

  • 3.flexible −React works well with known libraries or frameworks.

  • 4.JSX − JSX is an extension of JavaScript syntax. React developers don’t necessarily use JSX, but we recommend it.

  • 5.Component − passes through React building components makes the code easier to reuse and can be well applied in the development of large projects.

  • 6.Data flow − of one-way response React the data flow of one-way response is implemented, thus reducing repetitive code, which is why it is simpler than traditional data binding.

What you need to know before reading this tutorial:

At the beginning of learning React before, you need to have the following basic knowledge:

  • HTML tutorial

  • CSS tutorial

  • JavaScript tutorial

  • ES6 tutorial

The first instance of React

In each chapter, you can edit the instance online and click the button to view the results.

This tutorial uses the React version 16.4.0, you can download the latest version at https://reactjs.org/.

React instance

<divid="example"></div><scripttype="text/babel">ReactDOM.render(<h1>Hello,
world!</h1>, document.getElementById('example') );</script>

Or use the create-react-app tools (described in the next chapter) react development environment:

Example

import React from "react";
import ReactDOM from "react-dom";
function Hello(props) {
  return <h1>Hello World!</h1>;
}
ReactDOM.render(<Hello />, document.getElementById("root"));

When the browser opens http://localhost:3000/, it will output:

Hello World!

Powered by TorCMS (https://github.com/bukun/TorCMS).