CDN引用
//开发环境 16是版本号
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
//生产环境
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
React和ReactDom
React只用来生成虚拟Dom，ReactDom用来将虚拟Dom转换成真实Dom元素。
//三个参数：
// type -- 类型（组件名|标签名）
// props -- 属性值 （null||{}）
// children -- 子节点，包括文本节点(多选参数)
const el = React.createElement("div", { id: "test" }, "hello world");
const root = document.querySelector("#root");
//三个参数：
// vDOM -- 虚拟DOM
// container -- 挂载节点（容器，即要挂载到的节点）
// callback -- 回调函数(可选参数)
ReactDOM.render(el, root, function() {
console.log("成功！");
});
JSX
定义
JSX是Javascript+xml，不是字符串，也不是html！！！ React提供的一个语法糖，为javascript添加xml扩展
jsx的简单使用
需要引入babel.js
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
同时设置type为"text/babel"
<script src="youjs.js" type="text/babel"></script>
const header = <h1>hello，world</h1>
ReactDOM.render(
header,
document.querySelector("#root"),
()=>{
console.log("构建完成")
}
);
JSX中的插值表达式
const name = "xiaoming"
const element = <h1>hello,{name}</h1>
{name}即为插值表达式，jsx用花括号来解析js表达式，括号里只能是表达式，不能是语句！！！
表达式直白来说是会有返回值的代码，如变量、运算符、函数调用，而语句如if、while等不会产生返回值。
表达式的返回值必须是ReactElement
-
React构建的虚拟DOM(狭义上的ReactElement)
-
string|number
-
boolean|null|undefined|Symbol
-
数组->最常用的列表方法map
-
注释->{/* something */}
-
函数
不同数据类型在插值的表现
- 基础类型
- string、number返回原始值
- undefined、null、boolean、Symbol输出是会被忽略
- 复杂类型
- Array，去掉逗号后直接输出,如{[1,2,3,4]}输出的是 1234
- Object,如果是ReactElement返回，如果是普通对象（包括函数）不能作为内容输出
注意事项
- jsx中class需要写为className,style值接收一个对象
- jsx大小写敏感,标签名小写，组件名首字母大写
- jsx的所有标签都需要闭合
- jsx必须有一个顶层，且只有一个顶层父级
- jsx列表输出时必须添加key值
其他
- React17之后，如果模块中只用到了JSX,没有使用React其他方法则组件不再需要引入React
- <Fragment></Fragment>在React17之后可简写为<></>
create-react-app
使用
//下载
npm i -g create-react-app
//创建项目
npx create-react-app myapp
组件
具有一定独立功能的数据与方法的封装，对外暴露接口，有利于代码的复用，且不用担心冲突问题。
类式组件
- 组件类必须继承 React.Component
- 组件类必须有 render 方法
函数式组件
- 函数的名称就是组件的名称
- 函数的返回值就是组件要渲染的内容
props和state
state 的主要作用是用于组件保存、控制、修改自己的可变状态，在组件内部进行初始化，也可以在组件内部进行修改，但是组件外部不能修改组件的 state
props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件，它是外部传进来的配置参数，组件内部无法控制也无法修改
state 和 props 都可以决定组件的外观和显示状态。通常，props 做为不变数据或者初始化数据传递给组件，可变状态使用 state
事件
默认情况下，事件处理函数的this值时undefined！！！
解决方案：箭头函数 或 bind
插件
vscode-styled-jsx: jsx语法高亮
ES7 React/Redux/GraphQL/React-Native snippets：提供各种简写
