营销型企业网站建设价格,重庆seo职位,网站建设的栏目策划,网站seo啥意思怎么做React 开发环境与工具详解 —— 语法知识点、使用方法与案例代码 一、Node.js 环境
1.1 Node.js 环境安装 说明#xff1a;Node.js 是运行 JavaScript 的服务器端环境#xff0c;React 开发依赖 Node.js 和其包管理器 NPM。 ✅ 安装步骤#xff1a;
访问官网 https://node…React 开发环境与工具详解 —— 语法知识点、使用方法与案例代码 一、Node.js 环境
1.1 Node.js 环境安装 说明Node.js 是运行 JavaScript 的服务器端环境React 开发依赖 Node.js 和其包管理器 NPM。 ✅ 安装步骤
访问官网 https://nodejs.org下载 LTS长期支持版安装后在终端运行
node -v
npm -v若输出版本号如 v18.17.0、9.6.7说明安装成功。 1.2 最简 Web 服务使用 Node.js 原生 http 模块
// server.js
const http require(http);// 创建 HTTP 服务
const server http.createServer((req, res) {// 设置响应头内容类型为 HTML编码 UTF-8res.writeHead(200, { Content-Type: text/html; charsetutf-8 });// 返回 HTML 内容res.end(h1 最简 Node.js Web 服务/h1p当前路径: ${req.url}/pp请求方法: ${req.method}/p);
});// 监听 3000 端口
server.listen(3000, () {console.log(✅ 服务已启动访问 http://localhost:3000);
});运行命令 node server.js1.3 React 服务器端渲染SSR基础概念 说明SSR 是在服务端生成 HTML 字符串提升首屏加载速度和 SEO。 // ssr-server.js
const http require(http);
const React require(react);
const ReactDOMServer require(react-dom/server);// 创建 React 组件
function App() {return React.createElement(div, null, Hello from React SSR!);
}// 创建服务
const server http.createServer((req, res) {const html ReactDOMServer.renderToString(React.createElement(App));res.writeHead(200, { Content-Type: text/html; charsetutf-8 });res.end(!DOCTYPE htmlhtmlheadtitleReact SSR/title/headbodydiv idroot${html}/div!-- 客户端激活 --script src/client-bundle.js/script/body/html);
});server.listen(3001, () {console.log(✅ SSR 服务运行在 http://localhost:3001);
});⚠️ 需要配合 Webpack 打包客户端代码并挂载hydrate。 二、NPM 模块管理
2.1 NPM 模块安装
# 安装生产依赖
npm install react react-dom# 安装开发依赖
npm install --save-dev webpack webpack-cli# 安装全局工具如 create-react-app
npm install -g create-react-app# 安装指定版本
npm install lodash4.17.21# 安装最新版本
npm install lodashlatest2.2 使用 package.json
{name: my-react-app,version: 1.0.0,description: React 开发环境示例,main: index.js,scripts: {start: node server.js,dev: webpack serve --mode development,build: webpack --mode production,test: jest},dependencies: {react: ^18.2.0,react-dom: ^18.2.0},devDependencies: {webpack: ^5.88.0,webpack-cli: ^5.1.4,webpack-dev-server: ^4.15.1},keywords: [react, webpack, npm],author: Your Name,license: MIT
}常用命令 npm init # 初始化 package.json
npm run start # 运行脚本
npm list --depth0 # 查看已安装包
npm outdated # 查看过期包
npm update # 更新包2.3 其他常用 NPM 命令
# 删除包
npm uninstall lodash# 清除缓存
npm cache clean --force# 查看包信息
npm info react# 安装所有依赖根据 package.json
npm install# 仅安装生产依赖
npm install --production三、常用前端代码编辑器简介 推荐使用 VS Code安装以下插件提升 React 开发体验 ESLint — 代码规范检查Prettier — 代码格式化Reactjs Code Snippets — 快速生成组件模板Auto Rename Tag — 自动重命名标签Bracket Pair Colorizer — 括号配色 四、Webpack 打包工具
4.1 Webpack 介绍 Webpack 是模块打包工具将 JS、CSS、图片等资源打包成浏览器可识别的静态资源。 4.2 Webpack 基本原理
入口Entry → 模块依赖图 → 加载器Loaders处理资源 → 插件Plugins优化 → 输出Output 4.3 Webpack 使用基本概念
核心概念
Entry入口文件Output输出文件Loaders转换非 JS 文件如 JSX、CSSPlugins执行更广泛的任务压缩、注入等Mode开发/生产模式 4.4 Webpack 配置项webpack.config.js
// webpack.config.js
const path require(path);module.exports {// 入口文件entry: ./src/index.js,// 输出配置output: {path: path.resolve(__dirname, dist),filename: bundle.js,clean: true, // 每次构建前清空 dist},// 开发服务器配置devServer: {static: ./dist,port: 3000,open: true,hot: true, // 启用热更新},// 模块加载器module: {rules: [{test: /\.jsx?$/, // 匹配 .js 或 .jsx 文件exclude: /node_modules/,use: {loader: babel-loader,options: {presets: [babel/preset-react, babel/preset-env],},},},{test: /\.css$/,use: [style-loader, css-loader], // 从右到左执行},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: asset/resource, // 图片资源},],},// 插件plugins: [],// 模式mode: development, // 或 production// 解析配置resolve: {extensions: [.js, .jsx], // 自动补全扩展名},
};4.5 几个常用插件
① HtmlWebpackPlugin自动生成 HTML
npm install --save-dev html-webpack-pluginconst HtmlWebpackPlugin require(html-webpack-plugin);module.exports {plugins: [new HtmlWebpackPlugin({title: My React App,template: ./public/index.html, // 模板filename: index.html, // 输出文件名}),],
};② CleanWebpackPlugin清理 dist
npm install --save-dev clean-webpack-pluginconst { CleanWebpackPlugin } require(clean-webpack-plugin);module.exports {plugins: [new CleanWebpackPlugin(),],
};③ MiniCssExtractPlugin提取 CSS
npm install --save-dev mini-css-extract-pluginconst MiniCssExtractPlugin require(mini-css-extract-plugin);module.exports {module: {rules: [{test: /\.css$/,use: [process.env.NODE_ENV production? MiniCssExtractPlugin.loader: style-loader,css-loader,],},],},plugins: [new MiniCssExtractPlugin({filename: [name].[contenthash].css,}),],
};4.6 打包成多个资源文件多入口
// webpack.config.js
module.exports {entry: {main: ./src/index.js,admin: ./src/admin.js,},output: {path: path.resolve(__dirname, dist),filename: [name].bundle.js, // [name] 替换为入口名},
};4.7 React 开发中的 Webpack 需要配置 Babel 转译 JSX 和 ES6 语法。 npm install --save-dev babel/core babel/preset-env babel/preset-react babel-loader// .babelrc 或 babel.config.json
{presets: [[babel/preset-env, { targets: { browsers: [ 1%, last 2 versions] } }],babel/preset-react]
}五、Babel 工具 Babel 将 ES6、JSX 转换为浏览器兼容的 ES5 代码。 配置文件 .babelrc
{presets: [babel/preset-env,babel/preset-react],plugins: [babel/plugin-transform-runtime]
}六、模块动态加载Code Splitting 使用 import() 动态导入实现按需加载。 // App.js
import React, { useState, useEffect } from react;function App() {const [module, setModule] useState(null);const loadHeavyModule async () {// 动态导入Webpack 会自动分割代码const { HeavyComponent } await import(./HeavyComponent);setModule(HeavyComponent /);};return (divbutton onClick{loadHeavyModule}加载重型组件/buttondiv{module}/div/div);
}export default App;// HeavyComponent.js
import React from react;// 模拟大型组件
export function HeavyComponent() {return h2 我是动态加载的重型组件/h2;
}构建后会生成 0.bundle.js、1.bundle.js 等按需加载文件。 七、模块热替换技术HMR 修改代码后无需刷新页面局部更新组件。 配置 Webpack Dev Server
// webpack.config.js
module.exports {devServer: {hot: true,},
};在 React 中启用 HMR使用 react-refresh
npm install --save-dev pmmmwh/react-refresh-webpack-plugin react-refresh// webpack.config.js
const ReactRefreshWebpackPlugin require(pmmmwh/react-refresh-webpack-plugin);module.exports {plugins: [new ReactRefreshWebpackPlugin(),],module: {rules: [{test: /\.jsx?$/,use: [{loader: babel-loader,options: {plugins: [react-refresh/babel, // 启用 React 刷新],},},],},],},
};组件修改后自动更新状态保留 八、使用 Chrome 浏览器进行调试
8.1 设备类型预览 F12 → Toggle Device Toolbar或 CtrlShiftM→ 选择设备iPhone、iPad 等 8.2 DOM 结构查看 Elements 面板查看和编辑 HTML/CSS 8.3 Console 控制台
console.log(普通日志);
console.warn(警告);
console.error(错误);
console.table([{name: 张三, age: 20}, {name: 李四, age: 25}]);
console.time(计时器);
// ... 代码
console.timeEnd(计时器);8.4 网络请求查看 Network 面板查看 XHR/Fetch 请求、状态码、响应时间、请求头等。 8.5 页面源代码查看 Sources 面板查看原始或打包后源码设置断点调试。 九、React 开发工具
9.1 React 开发工具的安装 Chrome 商店搜索 “React Developer Tools” 并安装。 9.2 React 开发工具的使用
查看组件树结构查看 Props / State修改状态实时生效开发环境Profiler 性能分析 十、工程脚手架
10.1 初始工程创建
使用 Create React App推荐新手
npx create-react-app my-app
cd my-app
npm start手动搭建Webpack Babel
mkdir my-react-app
cd my-react-app
npm init -y
npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader babel/core babel/preset-env babel/preset-react html-webpack-plugin创建目录结构
my-react-app/
├── src/
│ ├── index.js
│ └── App.jsx
├── public/
│ └── index.html
├── webpack.config.js
└── package.json10.2 配置修改以 CRA 为例 CRA 默认隐藏 Webpack 配置如需修改 npm run eject # 慎用不可逆或使用 cracoCreate React App Configuration Override
npm install craco/craco// craco.config.js
module.exports {webpack: {configure: (webpackConfig) {// 修改配置return webpackConfig;},},
};修改 package.json
{scripts: {start: craco start,build: craco build,test: craco test}
}✅ 综合性案例完整 React Webpack HMR 动态加载项目
项目结构
my-full-react-app/
├── src/
│ ├── index.js
│ ├── App.jsx
│ ├── Home.jsx
│ ├── About.jsx
│ └── components/
│ └── Header.jsx
├── public/
│ └── index.html
├── webpack.config.js
├── .babelrc
├── package.json
└── README.md1. 入口文件 src/index.js
// src/index.js
import React from react;
import ReactDOM from react-dom/client;
import App from ./App;const root ReactDOM.createRoot(document.getElementById(root));
root.render(App /);// 启用 HMR模块热替换
if (module.hot) {module.hot.accept(./App, () {const NextApp require(./App).default;root.render(NextApp /);});
}2. 主组件 src/App.jsx
// src/App.jsx
import React, { useState } from react;
import Header from ./components/Header;function App() {const [page, setPage] useState(home);const [dynamicComponent, setDynamicComponent] useState(null);const loadAbout async () {const { default: About } await import(./About);setDynamicComponent(About /);};return (div style{{ padding: 20px, fontFamily: Arial }}Header /navbutton onClick{() setPage(home)}首页/buttonbutton onClick{() setPage(about)}关于静态/buttonbutton onClick{loadAbout}关于动态加载/button/navhr /{page home Home /}{page about About /}{dynamicComponent (div style{{ border: 2px dashed #ccc, padding: 10px, marginTop: 20px }}{dynamicComponent}/div)}/div);
}export default App;3. 首页组件 src/Home.jsx
// src/Home.jsx
import React from react;export default function Home() {return (divh2 欢迎来到首页/h2p这是静态加载的首页组件。/p/div);
}4. 关于组件 src/About.jsx
// src/About.jsx
import React from react;export default function About() {return (divh2ℹ️ 关于我们/h2p这个组件可以静态或动态加载。/pp当前时间{new Date().toLocaleTimeString()}/p/div);
}5. 头部组件 src/components/Header.jsx
// src/components/Header.jsx
import React from react;export default function Header() {return (header style{{ backgroundColor: #007acc, color: white, padding: 10px, marginBottom: 20px }}h1⚛️ React Webpack 综合项目/h1/header);
}6. HTML 模板 public/index.html
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0/titleReact Webpack 综合项目/title
/head
bodydiv idroot/div
/body
/html7. Webpack 配置 webpack.config.js
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);
const ReactRefreshWebpackPlugin require(pmmmwh/react-refresh-webpack-plugin);const isDevelopment process.env.NODE_ENV ! production;module.exports {mode: isDevelopment ? development : production,entry: ./src/index.js,output: {path: path.resolve(__dirname, dist),filename: [name].[contenthash].js,clean: true,},devServer: {static: ./dist,port: 3000,open: true,hot: true,},module: {rules: [{test: /\.jsx?$/,exclude: /node_modules/,use: {loader: babel-loader,options: {presets: [babel/preset-env,babel/preset-react,],plugins: [isDevelopment react-refresh/babel,].filter(Boolean),},},},{test: /\.css$/,use: [style-loader, css-loader],},],},plugins: [new HtmlWebpackPlugin({template: ./public/index.html,}),isDevelopment new ReactRefreshWebpackPlugin(),].filter(Boolean),resolve: {extensions: [.js, .jsx],},
};8. Babel 配置 .babelrc
{presets: [babel/preset-env,babel/preset-react]
}9. package.json
{name: my-full-react-app,version: 1.0.0,scripts: {start: webpack serve --mode development,build: webpack --mode production,dev: cross-env NODE_ENVdevelopment webpack serve,prod: cross-env NODE_ENVproduction webpack},dependencies: {react: ^18.2.0,react-dom: ^18.2.0},devDependencies: {babel/core: ^7.22.0,babel/preset-env: ^7.22.0,babel/preset-react: ^7.22.0,babel-loader: ^9.1.0,cross-env: ^7.0.3,css-loader: ^6.8.1,html-webpack-plugin: ^5.5.3,style-loader: ^3.3.3,webpack: ^5.88.0,webpack-cli: ^5.1.4,webpack-dev-server: ^4.15.1,pmmmwh/react-refresh-webpack-plugin: ^0.5.10,react-refresh: ^0.14.0}
}10. 运行项目
npm install
npm start访问 http://localhost:3000体验 热更新修改组件自动刷新动态加载点击按钮加载组件多页面切换 本章小结
本章系统讲解了 React 开发环境的核心工具链
✅ Node.js 与 NPM项目运行和依赖管理基础✅ Webpack模块打包、代码分割、插件扩展✅ Babel语法转译支持 JSX 和 ES6✅ HMR开发效率神器状态保留热更新✅ Chrome DevTools React DevTools调试利器✅ 工程脚手架快速初始化项目标准化结构
掌握这些工具你已具备搭建现代化 React 项目的能力
