React Tutorial

React is a JAVASCRIPT library for building user interfaces.

React is mainly used to build UI. Many people think of React as the V (View) in MVC.

React originated from an internal Facebook project, used to build the Instagram website, and was open-sourced in May 2013.

React has high performance and very simple code logic. More and more people are beginning to pay attention to and use it.

React Features

  • 1. Declarative Design−React uses a declarative paradigm, making it easy to describe applications.

  • 2. Efficient−React minimizes interaction with the DOM by simulating the DOM.

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

  • 4.JSX− JSX is an extension of JavaScript syntax. React development does not necessarily require JSX, but we recommend using it.

  • 5. Components− Building components with React makes code easier to reuse and can be well applied in the development of large projects.

  • 6. One-way Responsive Data Flow− React implements a one-way responsive data flow, thereby reducing duplicate code. This is why it is simpler than traditional data binding.

Before reading this tutorial, you need to know:

Before starting to learn React, you need to have the following basic knowledge:

React First Example

In each chapter, you can edit examples online, then click a button to view the results.

This tutorial uses React version 18.2.0. You can visit the official website tohttps://react.dev/download the latest version.

React Example

<div id="example"></div> <script type="text/babel">// Simple React component function App() { return<h1>Hello, React!</h1>; } const root = ReactDOM.createRoot(document.getElementById("example")); // Render React component to DOM root.render(<App />); </script>

Try it »

Import external scripts:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" ></script>

These three lines of code import the React, ReactDOM, and Babel Standalone libraries respectively.

  • React is used to build user interfaces.
  • ReactDOM is used to render React components in the browser.
  • Babel Standalone is used to compile JSX syntax on the fly in the browser.

Or use the react development environment created with the create-react-app tool (introduced in the next chapter):

Example

import React from "react";
import ReactDOM from "react-dom/client";

function Hello(props) {
  return <h1>Hello World!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Hello />);

At this time, open the browserhttp://localhost:3000/It will output:

Hello World!

References

Other extensions