不使用 create-react-app 创建 React 项目

为什么要发这个帖子？

按照这些命令，使用终端创建反应应用程序非常容易。

npx create-react-app my-app
cd my-app
npm start

很简单吧？然而，我们可能并不清楚后台运行着什么。我们的 React 应用需要哪些组件才能运行。这就是我们在这篇文章中要讲的内容。如何从零开始构建一个 React 应用。

为了实现这一点，我们需要在你的系统中安装 npm

步骤

在您的系统中创建一个目录

mkdir 我的应用程序

进入目录

cd 我的应用程序

创建 package.json 文件

npm init -y

npm init 将创建新的 package.json 文件，
标志 -y 将告诉 npm 在创建 package.json 时使用所有默认配置选项

安装 react 和 react-dom

npm 安装 react react-dom

使用：它将在 package.json 文件的依赖项下添加 react 和 react-dom，并创建包含所有其他依赖库的 node_modules 目录。

创建 gitIgnore 以避免将不必要的代码推送到 github

vim .gitignore

你的 gitignore 文件中可能需要的内容包括

node_modules
.DS_Store -- 如果你在 Mac 机器上
dist

dist（分发文件夹）——是 webpack 和 babel 在构建代码时生成的构建目录。因此，我们不希望此文件夹与生产环境应用的编译器一起生成。

创建应用程序文件夹

mkdir 应用程序

在其中创建两个文件。

触摸 index.js index.css

开始编写你的 Hello World React 应用程序

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class App extends React.Component{
    render(){
        return(
            <div>Hello World</div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'))

因此，当您尝试在浏览器中运行此代码时，它将出现错误，因为我们的代码是用 JSX 编写的，而浏览器无法理解它。

这就是 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

标志 --save-dev ：我们使用此标志来区分构建依赖项和应用程序依赖项

您可以检查您的 package.json 文件以了解此标志如何区分。

Webpack 配置

Webpack 是一个模块打包工具。所以目前我们只有一个模块。但是，随着应用的扩展，我们会有更多模块。因此，Webpack 会智能地将所有这些模块绑定在一起，并创建一个包含所有这些模块的文件。

触摸 webpack.config.js

var path = require('path');
var HtmlWebpackPlugin =  require('html-webpack-plugin');

module.exports = {
    entry : './app/index.js',
    output : {
        path : path.resolve(__dirname , 'dist'),
        filename: 'index_bundle.js'
    },
    module : {
        rules : [
            {test : /\.(js)$/, use:'babel-loader'},
            {test : /\.css$/, use:['style-loader', 'css-loader']}
        ]
    },
    mode:'development',
    plugins : [
        new HtmlWebpackPlugin ({
            template : 'app/index.html'
        })
    ]

}

如何配置 webpack 查看我之前的帖子

React 的 Webpack（介绍）

Vishang ・ 19年4月22日

#反应 #webpack

与 babel-loader 一起工作，我们必须将 babel preset 配置添加到我们的 package.json 文件中

"main": "index.js",
"babel":{
    "presets" : [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  }

要运行构建，我们必须将 webpack 添加到 package.json 中的脚本标签中

"main": "index.js",
  "babel":{
    "presets" : [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "scripts": {
    "create": "webpack"
  },

因此，当我从终端运行npm run create时，它​​将运行 webpack，它将创建 dist 文件夹和带有 index.html 文件的捆绑文件。

每次运行 webpack 都很麻烦。所以你可以启动一个 webpack 开发服务器，这样它就会在你运行它时立即开始构建你的代码。在 package.json 中修改你的脚本，如下所示：

"scripts": {
    "start": "webpack-dev-server --open"
  }

现在，当您运行npm run start时，它将启动开发服务器并在浏览器中打开您的应用程序。

最终的目录结构将如下所示

要旨

结论

我们创建一个简单的应用组件，并在 ID 为“app”的元素中渲染该组件。Webpack 从 index.html 开始，获取我们应用程序中的所有模块，并执行所有转换，例如 babel-loader、css-loader 和 style-loader。Babel loader 使用 env 和 React 预设来支持旧版浏览器，并将完整代码导出到 dist 文件夹中，以便我们在生产环境中部署。