开始一个项目
接触过webpack的人可能知道,webpack配置react有点麻烦,自己配置的话避免不了陷入一堆坑里面。再加上redux的配置,以及babel,热更新等,大部分人也许要折腾好几天才能弄出个基本能跑通的框架。
在本教程中,我已经将这些基本的配置过程整理出来,放到了github上直接克隆下来使用,因为本项目需要结合服务端使用,所以我写了个简单的服务端代码,仅供mock(模拟)测试。使用本项目源码的前提是你已经在电脑上安装好了node等开发环境。
1、访问 https://github.com/hyy1115/react-redux-webpack
2、本地运行shell或者cmd命令,要是不会git clone的同学选择直接下载源代码。
git clone https://github.com/hyy1115/react-redux-webpack.git
3、安装依赖包,请注意 npm install 和 npm i 是一样的作用。在网络不好的情况下,用npm安装可能会报错,那么可以采用cnpm安装。
npm install 或者cnpm install
4、别急着运行你的项目,我们还要部署服务端项目,访问 https://github.com/hyy1115/node-express-server
5、克隆开源代码到本地。
git clone https://github.com/hyy1115/node-express-server.git
6、安装依赖包。
npm install 或者cnpm install
7、运行服务器,开启9009端口。
npm start
8、运行前端项目,开启3011端口。
npm start
9、在浏览器输入下面的url,即可访问网站的首页。或许你会问,为什么不是访问3011端口呢?前端项目不是打开的3011端口吗?我稍微解释一下,访问9009,也就是服务器端口的目的是为了解决跨域的一些问题,具体原理后面做着项目就懂了。主要还是为了方便测试API。
http://localhost:9009
10、运行成功的首页效果图。
