React是目前全球使用量最大的框架，FaceBook出品，心疼扎克，入驻中国又一次凉了。去年React16发布，FB的大佬们重写了底层架构取名曰Fiber，性能大幅提升，高大上啊，React这么好，我选择Vue，毕竟铁粉~哈哈。最近开始在看vue的源码，希望以后也一点点分享我的撸源码心得。
回归正题，快速，飞速，不对，极速上手撸React。我们以一个最最简单的demo来讲解一下React最最基本的使用。当然这里你如果之前有过Vue或者Angular的基础会理解起来容易很多，毕竟核心都是数据驱动。
我这里以MacOS讲解，Windows差距也不大。首先，开机！！！打开控制台，cd到你的任一文件夹，输入mkdir xxx。就输react吧
建立react文件夹
然后cd到react里面，这里先装node，这个我就不多说了。然后安装React脚手架，如果你用过vue-cli的话，其实就是一样的东西。我们输入npm i create-react-app -g记得全局安装~
安装脚手架
装好了，我们继续输入create-react-app xxx,xxx是你起的文件夹名字，随意，我们就取myapp吧,这个过程可能比较慢，要从GitHub里拉模板还有装各种依赖，磨炼你的耐心。
建立工程
好，在最下面可以看到，我们装的最新版的React16.4，对应的React-dom也是一样，这里要注意的就是如果说你不使用脚手架的自己手动安装react和react-dom的时候版本一定要保持一致，不然会报错。当然一般情况不会遇到这个坑。
开撸
再往下拉，他说你可以撸下面几个命令，第一个npm start启动项目，第二个run build是打包了，暂时用不到，第三个test测试也用不到，第四个eject, 射，弹射，想想就恐怖，这玩意最好别碰，后面还提醒你，你射了就不能后悔了。这东西就是把webpack配置开放给你，默认你是看不到这些配置文件的，这个后面我们再说。一般情况官方默认配置我们就够用了，当然你想具体了解webpack另说。
最后我们按他的提示，cd myapp然后npm start开撸开撸
本地服务启动成功
第一个React App
过一会，网页自动打开了，卧槽，牛逼，如果你用过vue-cli 2.x就会发现我们还要手动打开浏览器，很low，其实也可以实现的，只要在packjson里script里的npm start里的webpack-dev-server 后面加上一个--open的参数就ok了，脚手架，就是提升工作效率的，还不是因为程序员懒嘛。
接着我们看下项目工程目录
工程目录
很整洁清爽，有没有，你发现，找不到webpack配置文件，想要的话，射一下就出来了。
node_modules不用说，npm黑洞一般的依赖文件，public就是我们入口html,下面那个manifest先不用管，PWA相关的。再看下面，src就是我们工程源码目录了，下面那个一长串的servicework的也不用管，也是PWA的。好，看下最重要的入口文件，index.js
入口文件
这里import是es6的模块化，代替了我们过去写一堆script标签，不利于维护。
首先我们看到引入了React和React和ReactDOM这俩核心库，然后引入了css，最后引入了一个关键的App组件，下面的serviceworker略过。
最下面的就是ReactDOM的render函数渲染了，这里JSX语法可以直接写html标签，后面第二个参数就是你要挂载的dom节点，你会想root在哪。找到之前的public文件夹下的入口html文件
终于等到你
看到没有，我们之前的整个项目的代码都是渲染在这个root之下。当然这也导致一个问题，seo也就能看到一个root，对应我们可以采用ssr解决，扯远了。
我们来编写第一个hello world.进入App.js
app.js
愉快地撸es6吧，开局一个class剩下全靠编，其他我就不细说了，我们把里面的header和p标签全部删掉写上我们的Hello world。。。
hello world
然后ctrl+S保存，切到浏览器，不用手动刷新，webpack-dev-server已经帮我们热更新了。
好了，可以说是精通React了
好，我们现在尝试自己写一个新的组件。我们在src下新建一个文件Tqq.js，内容就把之前的copy一份来。好了，现在App.js就是我李哥，Tqq.js就是我，李哥的小弟。小弟呼喊，社会我李哥，我李哥牛逼！记住最后要export default把tqq这个小弟给派出去，不然我李哥无法调遣小弟干活。
我李哥
接下来我们进入到App.js里，看看李哥在干嘛。
app.js
把我小弟tqq给import进来，import Tqq from './Tqq.js', 当然.js后缀你可以不写，Tqq的名字也可以改的，李哥想叫小弟啥名就叫啥名。
一个root
接下来看最关键的一点，我李哥是大哥，独裁，所以每个组件默认只能有一个根节点，就是我最外层的div，不然会报错。小伙子，你想造反？？？如下图，
只能有一个根节点
好，接下来，我们来看看我李哥给自己的称呼。也就是组件的数据存储，我们在class里写一个构造器，数据放在this.state里，比如我们存一个李哥。
this.state
然后我们肯定要让李哥出来快活啊。我们就要在组件里召唤我李哥，把Hello world的world换成我李哥。在React里绑定数据用的是{}，和vue和angular的{{}}不一样
李哥出来快活啊
然后我们保存看看李哥出来快活没
李哥在快活
下面小弟齐呼，社会我李哥，我李哥牛逼！
李哥听久了这称呼也听腻了，决定让小弟们改口，叫猪哥。所以李哥就要下令了，怎么下令呢。李哥决定加一个command的按钮，这里注意，onClick的C要大写，然后李哥下令，大家以后改口喊猪哥，怎么改就要改state的值了，React给我们提供了一个api叫setState，我们只能通过它去修改state的数据
改口猪哥
李哥要下令了
点击李哥下令改口，一片红，下令失败，什么情况
下令失败了
找不到setState？？？李哥很不爽，下令严查，最后发现这个锅要this来背，我们点击下令按钮触发command的事件的时候，此时的this执行上下文我们是指向当前的button按钮的，按钮上肯定是没有setState的，所以我们要绑定到外层执行上下文，所以我们修改一下onClick
bind改变this指向
现在，李哥再次下令改口。
改口
李哥发现虽然改口成功了，但只有他自己知道，下面小弟tqq不知道啊。所以要把改口令的数据传递下去给小弟们。我们找到小弟tqq,然后跟他们说以后喊李哥要喊这个name，把this.state.name传递给tqq小弟
传递给小弟
但是，李哥发现关告诉小弟还不够啊，小弟们要接受一下。
所以我们切到Tqq.js里，通过this.props.name接受一下李哥的下的命令
小弟接受命令
ok，李哥心满意足，正式下令。改口猪哥。
点击下令
下令成功
李哥还觉得不太满意，感觉小弟们口号太小了。要大一点。这就需要css了，还记得前面的App.css吗，我们点进去把之前的都删了，自己写一个class
css
好，下面要在Tqq.js里面使用这个dalao
绑定类
我们给div加一个class，记住要写className,N要大写，不然React会报错。保存
我李哥牛逼
李哥大喜，大赦天下！
好了，先写这么多吧，入门应该也够了。毕竟我对React会的也不多，毕竟我是尤大铁粉~
网友评论