React组件化开发

环境搭建：

1.安装node.js

2.安装cnpm

 # npm install -g cnpm --registry=https://registry.npm.taobao.org

3.全局安装create-react-app:

# cnpm install -g create-react-app

4.创建工作目录

# create-react-app  react-todo-list

5.启动（开发版本）服务：

# cd react-todo-list

# npm start　　

即可通过localhost:3000在浏览器下访问了。

开发环境入口文件index.js：

项目入口文件

问答：什么是组件化？

包含组件化封装和组件化复用两方面。

一.组件的封装：
react组件封装从页面结构上，包含三部分：
1.视图层V层 render
2.数据层state constructor
3.变化逻辑——事件（数据驱动视图）

二.组件的复用：
通过传入不同的属性props，达到复用的目的。

问答：JSX本质是什么？

JSX概念：这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。它被称为 JSX， 一种 JavaScript 的语法扩展。

JSX本质从三个方面讲：
1.jsx语法（标签，js表达式，判断，循环，事件绑定）
(1)注释：
{/* 注释内容 */}
(2)判断类型{}内可以是变量，|| 或 &&判断 ，三元表达式，map循环（跟return）等等。
(3)可是定义样式存入
(4)与HTML语法不同的地方
    class写成className
    tabindex写成tabIndex
    font-size改成fontSize
因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。

2.jsx本质是语法糖，最终会转化为js(React.createElement)才能运行。
    JSX语法无法被浏览器解析（vue中的v-for,v-if等也不行），JSX只是个js语法糖（更好用，更好理解），它在开发环境中编译时，被解析为js，所以页面才会引入React
    # import React from 'react'就是为解析jsx成js的

React.createElement的两种用法:

1.子元素是节点

2.子元素是数组

e.g 子元素是节点

e.g 子元素是数组(ul-li)

3.jsx已经形成了独立的标准。
    JSX是React引入的，但不是React独有的
    React已经将他作为独立标准开放，所以其他项目也可以用的。
    React.createElement()是可以自定义修改的（_h()）
    说明：本身功能已经完备；和其他标准兼容和扩展性没问题。

npm安装babel后即可查看react解析JSX的代码结构

JSX代码如下：

React下配置babel需要做三项项工作：

1.# cnpm  install --save-dev babel-plugin-transform-react-jsx

2. 根目录下创建 .babelrc文件

3. 执行 # babel --plugins  transform-react-jsx  文件名

执行babel

结果如下：

实例一：

实例二：

可以将jsx名称转换成h函数