搭建一个简单的react工程

文章列表

搭建一个简单的react工程

首先，需要确保安装了 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 将会自动重新编译并重新启动

搭建一个简单的react工程

公告

标签

搭建一个简单的react工程

相关问题

公告

标签