这一节,我们来说说怎么搭建React ,或者是更合适的方法。
一直以来,我们深深喜爱着的方式,也是习惯了的方式是需要哪个js,就在页面,然后需要把js引入到文档底部来加速渲染页面。
所以小伙伴们肯定希望学习react从引入react.js开始,然后自己写个index.js或者demo.js来引入。我们还得引入,但自己引入的index.js需要这么写这么做是希望浏览器能够认识我们接下来要学习的react的狗屎一样的写法。他加入的jsx的语法糖,含有es6的招式,所以旧版本浏览器不认识。react没有ajax功能,所以我们想引入jQuery.js,我们还想引入bootstrap.css。
是不是发现学习react也挺简单的,其实不然。你会发现还是跑不起来,因为他需要服务器支撑,我们再把搭建好的react demo放到tomcat下面,然后就访问localhost:8080/reactdemo/index.html 然后就跑起来了。
虽然跑起来了,但我告诉你,以上的我们留恋的学习姿势是错误的,是不符合当下形式的。
下面我来说更推荐的:
1、安装Nodejs
地址: https://nodejs.org/en/download/
来这里下载,然后安装。至于怎么下载,怎么安装,跟你安装QQ思路差不多,安装完了也不用配置环境变量。只需要打开cmd小黑窗,然后输入node -v 。如果刚才安装成功了,会显示一个nodejs的版本号
2、搭建react官方demo实例
推荐安装学习地址: http://www.runoob.com/react/react-install.html
推荐在C盘以外的盘符创建一个空文件夹,比如定义:ggReact ,然后通过cmd小黑窗定位到我们新建的ggReact文件夹再开始 npm 等一系列操作,操作步骤大概如下:
npm install -g create-react-app create-react-app my-app cd my-app/ npm start
当你npm start以后,demo实例会自动跳出来。这样证明你的环境已经搭建好了。
工欲善其事必先利其器,我们更推荐使用node npm的方式来搭建自己的react工程,而不是再利用script页面引入的方式,因为目前的潮流就是Node npm ,我们必须紧跟着,还得跟的快。如果你不按潮流来,仍然很守旧,按我给你看个好玩的东西。
看过之后小伙伴们觉得自己属于哪个层级呢?
然后你可以看一下搭建好的react工程的目录结构,下一节我们来说一下,初次玩react的你该怎么整理一下这个目录结构从而使自己更适合继续玩下去,下一篇文章就叫:狗屎一样的React(第二节,让目录结构变得更易懂)