上一篇文章还在信誓旦旦地说,将游戏项目开发过程中遇见的问题 与总结同步至博客,到昨天游戏真正上线了,我还是没来得及去同步。忙于学校的课程琐事,还有参加三创比赛,又得重新开始一个新项目的制作,简直停不下来~~~呜呜,实习的简历都来不及管了,先前说的备战阿里也成了笑谈。

回归正题,React,我这次项目中搭建网站用到的主要框架。不得不说,这个框架确有它的魅力。虽然前期搭建环境,熟悉项目开发过程等让人心烦,但一旦度过了这些步骤,后面的项目开发兼职就是坐飞机。嘿嘿,再加上anti等蚂蚁金服这样的前端ui,就仿佛坐上了火箭~

额,又跑题了。

如何用React搭建一个项目,这个我现在还正整不太明白。网上的教程有关于React Native和React web以及React rudix等等,并且每个系列的具体步骤还很大差异。百度React的分支,却没有相关的文章介绍。我云里雾里在其中转了很久,最后还是没有明白。什么路由啊,依赖包啊,还有虚拟服务器启动等?最为关键的一点,React可以自动刷新,但按照某些教程去做,React自动刷新功能的实现,还得自己配置相关文件,最后居然还不能成功。。。。。

好了,无视上面的屁话,这次真的要进入正题了。

1.先安装python,因为node运行在python环境的基础上。

2.再安装node,因为React运行在node环境的基础上。

3.注意python和node的版本对应,在安装完node过程中,会顺带安装npm。前两步安装过程自行百度,easy。提醒,安装完node后要配置电脑的环境变量(忘记说我的是Win7系统了)

4.打开“命令提示符”窗口,输入   npm install g cnpm registry=https://registry.npm.taobao.org 。意思是在全局安装React相关包,并且使用淘宝的镜像网站下载,这样在全局的任何地方打开命令提示窗口都可以使用该包。如果只是在该文件夹内安装的话,使用npm install XXX –save-dev( –save-dev 标记表示该 node 包只是用作开发环境的一部分,并不会被作为你产品代码的一部分发布 )。但我没使用淘宝镜像网站,而是直接使用 npm install -g <package>。(包的安装可能有些难以理清,多试几次就好,这一步不用操作,只是说明)

5.cnpm install g createreactapp。 在全局安装createreactapp包,后面可以傻瓜式地安装初始化一个新React项目。

6.createreactapp myapp && cd my-app。创建一个my-app为名称的项目,并且进入该项目的根目录。

7.npm start。启动my-app项目。等待一小会,就会在游览器打开my-app的网页。

8.然后你就可以在my-app项目中package.json等文件,并且正式具体去完成该项目了。然后,你每次的改动,浏览器都会自动刷新。…这是一个很漫长的过程。

9.npm run build。将项目打包,这个时候React会自动将文件内的代码按规则转换成html、js和css为最终的文件。你只要拷贝build文件夹就好。

开发一个简单的React项目大概就是以上几个步骤了,其中第8步最难!网上还有很多类似于“使用 Webpack 和 ES6 进行 React 开发”的项目,具体的开发过程我也还没仔细研究,不怕晕的童鞋可以自行百度相关资料。我这里放一个别人写好的项目的链接,Webpack+ES6

当然,我运气比较好,此次开发网站时碰见一个别人封装得不错的框架,而我只需根据自己的需求更改具体的内容就好。该项目很值得推荐,大家可以看看

最后,贴一个自己根据上面项目更改了部分组件的项目网址,看看