react dom.js怎么引入

React DOM.js 怎么引入

在React项目中引入React DOM.js的方法主要有以下几种：通过CDN、使用npm/yarn包管理工具、创建React应用并使用脚手架工具。其中，使用npm/yarn包管理工具是最常见和推荐的方式，因为它可以更好地管理依赖，确保项目的一致性和可维护性。下面将详细描述如何使用npm/yarn包管理工具来引入React DOM.js。

一、通过CDN引入

如果你只是想快速地在一个简单的HTML文件中使用React，可以通过CDN引入React和React DOM。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React DOM Example</title>
    <!-- 引入React -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <!-- 引入React DOM -->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
    <div id="root"></div>
    <script>
        // 使用React DOM渲染一个简单组件
        ReactDOM.render(
            React.createElement('h1', null, 'Hello, world!'),
            document.getElementById('root')
        );
    </script>
</body>
</html>

通过这种方式，你可以快速地在HTML文件中使用React和React DOM来进行开发和测试。然而，这种方式不适合用于生产环境，因为它不利于代码的模块化管理和项目的维护。

二、使用npm/yarn包管理工具

在实际开发中，更推荐使用npm或yarn来管理React和React DOM的依赖。以下是详细步骤：

1. 初始化项目

首先，创建一个新的项目目录，并在该目录中初始化npm项目：

mkdir my-react-app cd my-react-app npm init -y

这个命令会创建一个package.json文件，用于管理项目的依赖和脚本。

2. 安装React和React DOM

接下来，安装React和React DOM：

npm install react react-dom

或者使用yarn：

yarn add react react-dom

3. 创建入口文件

创建一个新的文件index.js，并在其中引入React和React DOM：

import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
    return (
        <div>
            <h1>Hello, world!</h1>
        </div>
    );
};
ReactDOM.render(<App />, document.getElementById('root'));

4. 配置Webpack或其他打包工具

为了打包和运行项目，你需要配置Webpack或其他打包工具。以下是一个简单的Webpack配置示例：

首先，安装必要的开发依赖：

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react

然后，创建一个webpack.config.js文件：

const path = require('path');
module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                    },
                },
            },
        ],
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
    },
};

创建一个.babelrc文件：

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

最后，创建一个简单的HTML文件index.html，并将其放在dist目录中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React DOM Example</title>
</head>
<body>
    <div id="root"></div>
    <script src="bundle.js"></script>
</body>
</html>

5. 启动开发服务器

在package.json中添加一个启动脚本：

"scripts": {
    "start": "webpack serve --open"
}

然后，运行以下命令启动开发服务器：

npm start

三、使用Create React App脚手架工具

Create React App是官方推荐的脚手架工具，可以快速创建React应用并自动配置好所有依赖和工具。以下是使用Create React App的方法：

1. 安装Create React App

首先，确保你已经安装了Node.js和npm。然后，全局安装Create React App：

npm install -g create-react-app

2. 创建新的React应用

使用Create React App创建一个新的React应用：

create-react-app my-react-app cd my-react-app

3. 启动开发服务器

运行以下命令启动开发服务器：