手动创建配置一个React 项目
【摘要】 虽然react提供了脚手架，方便我们快速创建react项目！不过作为初学者，还是要了解如何手动的创建以及配置一个react项目的步骤！首先我们要知道安装一个react需要哪些技术！webpackbabel 1. webpack我们要运行一个WEB应用程序！我们需要一个HTML和JS文件。一个react项目有多个模块，每个模块处理一个单独的功能！我们需要将这些文件打包到单个JS文件中！在rea...
虽然react提供了脚手架，方便我们快速创建react项目！不过作为初学者，还是要了解如何手动的创建以及配置一个react项目的步骤！
首先我们要知道安装一个react需要哪些技术！
- webpack
- babel
1. webpack
我们要运行一个WEB应用程序！我们需要一个HTML和JS文件。一个react项目有多个模块，每个模块处理一个单独的功能！我们需要将这些文件打包到单个JS文件中！在react应用程序中，我们使用CSS、Svg、iamge等技术，但是JS引擎只理解JavaScript！因此webpack插件将这些文件转换为原生javascript！
bable
Transpiler,就像翻译器从一种语言翻译成另一种语言一样！babel(Transpiler)从一种语言翻译成另一种语言！就浏览器不支持es6功能，它们仅支持包括es5之前的版本！bable就是来解决这个问题的！它可以将es6的语法转换为旧的语法！，以便代码可以在每个浏览器中！
例如“nullish coalescing operator” ??是2020年的新语法，浏览器并不支持它，会报错！通过bable可以将它转换成浏览器支持的三元运算符！
创建文件夹并初始化npm
mkdir react-without-cra
cd react-without-cra
npm init -y
安装 React 和 Webpack 包
npm install react react-dom webpack webpack-cli webpack-dev-server --save-dev
npm i --save-dev babel-loader @babel/preset-env @babel/core
@babel/plugin-transform-runtime
@babel/preset-react
babel-eslint
@babel/runtime
@babel/cli
- React,ReactDom : 是React的核心包！
- webpack ：将所有文件打包到一个脚本中
- WebPack Dev Server：这用于开发目的以创建功能并保存服务器将刷新页面应用更改
- babel-loader — 允许使用 babel 和 webpack 转译 JavaScript 文件。公开了一个 loader-builder 实用程序，允许用户为其处理的每个文件添加 Babel 配置的自定义处理。
- @babel /preset-env — 允许使用最新的 JavaScript，而无需微观管理目标环境需要哪些语法转换（以及可选的浏览器 polyfill）。
- @babel /core — Babel 的核心包
- @babel /plugin -transform -runtime — 一个插件，可以重用 Babel 的注入帮助代码以节省代码大小。
- @babel /preset-react — 它有一组插件用于解析某些反应语法，例如 jsx，添加 react createClass displayName …等
创建 index.js,index.html 文件
创建 index.html,index.js 文件并粘贴以下代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
index.js
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"));
Webpack 配置
在 webpack 配置文件中，您必须为模块指定一些规则，这些规则是一个数组，可以指定如下规则：
{
test: /\.?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
},
},
},
- test 表示要打包的文件
- exclude 排除文件，不进行打包
- use对象主要有两个 key:values - loader & options
- loader 表示你要使用的转换工具，例如css-loader可以转换CSS
- 选项对象提供选项有提供的数组，它提供了用于转换代码的插件
- 这里的模式是你想要的环境，这里是开发，因为当你将变更部署到生产环境时，我们正在开发这个项目
- 生产模式将大大压缩和优化
插件
- 插件是打包过程完成后使用的 JavaScript 对象
- htmlWebpack 插件 用于生成入口 index.html 文件，其中包含 webpack bundler 生成的脚本
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "index.html"),
}),
],
**总体上 webpack.config.js 文件看起来像这样
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development",
entry: path.join(__dirname, "src", "index.js"),
output: {
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /.?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
},
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "index.html"),
}),
],
};
#5 运行项目
- 运行npm run dev启动项目
- 在浏览器中访问localhost:8080
输出如下所示
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）