狗屎一样的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(第二节,让目录结构变得更易懂)

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...