React之你的第一个React程序
张培跃
ID：laozhangsishu
不止于前端
关注
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节点。