React之你的第一個(gè)React程序
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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script>
<!--Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。-->
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
100積分直接送
付費(fèi)專(zhuān)欄免費(fèi)學(xué)
大額優(yōu)惠券免費(fèi)領(lǐng)