# React Tutorial !(#) React is a JavaScript library for building user interfaces. React is mainly used for building UI, and many people consider React to be the V (View) in MVC. React originated from Facebook's internal project, used to build the Instagram website, and was open-sourced in May 2013. React has high performance, the code logic is very simple, and 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 the application. * **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 project development. * **6. One-Way Reactive Data Flow** − React implements a one-way reactive data flow, which reduces redundant code. This is why it is simpler than traditional data binding. * * * ## Prerequisites for 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, 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 »](#) **Importing External Scripts:** These three lines of code import the React, ReactDOM, and Babel Standalone libraries respectively. * React is used for building user interfaces. * ReactDOM is used for rendering React components in the browser. * Babel Standalone is used for compiling JSX syntax in the browser in real-time. 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(); Then 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)