React can be downloaded directly for use, and the download package also provides many learning examples.\n\nThis tutorial uses React version 18.2.0, you can download the latest version from the official website [https://reactjs.org/](https://reactjs.org/).\n\nUse ByteDance's React CDN library, address as follows:\n\nUse Staticfile CDN's React CDN library, address as follows:\n\nOfficial CDN address:\n\n**Note:** Using Babel to compile JSX in the browser is very inefficient.\n\n### Using Examples\n\nThe following example outputs Hello, world!\n\n## React Examples\n\n // Simple React component function App() { return

Hello, React!

; } const root = ReactDOM.createRoot(document.getElementById("example")); // Render React components to the DOM root.render(); \n\n[Try it »](#)\n\n**Example Analysis:**\n\nIn this example, we introduced three libraries: react.production.min.js, react-dom.production.min.js, and babel.min.js:\n\n* **react.min.js** - React's core library\n* **react-dom.min.js** - Provides DOM-related functionality\n* **babel.min.js** - Babel can convert ES6 code to ES5 code, so we can execute React code on browsers that don't currently support ES6. Babel has built-in support for JSX. Using Babel together with the babel-sublime package can take the source code syntax rendering to a whole new level.\n\nfunction App(){return

Hello, React!

; }const root = ReactDOM.createRoot(document.getElementById("example")); root.render();\n\nThe above code inserts an h1 heading into the node with id="example".\n\nconst root = ReactDOM.createRoot(document.getElementById("example"));\n* **Get the DOM container**: `document.getElementById("example")` gets a DOM element with id "example".\n* **Create root node**: `ReactDOM.createRoot` is a new method introduced in React 18, used to create a React root node. In this example, the `root` variable holds this root node.\n\n> **Note:**\n>\n> If we need to use JSX, the type attribute of the tag needs to be set to text/babel.