狗屎一样的React(第一节,怎么来搭建react demo更合适)

前端之家收集整理的这篇文章主要介绍了狗屎一样的React(第一节,怎么来搭建react demo更合适)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这一节,我们来说说怎么搭建react ,或者是更合适的方法

一直以来,我们深深喜爱着的方式,也是习惯了的方式是需要哪个js,就在页面<script src="xx.js"></script>,然后需要把js引入到文档底部来加速渲染页面

所以小伙伴们肯定希望学习react从引入react.js开始,然后自己写个index.js或者demo.js来引入。我们还得引入<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>,但自己引入的index.js需要这么写<script type="text/babel" src="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 createreactapp
 createapp myapp
 cd app/
 npm start
当你npm start以后,demo实例会自动跳出来。这样证明你的环境已经搭建好了。


工欲善其事必先利其器,我们更推荐使用node npm的方式来搭建自己的react工程,而不是再利用script页面引入的方式,因为目前的潮流就是Node npm ,我们必须紧跟着,还得跟的快。如果你不按潮流来,仍然很守旧,按我给你看个好玩的东西。

看过之后小伙伴们觉得自己属于哪个层级呢?

然后你可以看一下搭建好的react工程的目录结构,下一节我们来说一下,初次玩react的你该怎么整理一下这个目录结构从而使自己更适合继续玩下去,下一篇文章就叫:狗屎一样的React(第二节,让目录结构变得更易懂)

原文链接:https://www.f2er.com/react/304395.html

猜你在找的React相关文章