React这么一个设计思想极为独特的框架究竟来自于何处?它来自于Facebook一个内部项目!而Facebook一个如此伟大的公司为何花费精力来写这样一套框架呢?因为该公司对市场上所有JavaScript框架都不满意!牛逼的人自有自逼之处,于是乎该公司就决定自已写一套名字叫React的框架。并于2013年5月开源了!
在学习React之前,你需要具备一些最基本的知识:
1、HTML5
2、css
3、JavaScript
React的特点
1、声明式设计
2、高效:通过对DOM的模拟,最大限度的减少与DOM的交互。
3、灵活:可以与已知的框架或库很好的配合。
4、JSX:是js语法的扩展,不一定使用,但建议用。
5、组件:构建组件,使代码更容易得到复用,能够很好地应用在大项目的开发中。
6、单向响应的数据流:React实现了单向响应的数据流,从而减少了重复代码,这也是解释了它为什么比传统数据绑定更简单。
为什么要用React?
1、使用组件化开发方式,符合现代Web开发的趋势
2 、技术成熟,社区完善,配件齐全,适用于大型Web项目(生态系统健全)
3、 由Facebook专门的团队维护,技术支持可靠
4、 ReactNative - Learn once, write anywhere: Build mobile apps with React
5 、使用方式简单,性能非常高,支持服务端渲染
6、 React非常火,从技术角度,可以满足好奇心,提高技术水平;从职业角度,有利于求职和晋升,有利于参与潜力大的项目
搭建React开发所需要的环境
1、首先我们去React官网https://reactjs.org/下载开发所需要的文件。点击官网头部右侧最新的版本号。可以进入下载页面:https://github.com/facebook/react/releases
2、初学React的小伙伴们,咱们需要下载两个JS文件。分别是react.development.js与react-dom.development.js。
react.development.js:React的核心库,用于创建UI
react-dom.development.js:提供与DOM相关的功能。用于将创建的UI渲染到浏览器中。
一起写一个"你好,世界"
咱们先来写第一个React程序。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script> <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script> <!--Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。--> <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script></head><body> <div id="wrap"></div></body><script type="text/babel"> ReactDOM.render( <h1>你好,世界</h1>, document.querySelector("#wrap") )</script></html>
ReactDOM.render()
ReactDOM.render是React最最基本的方法,用于将模板转为HTML语言,并插入指定的DOM节点。其中第一个参数为模板内容,第二个参数为指定的DOM节点。
作者:张培跃
链接:https://www.jianshu.com/p/42792e302323