2019-01-04 新建react+nodejs的demo

1.创建工作文件夹并cd到当前目录

2.输入命令npm init，会创建一个package.json

3.创建一些目录，后面会使用到

4.安装webpack

webpack现在最新是8的版本：npm install webpack --save -g

这个是安装的全局的，但在我mac上安装完后仍使用不了webpack命令，我们需要去改变电脑的环境变量。

5.安装loader

我是这么理解的：loader就是译压缩成js代码

npm install babel-loader css-loader style-loader jsx-loader --save

其中这个babel-loader就是把react代码转译成js代码，但其中有版本的坑

最后解决是用npm install -d babel-loader @babel/preset-react @babel/preset-env webpack;

6.创建webpack.config.js

这个文件是个配置文件，就是告诉webpack应该干什么的。因为版本问题，也有坑，已解决。

7.使用webpack打包

我们使用webpack命令可以打包，把我们项目里的其他文件打包压缩成一个很小的新的js，命令是：webpack。在我们开发中，如果改动了js文件，每次都重新自己运行webpack命令打包是很麻烦的，所以我们可以用webpack --watch命令，他会自动监测如有改动自行重新打包。

8.安装react（略）

9.安装Express

npm install express --save -g

10.安装ejs

EJS是nodejs的模版引擎

npm install ejs --save -g

11.开始编写index.html

这个页面就是我们前端的主页面，其中最主要的是它引用了webpack打包过后的js，这个js就是react组件。