安装反应 - Shell-Bash

反应（React）是 Facebook 开源的一个用于构建用户界面的 JavaScript 库，它已经成为了 Web 开发中最受欢迎的前端框架之一。如果你正在使用反应构建应用程序，并且你需要使用一些 Shell-Bash 命令进行开发或者部署，那么你需要安装一些工具来支持你的开发和部署。

安装 Node.js

首先，你需要安装 Node.js，因为 React 是一个基于 JavaScript 的库，所以你需要安装 Node.js 来运行和编译你的代码。你可以从 https://nodejs.org/en/ 下载最新的 Node.js 版本，我们推荐使用 v12 或以上的版本。

安装 NPM

NPM 是 Node.js 的包管理器，它可以帮助你安装、更新和管理你的项目依赖。在安装 Node.js 的过程中，NPM 会自动安装。你可以使用以下命令来检查 NPM 是否已经安装：

npm -v

安装 React

你可以使用 NPM 来安装 React。通过以下命令可以安装 React：

npm install --save react react-dom

这个命令将会安装 React 和 React DOM。React DOM 是 React 的官方 DOM 库，用于在 Web 上操作 DOM 元素。

安装 Babel

Babel 是一个 JavaScript 编译器，它可以提供一些编译器和转换器来将 ES6 和 JSX 代码转换成浏览器可以执行的代码。你可以使用以下命令来安装 Babel：

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

这个命令将会安装 Babel 和一些插件，用于编译和转换你的代码。

.babelrc 配置

Babel 需要一个配置文件 .babelrc 来设置一些编译选项。你可以在你的项目根目录下创建一个名为 .babelrc 的文件，并将以下代码添加到文件中：

{
  "presets": [
    "env",
    "react"
  ]
}

这个配置将启用 Babel 的 env 和 react 插件，用于将你的代码转换为浏览器可以执行的代码。

安装 Webpack

Webpack 是一个模块打包工具，可以帮助你打包和压缩你的代码。你可以使用以下命令来安装 Webpack：

npm install --save-dev webpack webpack-cli webpack-dev-server

这个命令将会安装 Webpack 和 Webpack 相关的插件和工具，用于打包和压缩你的代码。

编写 Webpack 配置文件

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$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  devServer: {
    contentBase: './dist',
    port: 3000,
    open: true
  }
};

这个配置文件将会：

1. 读取入口文件 './src/index.js'
2. 使用 Babel 加载器来编译和转换 ES6 和 JSX 代码
3. 将输出文件放置在 './dist' 目录中，并命名为 'bundle.js'
4. 设置开发服务器端口号为 3000，并在浏览器中打开你的应用程序

运行 Webpack

你可以使用以下命令来运行 Webpack：

npx webpack

这个命令将会读取你的 webpack.config.js 文件，并根据配置文件中指定的选项来打包和编译你的代码。

运行开发服务器

你可以使用以下命令来运行开发服务器：

npx webpack-dev-server --open

这个命令将会启动一个开发服务器，并在浏览器中打开你的应用程序。

结论

通过以上步骤，你已经可以使用 Shell-Bash 命令来开发和部署你的 React 应用程序了。这些命令包括：

• 安装 Node.js
• 安装 NPM
• 安装 React
• 安装 Babel
• 编写 .babelrc 配置文件
• 安装 Webpack
• 编写 webpack.config.js 配置文件
• 运行 Webpack
• 运行开发服务器

现在，你可以开始编写你的 React 应用程序，并使用 Shell-Bash 命令来编译、打包和部署你的代码了！