React Tutorial

React is a JAVASCRIPT library for building user interfaces.

React is mainly used for building UI, and many people think of React as the V (View) in MVC.

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

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

React Features

  • 1. Declarative Design− React adopts 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 repetitive code, which is why it is simpler than traditional data binding.

Prerequisites for reading this tutorial:

Before you start learning React, you need to have the following basic knowledge:

React First Example

In each chapter, you can edit the example online and then click the button to view the result.

This tutorial uses React version 18.2.0. You can visit the official websitehttps://react.dev/to 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 Yourself »

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 by 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 point, open the browserhttp://localhost:3000/and it will output:

Hello World!

References

Other extensions