React is an engine for building composable user interfaces using JavaScript and (optionally)
- 组件
- JSX
- Vitual DOM
XML.
一、 JSX
1. JSX 不是必须的
JSX 编译器把类似 HTML 的写法转换成原生的 JavaScript 方法，并且会将传入的属性转化为对应的对象。它类似与一种语法糖，把标签类型的写法转换成 React 提供的一个用来创建 ReactElement 的方法。
const MyComponent;
// input JSX，在 JS 中直接写成类似 HTML 的内容，其实它返回的是一个 ReactElement
let app = <h1 title="my title">this is my title </h1>;
// JSX 转换后的结果
let app = React.createElement("h1", {title: "my title"}, "this is my title");
2. HTML 标签与 React 组件
React 可以直接渲染 HTML 类型的标签，也可以渲染 React 组件。
JSX 语法使用第一个字母大小写来区分是一个普通的 HTML 标签还是一个 React 组件。
HTML 类型的标签第一个字母用小写来表示
import React from "react";
// 当一个标签里面为空的时候，可以直接使用自闭和标签。
// class 是 JavaScript 保留关键字，所以如果要写 class 应该替换成 className
let divElement = <div className = "foo"/>;
// 等同于
let divElement = React.createElement("div", {className: "foo"});
React 组件标签第一个字母用大写来表示
import React from "react";
class Headline extends React.Component {
...
render() {
// 直接 return JSX 语法
return <h1>Hello React</h1>
}
}
let headline = <Headline />;
// 等同于
let headline = React.createElement(Headline);
3. JavaScript 表达式
在给组件传入属性的时候，有一大部分的情况是要传入一个 JavaScript 对象的，规则是当遇到{}这个表达式，就把里面的代码当作 JavaScript 代码处理。
属性表达式：
const MyComponent;
let isLoggedIn = true;
let app = <MyComponent name = {isLoggedIn ? "viking" : "please login" } />
子组件表达式：
const MyComponent, LoginForm, Nav;
let isLoggedIn = true;
let app = <MyComponent>{isLoggedIn ? <Nav /> : <LoginForm />}</MyComponent>
布尔类型属性如下：
当省略一个属性的值的时候，JSX 会自动把它的值认为是 true;
let myBuntton = <input type="button" disabled />;
// 等同于
let myButton = <input type="button" disabled="true" />;
4. 注释
在 JSX 中使用注释，沿用 JavaScript 的方法，**需要注意的是，在子组件位置需要用{}括起来。
let component = (
<div>
{/* 这是一个注释 */}
<Headline />
</div>
);
5. JSX 展开属性
一个组件有很多属性
const Profile;
let name = "viking", age = 10, gender = "male";
let component = <Profile name = {name} age = {age} gender = {gender} />
属性过多时不好管理，这是可以使用展开属性
const Profile;
let props = {
name : "viking",
age : 10,
gender : "male"
};
let component = <Profile {...props} />
// 也可以混合使用
let component = <Profile {...props} name="viking2" />
console.log(component.props.name);
// viking2 --后面的属性会覆盖前面的属性
