本人前端小菜鸡一枚,因为公司要重构网站,打算用用react,毕竟一切为了学习(装B)嘛!!!
在学习react之前,看了许多资料,博客,官方文档之类的,可我这记吃不记打的记性,还是需要在这里记录一下,能帮助别人最好,不能或者哪里有错的话也希望各位大大嘴下留情(爱说不说,反正我不看评论)!!!
里面有些内容是参考一些牛人的,站在巨人的肩膀嘛不是!!!
1.下载react
关于这个,大家自己去官网下吧,好不好?(啥?你不知道在哪下,虽然我不太会用github,但是我觉得百度其实还不错)
2.关于JSX
JSX,理解起来就是用这个东去编写,无论是别人还是自己都能对代码可视化更加好一些。
这里关于JSX要讲的就是本来REACT推荐的是引入JSXTransformer.js,不过后来说是和babel怎么怎么的,反正FB决定不维护了,以后就用babel了,害的我开始还在一直用JSXTransformer.js。
所以就有开始的这个样纸:
变成了这个样纸:
3.开始编写Hello World
所有伟大的成果都是从Hello World开始的。
<!DOCTYPE html><html> <head> <title>Hello React</title> <script src='/images/loading.gif' data-original="js/react.js"></script> <script src='/images/loading.gif' data-original="js/react-dom.js"></script> <script src='/images/loading.gif' data-original="js/browser.min.js"></script> </head> <body> <div id="content"></div> <script type="text/babel"> React.render( <h1>Hello, world!</h1>, document.getElementById('content') ); </script>
上面这段代码输出成功的话,恭喜你,踏出了REACT成功的第一步!^_^
ps:从外部引用底部的js也可以哦!!!官网给出说CHROME好像必须开启HTTP服务,哎,搭个服务器吧,亲!
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
本来想这就结束的,可毕竟是处女作,就在多嘴几句好了。
这里想解释下自己的话:(不喜可直接略过啊)
从开始接触前端到现在其实也就1年时间,就在这充满各种大牛,各种百度‘退休’,阿里‘跳槽’,腾讯‘被炒’的地方写博其实压力很大呀!
而且还充斥在这个各种框架、插件漫天飞的年代,node,react,es6,angular2,ext,妹子UI,Bootstrap......多的头都大了。
还是希望自己能够认真挑选,仔细对待,毕竟个人觉得,要是一个网站里这拉一点点用用,那拉一点点用用,那感觉肯定会让你酸爽的。
尤其是不要贪多嚼不烂(这明显就是在骂自己),一天研究出一个你可能将来用到的问题,也比从别人那里扣过来一点直接解决问题的好。
自己只想以一个菜鸟的角度去帮助别人,帮助自己,谢各位体谅!
那么我们下期见喽!!!
结尾名言:不要太早遇到对的人,人生遇到的每个人,出场顺序真的很重要,很多人如果换一个时间认识,就会有不同的结局。(这个就不用引用出处了吧!)
参考资料:http://reactjs.cn/react/docs/getting-started.html
原标题:从0开始学习react(一)
关键词:react