搭建一个简单的react工程

最新推荐文章于 2024-06-25 09:30:43 发布

天气预报-yyy

最新推荐文章于 2024-06-25 09:30:43 发布

阅读量499

点赞数

分类专栏： Go 文章标签： react.js npm javascript

本文链接：https://blog.csdn.net/weixin_41596285/article/details/130290805

版权

Go 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了如何搭建一个React应用的基础开发环境，包括安装Node.js和npm，初始化npm项目，安装React、ReactDOM以及Babel编译器，配置webpack和开发服务器，最后实现代码的打包和热重载功能。

摘要由CSDN通过智能技术生成

首先，需要确保安装了 Node.js 和 npm。可以在命令行中输入 node -v 和 npm -v 命令来检查版本。
创建一个新的项目目录，并进入该目录。
在命令行中运行以下命令来初始化 npm 项目：
```
npm init -y
```
这将创建一个名为 package.json 的文件，其中包含了项目的依赖和配置信息。
安装 React 和 ReactDOM 库，可以运行以下命令：
```
npm install react react-dom
```
安装 Babel 编译器和相关插件，用于将 ES6+ 的代码转换为浏览器可识别的 JavaScript 代码。可以运行以下命令：
```
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react babel-loader
```
创建一个名为 index.html 的 HTML 文件，用于承载 React 应用程序的内容。

在 index.html 中引入 React 和 ReactDOM 库以及 Babel 转换后的 JavaScript 文件。例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="dist/bundle.js"></script>
  </body>
</html>

在项目根目录中创建一个名为 src 的文件夹，并在其中创建一个名为 index.js 的文件，用于编写 React 应用程序的核心代码。

在 index.js 中导入必要的库和组件，并使用 ReactDOM 将 React 组件渲染到页面上。例如：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

配置 Babel 编译器，使得它可以将 ES6+ 和 JSX 语法转换为浏览器可识别的 JavaScript 代码。可以在项目根目录下创建一个名为 .babelrc 的文件，同时添加以下内容：
```
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
```

配置 webpack 打包工具，将多个 JavaScript 文件打包成一个文件。可以在项目根目录下创建一个名为 webpack.config.js 的文件，同时添加以下内容：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  devtool: 'source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    port: 3000
  }
};

在命令行中运行以下命令，使用 webpack 打包应用程序：
```
npx webpack --mode development
```
启动开发服务器，可以使用以下命令：
```
npx webpack-dev-server --open
```
这将会启动一个本地服务器，自动打开浏览器，并在 http://localhost:3000 上显示 React 应用程序。如果需要修改代码，Webpack 将会自动重新编译并重新启动