搭建程序

• 安裝官方腳手架:$ npm install -g create-react-app

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

快速創(chuàng)建React單頁面應(yīng)用

1 第一個應(yīng)用HelloWorld

// index.js
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello, world!<h1/>,
    document.getElementById('root')
);

id為root的div <div id="root"></div>
調(diào)用ReactDOM.render()將React元素渲染進(jìn)root的DOM節(jié)點中

2 自定義組件

import React from 'react';
class MyApp extends React.Component {
    render() {
        return (
            <div>
                請輸入你的郵箱：<input/>
            </div>
        );
    }
};
export  default MyApp;

// index.js
import MyApp from './MyComponents/MyApp.js';
ReactDOM.render(
    <MyApp/>,
    document.getElementById('root')
);

在這個組件代碼底部添加export default MyApp;拋出去
使用時引入這個組件import MyApp from './MyComponents/MyApp.js';

3 JSX語法

HTML語言直接寫在 JavaScript 語言之中，不加任何引號

• JSX的基本語法規(guī)則：
  • 遇到 HTML標(biāo)簽（以 < 開頭），就用 HTML 規(guī)則解析；
  • 遇到代碼塊（以 { 開頭），就用 JavaScript 規(guī)則解析

var arr = [
    <h2>Alice</h2>,
    <h2>Michel</h2>,
    <h2>jack</h2>,
];

ReactDOM.render(
    <div>{ arr }</div>,
    document.getElementById('root')
);

直接{ arrName }插入JavaScript 變量。如果是數(shù)組，直接展開展開

4 this.props

class Hello extends React.Component {
    render() {
        return <h1>你好啊 {this.props.name}</h1>
    };
}
ReactDOM.render(
    <Hello name='junchen'/>,
    document.getElementById('root')
)

• React.createClass在最新版已經(jīng)取消
• 所有組件都必須有自己的 render() {###} 用于輸出
• 組件的第一個字母必須大寫，否則會報錯
• 組件只能包含一個頂層標(biāo)簽，否則也會報錯
  • return <h1>第一個</h1><p>第二個頂層類</p>
• 組件的屬性可以用this.props獲取
  • 組件 class屬性需要寫成 className
  • for 屬性要寫成 htmlFor，因為它們的保留字。

5 this.state

組件作為狀態(tài)機，狀態(tài)變化觸發(fā)渲染UI