React学习-开篇

说明：本系列所有demo代码的github地址为：https://github.com/Brucewu998/react.js-learning，笔者会不断更新这些代码，本篇代码在目录下demo-01文件夹下。

介绍

1. React官网对自己最明显的介绍是：声明式、组件化和一次学习随处编程这三个标签，官网对其的解释是：
   1. 声明式：React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。以声明式编写 UI，可以让你的代码更加可靠，且方便调试。
   2. 组件化：创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。
   3. 一次学习，随处编写：无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。
2. 学习React需要清楚的是，一切皆组件，和Vue一样，可以将一个页面拆分成组件，然后抽象，可以组装成不同的页面；笔者之前一直用的是Vue，所以对于组件化的思想有一定的理解，所以当你对组件化思想有一定的理解后，对React组件化的概念也可以很快掌握。
3. 相对于Vue来说，React所用的模板语法并不是类似于Vue的那种HTML模板语法，而是一种称之为JSX的语法， JSX是一个JavaScript的语法扩展，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。那么react为什么要使用JSX语法呢？因为：React认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。我们不一定要使用JSX， 但其具备以下优点:
   1. JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
   2. 它是类型安全的，在编译过程中就能发现错误。
   3. 使用 JSX 编写模板更加简单快速。
   4. 代码示例：这里注意一般在JSX的语法中，原来的HTML的class类名属性应该换成className，因为class与ES6种的class关键字冲突，

const div = 
Hello, React.js!

安装

可以使用远程链接安装：

• 开发环境

•  生产环境：

亦可自己将文件下载下来保存在本地，然后引用即可。最后我们还需要一个将JSX语法编译为浏览器可执行的js代码的库：

开始编程：

demo1.html:

注意，由于使用了JSX语法， 所以必须将含有JSX代码的script标签的类型设置为：type="text/babel",让babel编译JSX, 否则就会运行出错。 ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。上面的示例是将一个

标签插入demo-1的节点下，运行结果如下：

下一篇：React学习之元素渲染