React之你的第一个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 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节点。