搭建程序
- 安裝官方腳手架:
$ npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
快速創建React單頁面應用
1 第一個應用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>
調用ReactDOM.render()將React元素渲染進root的DOM節點中
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的基本語法規則：
- 遇到 HTML標簽（以 < 開頭），就用 HTML 規則解析；
- 遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析
var arr = [
<h2>Alice</h2>,
<h2>Michel</h2>,
<h2>jack</h2>,
];
ReactDOM.render(
<div>{ arr }</div>,
document.getElementById('root')
);
直接{ arrName }插入JavaScript 變量。如果是數組，直接展開展開
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 - 所有組件都必須有自己的
render() {###}用于輸出 - 組件的第一個字母必須大寫，否則會報錯
- 組件只能包含一個頂層標簽，否則也會報錯
return <h1>第一個</h1><p>第二個頂層類</p>
- 組件的屬性可以用
this.props獲取- 組件
class屬性需要寫成className -
for屬性要寫成htmlFor，因為它們的保留字。
- 組件
5 this.state
組件作為狀態機，狀態變化觸發渲染UI
