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