1. react-初体验

1. 创建第一个react单页程序

npx create-react-app my-app
cd my-app
npm start

2. 初始 JSX 语法

　　1. 先来一个实例：

import React from 'react';
import ReactDOM from 'react-dom';

const user = {
  firstName: "人猿",
  lastName: "泰山"
}

ReactDOM.render(
  <h1>{user.firstName} {user.lastName} </h1>,
  document.getElementById('root')
);

　　2. JSX 语法说明

　　　　1. js 和 html 混合到一起写

　　　　2. js 用 {} 包裹

　　　　3. 编译时，{} 中的内容会被解析成普通的 js 对象

　　3. JSX 属性

　　　　1. 字符串属性　　

const element = (<span id="myId">{user.firstName}</span>)

　　　　2. 变量作为属性

const element = (<span class={user.userClass}>{user.firstName}</span>)

　　

　　4. JSX 的编译： Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用　

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);


const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// 以上两段代码是完全等效的


// React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象, React 会根据这个对象来创建 DOM

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
}