React在HTML中的两种实现方式

该文档介绍了在HTML中使用React的两种主要方法，并提供了示例代码，包括引入React库、创建虚拟DOM以及将虚拟DOM渲染到实际页面中的步骤。 React是Facebook开发的一个用于构建用户界面的JavaScript库，其核心理念是通过使用虚拟DOM（Virtual DOM）来提高Web应用的性能。在HTML中使用React，你需要引入React和ReactDOM库，这两个库可以从CDN（内容分发网络）获取，如unpkg.com。 第一种方式：基础使用 1. 引入React和ReactDOM库：在HTML文件中，通过`<script>`标签引入React和ReactDOM的生产版本。例如： ```html <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> ``` 2. 引入Babel：由于React使用JSX语法，需要Babel将其转换为JavaScript。可以引入Babel Standalone： ```html <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> ``` 3. 编写JSX代码：在`<script type="text/babel">`标签内，你可以使用JSX来创建React组件，如： ```jsx const str = 'hello react'; const vDom = <h1>{str}</h1>; ReactDOM.render(vDom, document.getElementById('app')); ``` 第二种方式：创建虚拟DOM 1. 定义React组件：你可以创建一个React类组件或函数组件，例如： ```jsx class HelloWorld extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } // 或者使用函数组件 const HelloWorld = (props) => <h1>Hello, {props.name}</h1>; ``` 2. 使用ReactDOM.render()：将组件渲染到页面上指定的DOM元素，例如： ```jsx ReactDOM.render(<HelloWorld name="React" />, document.getElementById('app')); ``` 在实际开发中，通常会使用模块打包工具（如Webpack或Rollup）和Babel预编译JSX代码，而不是在HTML文件中直接引入Babel Standalone。这种方式可以实现更高效、更优化的代码组织和加载，同时支持ES6+语法和模块化。 要在HTML中使用React，首先需要引入React和ReactDOM库，然后利用JSX创建虚拟DOM，最后通过ReactDOM.render()将虚拟DOM挂载到页面上。这种方式允许开发者以声明式的方式构建用户界面，提高了开发效率和性能。