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.子元素是数组