React 学习React是一个用户构建用户界面的 JavaScript 库。-----中文手册：当开启多个 reac

React是一个用户构建用户界面的 JavaScript 库。-----中文手册：

react.docschina.org/

react.js 使用

- React.js 提供React.js 核心功能代码，如： 虚拟dom，组件 React.createElement(type,props,children);
- ReactDOM 提供了与浏览器交互的 DOM功能，如：dom 渲染
    - ReactDOM.render(Vnode,container[,callback])
        - Vnode: 要渲染的内容
        - conainer: 要渲染内容的存放容器
        - callback：渲染后的回调函数

JSX

JSX 是一个基于JavaScript + XML的扩展语法
  - 它可以作为值使用
  - 它并不是字符串
  - 它也不是HTML
  - 它可以配合JavaScript 表达式一起使用

插值表达式

在JSX中使用 {表达式} 嵌入表达式
表达式：产生值的一组代码的集合，比如：
  - 变量
  - 算数运算
  - 函数调用
  ...

注意：分清楚表达式与语句的区别 if、for、while 这些都是语句，JSX不支持语句

各种类型内容在插值中的使用

- 注释
	{/*单行注释*/}
    {/* 
    	多行注释
     */}

输出的数据类型

- 字符串、数字： 原样输出
- 布尔值、空、未定义 会被忽略

列表渲染

- 数组 
	- 数组在渲染时，必须有 key 值
- 对象 
	- 对象数组在使用时不能直接渲染，可以使用
    		- Object.key(obj).map((item,index) => {obj[item] -对象中每个值})

在属性上使用表达式

JSX 中的表达式也可以使用在属性上，但是使用的时候需要注意：
- 当在属性中使用 {} 的时候，不要使用引号包含

JSX 使用注意事项

- 必须有，且只有一个顶层的包含元素 - React.Fragment 即 <Fragment></Fragment>
- JSX 不是HTML，有很多属性在编写时不一样
	- className 
    		- className === class
  	- style 
    		- style={{ color:red;font-size:12px;}}
    	- 列表在渲染时，必须要有 key 值
        - 在 JSX 的所有标签必须 闭合
        - 组件的首字母一定要大写，标签一定要小写

XSS 为了有效的防止 XSS 注入攻击，React DOM 会在渲染的时候把内容（字符串）进行转义，所以字符串形式的标签是不会作为 HTML 标签进行处理的

安装与使用

可以通过 npm、yarn、npx ；

安装

npm

npm i -g create-react-app

yarn

yarn global add create-react-app

使用

安装完成之后，即可使用 create-react-app 命令

create-react-app <项目名称>

命令脚本

启动项目

启动一个内置的本地WebServer ，根目录映射到 “./public” 目录，默认端口：3000 当开启多个 react项目时，控制台会提示是否打开新的窗口来运行项目。

npm start / yarn start

运行Jest测试

npm run test

打包

npm run build

React 学习