从零开始的 React 第一部分

在本系列中，我们将了解 React、Webpack、Babel 和 Redux。作为本系列的第一部分，我们将从基础设置开始。让我们开始吧！

先决条件

在本指南中，我们将使用 npm 安装所有依赖项并启动项目。
因此，请确保您的计算机上已安装 npm！

基本设置

首先我们创建一个文件夹来存储我们的项目并进入其中初始化 npm：

$ mkdir getting-started-react
$ cd ./getting-started-react
$ npm init -y

现在我们要添加一些依赖项和一个名为src的新文件夹：

$ mkdir src
$ npm i react react-dom

在 src 目录中，我们需要创建一个名为index.js的文件，其内容如下：

import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <div>Hello World!</div>;
};

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.querySelector('#root'),
);

函数App返回一个包含内容Hello World 的div 。
之后，我们调用ReactDOM的 render 方法将 div 插入到 HTML 文档中。该 div 将被插入到 id 为root
的 HTML 元素中。

为了使上述代码正常工作，我们需要创建一个这样的 HTML 文档。
因此，让我们创建一个名为index.html的文件，其内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Getting Started: React</title>
</head>
<body>
    <noscript>You need to enable JavaScript to run this app!</noscript>
    <div id="root"></div>
</body>
</html>

在此文件中，您可以看到 id 为root 的HTML 元素！

Webpack 和 Babel

下一步是设置我们的开发服务器并打包文件，这样我们才能真正看到我们刚刚创建的内容。
为此，我们需要在项目中添加一些依赖项并创建一个新文件夹：

$ mkdir webpack
$ npm i webpack webpack-cli
$ npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime babel-plugin-transform-class-properties html-webpack-plugin webpack-dev-server

我们到底在这里安装了什么？这里只是个小概述，更多信息请点击链接：

webpack： Webpack 的目的是打包 JavaScript 文件以供浏览器使用。它具有高度可配置性。
webpack-cli：捆绑器 Webpack 的命令行界面。
html-webpack-plugin： webpack 的一个插件，用于简化 HTML 文件的生成。
webpack-dev-server：具有实时重新加载机制的 webpack 开发服务器。
@babel/core： Babel 采用 ECMAScript 2015 及更高版本，并使其向后兼容旧版浏览器。
babel-loader：要将 babel 与 webpack 结合使用，您需要这个 webpack 加载器。
@babel/preset-env：处理旧版浏览器的向后兼容性。
@babel/preset-react：处理 babel 中的 React 插件。
@babel/plugin-transform-runtime：减少代码大小。
babel-plugin-transform-class-properties：在 babel 中转换静态类属性。

现在我们已经安装了所有依赖项，是时候配置webpack、babel和webpack-dev-server 了。
首先，我们在根目录中创建一个名为.babelrc的新文件，并配置以下内容：

{
  "presets": 
  [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "babel-plugin-transform-class-properties",
    ["@babel/plugin-transform-runtime", {
      "regenerator": true
    }]
  ]
}

通过这种方式，我们配置了 babel 应该使用的预设和插件。

之后，我们创建 webpack 配置。为此，我们需要在 webpack 目录中创建一个名为webpack.config.js
的新文件。配置如下：

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

const baseURL = path.resolve(__dirname, '..');

module.exports = {
  entry: path.resolve(baseURL, 'src', 'index.js'),
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: `${baseURL}/src/index.html`,
      filename: './index.html',
      inject: 'body',
    })
  ]
};

我们在 webpack 配置中添加了babel-loader
，并配置了 HtmlWebPackPlugin 来查找之前创建的 index.html 文件。为此，我们使用path来随时获取正确的路径。

现在是时候启动 webpack-dev-server 了。为此，我们修改package.json中的脚本：

  "scripts": {
    "start": "webpack-dev-server --mode development --open --config ./webpack/webpack.config.js",
    "build": "webpack --mode production --config ./webpack/webpack.config.js"
  },

如果您现在运行以下命令，浏览器窗口将打开并显示Hello World！

$ npm start

更多装载机

接下来，我们将在 webpack 配置中添加更多加载器。我们需要为样式表和资源文件（例如 PNG、JPG 文件）添加加载器。
首先，我们将必要的加载器作为依赖项添加到 package.json 文件中。

$ npm i -D sass sass-loader style-loader css-loader file-loader

在这个项目中，我选择使用 SASS 而不是 CSS，因此我们还需要安装 npm 包 sass。
接下来，我们安装所有必要的加载器，以便将 SASS 分解为 CSS，然后将其加载到 HTML 中。
要使用这些加载器，我们需要修改 webpack.config.js 文件，如下所示：

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

const baseURL = path.resolve(__dirname, '..');

module.exports = {
  entry: path.resolve(baseURL, 'src', 'index.js'),
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.s[ac]ss$/i,
        exclude: /node_modules/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loader: 'file-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: `${baseURL}/src/index.html`,
      filename: './index.html',
      inject: 'body',
    })
  ]
};

需要注意的是，style-loader 需要放在 use-array 的第一个位置，因为 webpack 会把它放在最后一个加载。
所以我们首先收集所有 sass 和 css 文件，然后通过 style-loader 将它们加载到DOM中。file
-loader 会将文件解析为可在 js 文件中使用的 URL。

样式和资产

最后，同样重要的是，我们将在项目中添加一个 scss 文件和一个图片，以检查加载器是否按预期工作。
为此，我们在 src 文件夹中创建一个名为index.scss的文件，并添加以下内容：

body {
  background-color: red;
}

要使用此文件，我们只需将以下行添加到index.js的导入语句中：

import './index.scss';

如果您现在启动开发服务器，我们的项目应该具有红色背景颜色。

接下来，我们将在 src 文件夹中添加一个名为assets的新子文件夹。
只需在 assets 文件夹中放入一些随机图像即可。
要显示此图像，我们需要像这样修改 index.js：

import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import img from './assets/your-image-name.png';

const App = () => {
  return (
    <div>
      <img src={img} />
      <div>Hello World!</div>
    </div>
  );
};

ReactDOM.render(
  <StrictMode>
    <App/>
  </StrictMode>,
  document.querySelector('#root'),
);

我们在文件顶部导入图片，然后将其用作 HTML-img-tag 中的 src-attribute。如果你通过npm start
重启 webpack-dev-server ，你应该就能在 assets 文件夹中看到你放入的图片了。

结论

至此，本系列的第一部分就完成了。我们搭建了一个基本的 React 应用，使用 webpack 作为打包工具，并使用 babel 实现向后兼容。
我们配置了 webpack 以接受 SCSS、HTML、JavaScript 和图片文件。
此外，我们还添加了webpack-dev-server作为开发服务器，以便在浏览器中快速查看修改的效果。

在下一部分中，我们开始使用 React 创建一个真实的应用程序。

该系列文章的所有代码都可以在这个GitHub 存储库中找到。

鏂囩珷鏉ユ簮锛�https://dev.to/klamserdev/react-from-scratch-part-1-3lmn