React项目搭建

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 一、环境依赖
• 二、开始搭建
  • 1.创建项目目录并初始化
  • 2.新建文件夹及文件
• 三、webpack相关配置

---

一、环境依赖

1. Nodejs（可使用node -v命令确认是否安装及版本）
2. npm包管理工具：yarn
3. 自动化：安装webpack、webpack-cli、webpack-dev-server（全局安装）

---

二、开始搭建

1.创建项目目录并初始化

代码如下：

mkdir react-app && cd react-app
npm init -y

2.新建文件夹及文件

1. 入口html文件：项目根目录下创建public文件夹，并在里面创建index.html
2. webpack打包入口：项目根目录下创建app.js

     

---

三、webpack相关

1. webpack文档地址：概念 | webpack 中文文档 
2. 根目录下创建webpack.config.js文件，简单配置下，在app.js中添加代码：conole.log('hello world')执行webpack命令，会在根目录下生成dist文件夹和webpack.bundle.js文件
   1. 

在public/index.html中引用打包好的js：webpack.bundle.js，执行webpack serve

1. 浏览器结果为：
2. 修改app.js文件刷新浏览器，输出结果会改变，查看webpack.bundle.js会发现内容不会改变，这是因为webpack-dev-serve打包好的js是托管在内存中的，所以在根目录中看不到改变

 四、安装react  react-dom

yarn add react react-dom react-router