本文详细介绍了如何从头开始初始化React项目，包括创建package.json，资源文件夹，配置Webpack，Babel，HtmlWebpackPlugin以及Webpackdevserver。通过这个过程，读者将学会如何将JSX和ES6转换为浏览器兼容的代码，并实现热重载和自动刷新。
今天建react 项目的时候发现
在一个典型的React项目中，我们使用Babel和Webpack。 Babel用于将JSX和ES6转换为纯ES5代码。 Webpack用作捆绑程序。在这一篇文章中，我们从头开始对React 项目的建立。
首先 创建一个 react-starter 的文件夹。 之后在文件夹内部操作。
一： 初始化 Package.json 文件夹
在Node项目中，package.json文件存储有关项目的信息，例如其名称，许可证，脚本，依赖项等。我们可以使用这一条命令来创建package.json文件。
npm init -y
-y标志用于设置默认值。现在，在项目文件夹中创建了一个package.json文件，内容如下。
{
"name": "react-starter",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
二： 创建 资源文件夹
因此，首先在根目录中创建一个文件夹src。现在，该文件夹将包含所有使用JSX编写的React组件代码，使用SCSS编写的样式以及用于呈现React组件的模板HTML。当我们构建项目时，所有的JSX将被转换为JavaScript，所有的SCSS将被转换为纯CSS，HTML将使用所需的文件引用进行更新，并复制到/ dist文件夹中。
创建一个 src/index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0&
最低0.47元/天 解锁文章
扫一扫
3048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
