# React Tutorial !(#) React is a JavaScript library for building user interfaces. React is primarily used for building UIs, and many people consider React to be the V (View) in MVC. React originated from 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. More and more people are starting 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 doesn't require JSX, but we recommend using it. * **5. Components** − Building components with React makes code easier to reuse and is well-suited for large-scale project development. * **6. One-Way Reactive Data Flow** − React implements a one-way reactive data flow, reducing redundant code, which is why it's simpler than traditional data binding. * * * ## Prerequisites for This Tutorial: Before starting to learn 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 see the result. This tutorial uses React version 18.2.0. You can download the latest version from the official website [https://react.dev/](https://react.dev/). ## React Example // Simple React component function App() { return

Hello, React!

; } const root = ReactDOM.createRoot(document.getElementById("example")); // Render React component to DOM root.render(); [Try it »](#) **Including External Scripts:** These three lines of code respectively include the React, ReactDOM, and Babel Standalone libraries. * 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 in real-time 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

Hello World!

; } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); At this time, opening **http://localhost:3000/** in the browser will output: Hello World! * * * ## References * React Official Website: [https://react.dev/](https://react.dev/) * React Chinese Documentation: [https://zh-hans.react.dev/](https://zh-hans.react.dev/) * React Github Source Code: [https://github.com/facebook/react](https://github.com/facebook/react)