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 环境（可选）

如果需要手动配置，可以通过以下步骤完成：

1. 初始化项目并安装 React 核心库：

   mkdir my-app
   cd my-app
   npm init -y
   npm install react react-dom

2. 安装开发依赖（如 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 代码片段快捷生成