13. react 基礎 redux 的基本介紹 及 用 antd 編寫 TodoList 的樣式

1. redux 簡述

 

 

當 store 內的 數據進行變動的時候  多個組件感知到 store 內的數據變化 將會被自動更新 

 

2. redux 工做流

 

 

 

Store 　　　　　　 表明數據存儲　　(例如: 圖書館管理員)

React Components 表明 react 組件 (例如: 借閱的人)

Action Creators 　  表明 react 組件所觸發的時間 ( 例如: 借閱的人像圖書館借的什麼書 )

Reducers　　　　　表明 react 各個組件的狀態 (例如:圖書館管理員記錄借了什麼書)

 

3. 使用 antd 編寫 TodoList 頁面佈局

　　1. 建立一個新的 react app

　　　　npx create-react-app my-app

　　　　cd my-app

　　　　npm start

　　2. 打開 antd 官網  

　　　　安裝 antd

　　　　　　yarn add antd

　　　　引入 antd 的樣式

　　　　　　import 'antd/dist/antd.css';

　　3. 使用 antd 的 input , List, Button 框 參考官方文檔  antd 官網

# eg :  TodoList.js

import React, { Component } from 'react';

import { Input , Button, List} from 'antd';

import 'antd/dist/antd.css';

 

const data = [

'Racing car sprays burning fuel into crowd.',

'Japanese princess to wed commoner.',

'Australian walks 100km after outback crash.',

'Man charged over missing wedding girl.',

'Los Angeles battles huge wildfires.',

];

class TodoList extends Component

{

constructor(props){

super(props);

this.state = {

inputValue: '',

list:[]

}

}

render() {

return (

<div style={{paddingTop: '10px', paddingLeft: '10px'}}>

<div>

<Input placeholder="default size" style={{marginRight: '10px', width: "300px" }} />

<Button type="primary">提交</Button>

</div>

<div>

<List

style={{ width: '300px', marginTop : '10px'}}

bordered

dataSource={data}

renderItem={item => <List.Item>{item}</List.Item>}

/>

</div>

</div>

)

};

}

export default TodoList;

 

效果圖