天天看点

ReactJS简介ReactJs简介

ReactJs简介

现在最热门的前端框架,毫无疑问是 React
基于 React 的 React Native 发布,
结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。
React 起源于 Facebook 的内部项目,
因为该公司对市场上所有 JavaScript MVC 框架,都不满意,
就决定自己写一套,用来架设 Instagram 的网站。
做出来以后,发现这套东西很好用,就在2013年5月开源了。

由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。
所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。
这个项目本身也越滚越大,从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。
衍生的 React Native 项目,目标更是宏伟,希望用写 Web App 的方式去写 Native App。如果能够实现,整个互联网行业都会被颠覆,
因为同一组人只需要写一次 UI ,就能同时运行在服务器、浏览器和手机

既然 React 这么热门,看上去充满希望,当然应该好好学一下。
从技术角度,可以满足好奇心,提高技术水平;
从职业角度,有利于求职和晋升,有利于参与潜力大的项目。
但是,好的 React 教程却不容易找到,这一方面因为这项技术太新,刚刚开始走红,大家都没有经验,还在摸索之中;
另一方面因为 React 本身还在不断变动,API 一直在调整,至今没发布1.0版。
           

学习网址:

1.原版(建议): https://facebook.github.io/react/index.html
  中文版(不太建议): http://reactjs.cn/
2.另一个入门教程: https://hulufei.gitbooks.io/react-tutorial/content/
3.阮一峰blog: http://www.ruanyifeng.com/blog/2015/03/react.html
           
ReactJS简介ReactJs简介
上面代码一共用了三个库: react.js 、react-dom.js 和 Browser.js ,
它们必须首先加载。
其中,
react.js 是 React 的核心库,
react-dom.js 是提供与 DOM 相关的功能,
Browser.js 的作用是将 JSX 语法转为 JavaScript 语法,
这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。
           
ReactJS简介ReactJs简介
最后一个 <script> 标签的 type 属性为text/babel
这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容
凡是使用 JSX 的地方,都要加上 type="text/babel" 
           

ReactDOM.render()

ReactDOM.render 是 React 的最基本方法,
用于将模板转为 HTML 语言,并插入指定的 DOM 节点
           

运行结果

ReactJS简介ReactJs简介

课后作业:

1.阅读几个学习网址的介绍和入门部分。
2.搭建开发环境,webpack及browserify引入方式感兴趣可以尝试。要求能够成功输入hello world!
           

继续阅读