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函数