React 是什么?
一个用于构建用户界面的 JavaScript 库
中文手册:https://react.docschina.org/
命令式编程 和 声明式编程
- 告诉计算机怎么做(How) - 过程
- 告诉计算机我们要什么(What) - 结果
如何使用 React
基于浏览器的模式
- React.js 提供 React.js 核心功能代码,如:虚拟 dom,组件
- React.createElement(type,props,children);
- ReactDOM 提供了与浏览器交互的 DOM 功能,如:dom 渲染
- ReactDOM.render(element, container[, callback])
- element:要渲染的内容
- container:要渲染的内容存放容器
- callback:渲染后的回调函数
- ReactDOM.render(element, container[, callback])
babel
babel-standalone.js:在浏览器中处理 JSX
https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js
JSX
JSX 是一个基于 JavaScript + XML 的一个扩展语法
- 它可以作为值使用
- 它并不是字符串
- 它也不是HTML
- 它可以配合JavaScript 表达式一起使用
插值表达式
在 JXS 中可以使用 {表达式} 嵌入表达式
表达式:产生值的一组代码的集合
- 变量
- 算术运算
- 函数调用
- ……
注意:分清楚 表达式 与 语句 的区别,if、for、while 这些都是语句,JSX 不支持语句
各种类型内容在插值中的使用
- 注释
{/注释/}
{/*
多行注释
*/}
输出数据类型
- 字符串、数字:原样输出
- 布尔值、空、未定义 会被忽略
列表渲染
- 数组
- 对象
扩展:虚拟 DOM (virtualDOM) 和 diff
条件渲染
- 三元运算符
- 与或运算符
在属性上使用 表达式
JSX 中的表达式也可以使用在属性上,但是使用的时候需要注意
- 当在属性中使用 {} 的时候,不要使用引号包含
JSX 使用注意事项
- 必须有,且只有一个顶层的包含元素 - React.Fragment
- JSX 不是html,很多属性在编写时不一样
- className
- style
- 列表渲染时,必须有 key 值
- 在 jsx 所有标签必须闭合
- 组件的首字母一定大写,标签一定要小写
XSS
为了有效的防止 XSS 注入攻击,React DOM 会在渲染的时候把内容(字符串)进行转义,所以字符串形式的标签是不会作为 HTML 标签进行处理的
基于自动化的集成环境模式 - create-react-app - 脚手架
介绍
通过前面 script 的方式虽然也能完成 React.js 的开发,但是有一个现在前端很重要的特性 - 模块化,无法使用。
Create React App 是一个使用 Node.js 编写的命令行工具,通过它可以帮助我们快速生成 React.js 项目,并内置了 Bab