React学习（一）：简单介绍入门

序言：React官网介绍很多内容，但仍想总结一下加深了解。

一、React介绍

React 起源于 Facebook 的内部项目，于 2013 年 5 月开源。
React 是一个用于构建用户界面的 JavaScript库。
React 主要用于构建UI，具备较高的性能，很多人认为React 是 MVC 中的 V（视图）。

二、React特点

1、声明式
React 是面向数据编程，不需要直接去控制dom，你只要把数据操作好，react会帮你操作dom更新界面，可以节省很多操作dom的代码。
2、组件化
React 可构建可复用的组件，然后像插入普通 HTML 标签一样，在网页中插入这个组件。我们通过继承react的Component去创建一个组件。
3、JSX语法
JSX 是 JavaScript 语法的扩展。建议在 React 中配合使用 JSX。
4、单向响应的数据流
React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

三、引入React 库

实例中我们引入了三个库： react.development.js 、react-dom.development.js 和 browser.min.js：
react.development.js - - React 的核心库
react-dom.development.js - - 提供与 DOM 相关的功能
browser.min.js - - 将 JSX 语法转为 JavaScript 语法

<!-- 加载 React -->
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- browser支持多语言，将 JSX 语法转为JavaScript语法 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

四、第一个react项目

除了上述加载React组件外，先整一个容器

<div id='root'></div>

script标签默认type="text/javascrip"来引入js语法。这里需要使用React 的 JSX 语法，所以必须要加上type=“text/babel”

<!-- babel支持多语言--->
<script type="text/babel" src="js/helloReact.js"></script>

新增helloReact.js文件，ReactDOM.render() 接受两个参数，第一个为 React 组件，第二个为组件插入的容器

ReactDOM.render(
  <h1>Hello, React</h1>,
  document.getElementById('root')
);

效果图如下：
在这里插入图片描述
下文会介绍常规React安装以及环境配置。请大家多多指教，能get到知识点不要忘了关注点个赞~。