macbook如何安装react
安装 Node.js 和 npm
在 MacBook 上安装 React 需要先安装 Node.js，它包含了 npm（Node Package Manager）。访问 Node.js 官网 下载最新 LTS 版本并安装。安装完成后，在终端运行以下命令验证是否安装成功：
node -v
npm -v使用 Create React App 创建项目
Create React App 是官方推荐的脚手架工具，可以快速初始化 React 项目。在终端运行以下命令全局安装并创建项目：
npx create-react-app my-app
cd my-app
npm start项目创建完成后会自动启动开发服务器，默认在浏览器打开 http://localhost:3000。
手动配置 React 环境（可选）
如果需要手动配置，可以通过以下步骤完成：
- 初始化项目并安装 React 核心库：
mkdir my-app cd my-app npm init -y npm install react react-dom - 安装开发依赖（如 Babel 和 Webpack）：
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin
配置 Babel 和 Webpack
在项目根目录创建 webpack.config.js 和 .babelrc 文件：
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
compress: true,
port: 3000,
},
};// .babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}启动开发服务器
在 package.json 中添加启动脚本：
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
}运行 npm start 启动开发服务器。
安装 VS Code 扩展（可选）
为提升开发效率，可以安装以下 VS Code 扩展：
- ESLint：代码质量检查
- Prettier：代码格式化
- Reactjs code snippets：React 代码片段快捷生成
