后端开发教程 - Java、Spring Boot 实战 - msg200.com
像专业人士一样从头开始创建 React 应用程序
步骤 0：安装 Node
1.初始化项目
2.安装依赖项
3. 配置 Babel
4.配置Webpack
5. HTML 正文
6.创建 React 应用
7.添加脚本
结论
感谢阅读
即使你是一位经验丰富的开发人员，创建React 应用程序也是一件非常困难的事情。这导致了命令行工具的开发，以简化创建React 应用程序的过程。create-react-app
使用它create-react-app可以带来一些额外的好处，例如快速原型设计和让初学者可以轻松开发 React Apps ，但也存在一些缺点。
由于其create-react-app目标是生成一个或多或少通用的应用程序，因此对于任何特定的特定情况，都会产生许多不必要的依赖项。使用它的另一个缺点是定制有时可能会很麻烦。create-react-app
因此，让我们深入研究如何从头开始创建React 应用，以便你能够根据自己的喜好定制应用
步骤 0：安装 Node
不用多说，你需要Node.js和npm或yarn（本文中我将使用npm）。要测试它们是否已安装，请运行以下命令：
node -v
npm -v
如果您尚未安装它们，我相信您能够安装它们，因此我将继续下一步。
1.初始化项目
创建一个新文件夹并导航到其中。要初始化 Node 项目，请使用：
npm init
或者如果你像我一样懒的话，可以使用：
npm init -y
并修改生成的package.json。
2.安装依赖项
现在我们将向我们的项目添加必要的依赖项。
1. React 依赖项
这些是唯一不是开发依赖项的依赖项
npm install react react-dom
让我们看一下这些库：
react：我们将要使用的库。：用于管理DOM 元素的react-dom包。
2. Webpack 依赖项
Webpack是Node.js世界中最受欢迎的打包工具。它可以打包甚至压缩项目中的 JavaScript 文件。
npm install -save-dev webpack webpack-cli
看一下这些库：
webpack：捆绑器。webpack-cli：Webpack的CLI。
3. Webpack 加载器
Webpack需要加载器来预处理文件。它们允许用户自定义Webpack，以便打包JavaScript以外的静态资源。
npm install --save-dev babel-loader
现在，让我们从绝对必要的babel-loader（Babel的加载器）开始，然后根据需要添加其他功能。
4. Babel 依赖项
Babel是一个 JavaScript 编译器，它可以将JavaScript ES6转换（或者更确切地说是转译）为目标版本的JavaScript ，因为并非所有浏览器都支持ECMAScript 6功能。我们将使用它来将项目中的JSX代码转译为浏览器可以理解的常规JavaScript。
npm install --save-dev @babel/core @babel/preset-react
依赖项：
@babel/core：Babel 编译器核心。@babel/preset-react：带有一组用于支持React 功能的插件的软件包。
呼！我们终于搞定了依赖关系！
3. 配置 Babel
要配置Babel.babelrc ，我们需要在项目的根级别添加
{
"presets": [
"@babel/preset-react"
]
}
4.配置Webpack
现在是时候配置Webpack了。在项目根目录webpack.config.js下添加以下代码：
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
mode: "development",
output: {
filename: "bundle.js",
path: path.resolve("dist"),
publicPath: "/",
},
module: {
rules:[
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: "babel-loader"
},
],
},
}
让我们看看这一切做了什么：
entry：应用程序的入口点。在React中，这是我们使用渲染器的文件。mode：应用程序运行的模式（开发或生产）。output：告知Webpack将我们的捆绑代码放在哪里以及文件的名称。module：告知Webpack如何以及何时使用我们安装的加载器。我们使用正则表达式来告诉每个加载器要加载哪些文件扩展名。
5. HTML 正文
添加/public/index.html和基本主体：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React From Scratch</title>
</head>
<body>
<div id="root"></div>
<!-- The bundle-name should be same as you defined in webpack config file -->
<script src="../dist/bundle.js"></script>
</body>
</html>
6.创建 React 应用
最后，我们现在开始开发我们的应用程序。添加/src/index.js（中提到的应用程序的入口点webpack.config.js）
import React from "react";
import ReactDOM from "react-dom";
import App from "./App"
ReactDOM.render(
<App />,
document.querySelector("#root")
);
和应用程序文件/src/App.js
import React from "react";
export default function App() {
return (
<div>
<h1>React from Scratch</h1>
</div>
);
}
7.添加脚本
我们已经完成了应用程序的制作，但是我们如何运行它呢？
很高兴您问到这个问题。为了方便使用，我们需要添加 2 个脚本：
"scripts": {
"build": "webpack --mode production",
"start": "webpack --mode development"
}
现在您可以使用npm run build或npm run start捆绑React App并从运行该应用程序/public/index.html。
结论
现在你也知道了如何从 Scratch创建一个绝对基础的React 应用。好极了！
您可以使用其他插件和加载器来扩展功能，例如安装style-loader和css-loader添加：
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
在你的React Appwebpack.config.js中，你可以实现CSS支持
您可以添加代码webpack-dev-server来为网站提供服务，而无需打开HTML文件（以及可能更优化的start脚本），还可以HotModuleReplacementPlugin启用热重载等等。可能性无穷无尽。现在，您可以创建满足您个性化需求的React 应用。
祝您在React开发之旅中一切顺利！:)
感谢阅读
需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我
想联系我吗？请在LinkedIn上联系我
关注我的博客，每两周在Medium上获取最新资讯
常问问题
这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。
-
我是初学者，该如何学习前端 Web 开发？
可以参考以下文章： -
你能指导我吗？
抱歉，我工作已经很忙了，没时间指导任何人。