react Hello wrold到JSX语法规范(第二节)

Hello World

直接在页面上使用React，引用下面的JS

<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 src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

React.createElement

创建一个React元素，称作虚拟DOM，本质上是一个对象

1. 参数1：元素类型，如果是字符串，一个普通的HTML元素
2. 参数2：元素的属性，一个对象
3. 后续参数：元素的子节点

JSX

JS的扩展语法，需要使用babel进行转义。

使用脚手架搭建工程

官方：create-react-app
第三方：next.js、umijs

凡是使用JSX的文件，必须导入React

开发环境搭建

VSCode配置

emmet配置：

"javascript": "javascriptreact"

VSCode插件安装

• ESLint：代码风格检查
• ES7 React/Redux/GraphQL/React-Native snippets：快速代码编写

Chrome插件安装

React Developer Tools

JSX

什么是JSX

• Facebook起草的JS扩展语法
• 本质是一个JS对象，会被babel编译，最终会被转换为React.createElement
• 每个JSX表达式，有且仅有一个根节点
  • React.Fragment
• 每个JSX元素必须结束（XML规范）

在JSX中嵌入表达式

• 在JSX中使用注释
• 将表达式作为内容的一部分
  • null、undefined、false不会显示
  • 普通对象，不可以作为子元素
  • 可以放置React元素对象
• 将表达式作为元素属性
• 属性使用小驼峰命名法
• 防止注入攻击
  • 自动编码
  • dangerouslySetInnerHTML

元素的不可变性

• 虽然JSX元素是一个对象，但是该对象中的所有属性不可更改
• 如果确实需要更改元素的属性，需要重新创建JSX元素