React学习笔记(一) —— 认识React，并编写第一个React实例

React

简介

React 是一个用于构建用户界面的 JavaScript库，主要用于构建UI。

特点

• 声明式设计 −React采用声明范式，可以轻松描述应用。
• 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
• 灵活 −React可以与已知的库或框架很好地配合。
• JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
• 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
• 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

jsx

JSX其实是JavaScript的扩展，React为了代码的可读性更方便地创建虚拟DOM等原因，加入了一些类似XML的语法的扩展。

第一个React实例

<div id="example"></div>
<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
</script>

这样我们就可以将<h1>Hello, world!</h1>渲染到DOM树中 id="example"的位置
1.ReactDOM.render()
ReactDOM.render是 React 的最基本方法用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
ReactDOM.render(template, targetDOM)方法接收两个参数：
第一个是创建的模板，多个 dom 元素外层需使用一个标签进行包裹，如< div >;
第二个参数是插入该模板的目标位置。

2.React.createElement()
React.createElement()： 根据指定的第一个参数创建一个React元素。

React.createElement(
  type,
  [props],
  [...children]
)

第一个参数是必填，传入的是似HTML标签名称，eg: ul, li；
第二个参数是选填，表示的是属性，eg: className；
第三个参数是选填, 子节点，eg: 要显示的文本内容。

3.text/babel
第二代编译器 —— babel，JSX代码并不能直接运行，需要将它编译成正常的JavaScript表达式才能运行,babel就是编译器这一角色。React JS和React Native已经全部采用第三方Babel的JSX编译器实现。
第一代编译器jsxTransformer已经过期不再维护。
在html文件中设置text/babel：

< script type="text/babel" >< /script  >