初识 React

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 --后面的属性会覆盖前面的属性