方法一：使用 create-react-app 搭建 React 项目
1. 确保电脑已经安装 Node.js 和 npm
2. 安装 create-react-app
create-react-app 是一个全局命令行工具，可以帮助你创建一个新的 React 项目。
npx create-react-app my-react-app3. 进入项目目录
cd my-react-app4. 启动开发服务器
npm start开发服务器启动后，浏览器打开 http://localhost:3000 查看刚刚创建的React 应用。
方法二：手动搭建 React 项目
1. 创建项目目录并进入
mkdir my-react-app
cd my-react-app2. 初始化 npm
生成一个默认的 package.json 文件。
npm init -y3. 安装 React 和 ReactDOM
npm install react react-dom4. 安装 Webpack 和 Babel
Webpack 是一个模块打包工具，Babel 是一个 JavaScript 编译器。我们需要它们来打包和编译我们的 React 代码。
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react5. 创建 Webpack 配置文件
在项目根目录创建 webpack.config.js 文件，并添加以下内容：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3000,
},
resolve: {
extensions: ['.js', '.jsx'],
},
};6. 创建 Babel 配置文件
在项目根目录创建 .babelrc 文件，并添加以下内容
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}7. 创建项目目录结构
my-react-app/
|-- src/
| |-- index.js
|-- public/
| |-- index.html
|-- package.json
|-- webpack.config.js
|-- .babelrc8. 配置 HTML 模板
在 public 目录下创建 index.html 文件，并添加以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>9. 配置入口文件
在 src 目录下创建 index.js 文件，并添加以下内容：
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => (
<div>
<h1>Hello, React!</h1>
</div>
);
ReactDOM.render(<App />, document.getElementById('root'));10. 添加脚本到 package.json
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
}11. 启动开发服务器
npm start现在你可以在浏览器中打开 http://localhost:3000 查看你的 React 应用。
*** 本文仅是学习中的记录，有错误请指正。 ***
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容