React 入门第一步：环境搭建

来源：汇智坊编辑：域名时间：2025-11-05 02:03:13

React 是门第 facebook 推出的用于构建用户界面的前端 Javascript 库，中文官方地址为：https://react.docschina.org/。步环

React 具有声明式、境搭建组件化、门第一次学习，步环随处编写等特点，境搭建使用 React 可以将一些简短、b2b信息网门第独立的步环代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。境搭建

环境搭建

官方文档中创建新的门第 React 应用：https://react.docschina.org/docs/create-a-new-react-app.html

手动搭建 webpack

创建项目目录并安装开发依赖：

$ mkdirwebpack-react-project $ cd webpack-react-project/ $ npm init -y npm install -D @babel/core@7.13.8@babel/preset-env@7.13.9 @babel/preset-react@7.12.13 babel-loader@8.2.2html-webpack-plugin@4.5.2 react@17.0.1 react-dom@17.0.1 webpack@4.46.0webpack-cli@3.3.12 webpack-dev-server@3.11.2 + react@17.0.1 + babel-loader@8.2.2 + @babel/preset-env@7.13.9 + webpack-dev-server@3.11.2 + @babel/core@7.13.8 + html-webpack-plugin@4.5.2 + webpack-cli@3.3.12 + @babel/preset-react@7.12.13 + react-dom@17.0.1 + webpack@4.46.0

项目创建完成，开发依赖安装成功后，步环package.json 内容如下：

{ "name":"webpack-react-project",境搭建 "version":"1.0.0", "description":"", "main":"index.js", "scripts":{ "test":"echo "Error: no test specified" && exit 1" }, "keywords":[], "author":"", "license":"ISC", "devDependencies":{ "@babel/core":"^7.13.8", "@babel/preset-env":"^7.13.9", "@babel/preset-react":"^7.12.13", "babel-loader":"^8.2.2", "html-webpack-plugin":"^4.5.2", "react":"^17.0.1", "react-dom":"^17.0.1", "webpack":"^4.46.0", "webpack-cli":"^3.3.12", "webpack-dev-server":"^3.11.2" } }

因为是自己进行手动安装配置，站群服务器因此需要在项目根路径下手动创建 \webpack.config.js 文件，门第并做如下配置：

const path =require(path) const HtmlWebpackPlugin =require(html-webpack-plugin) module.exports= { mode:development,步环 devtool:none, entry:./src/index.js, output: { filename:main.js, path: path.resolve(dist) }, devServer: { port:3000, hot:true }, module: { rules: [ { test:/\.js|jsx$/, exclude:/node_modules/, use: [ { loader:babel-loader, options: { presets: [@babel/preset-env,@babel/preset-react] } } ] } ] }, plugins: [ newHtmlWebpackPlugin({ template:./src/index.html }) ] }

配置入口 \src\index.html

配置入口 \src\index.js

import React fromreact import { render } fromreact-dom // 自定义组件 functionApp() { return<div>React</div> } render(<App />,document.getElementById(root))

然后在 package.json 中添加配置选项：

"scripts":{ "test":"echo "Error: no test specified" && exit 1", "dev":"webpack-dev-server" },

然后在命令行中执行 npm run dev 就可以启动项目了。

使用官方脚手架create-react-app

官方脚手架 create-react-app 基于 webpack 进行打包构建。境搭建

脚手架构架项目：npx create-react-appmy-app

> cd my-app > npm start

使用通用构建工具 Vite

Vite 本身就是一个构建工具，开发环境下不打包，生成环境使用 Rollup 进行打包。

执行命令 npm init vite@latest

√ Project name: ...my-project ? Select a framework: » - Use arrow-keys. Return tosubmit. vanilla vue > react preact lit-element svelte ? Select a variant: » - Use arrow-keys. Return tosubmit. > react react-ts Scaffolding project in xxxxxxxxxxxxxx Done. Now run: cdvite-project npm install npm run dev

上一篇：网吧电脑脱离主机教程（轻松拆解，自由组装，享受自由游戏体验）
下一篇：用大白菜启动系统的方法与步骤（快速了解大白菜启动系统并实施启动）

React 入门第一步：环境搭建

环境搭建

手动搭建 webpack

使用官方脚手架create-react-app

使用通用构建工具 Vite

友情链接