React.

js project state

1. Nội dung
₋ Xử lý thay đổi dữ liệu trong component
₋ Ta sẽ sử dụng setState thay đổi dữ liệu của ItemList.
>> Sử dụng kết quả của bài trước

2. Tạo dự án React.js và cài đặt thư viện

2.1 Sử dụng project reactjs-component
C:\ WebAPIReactJS > cd reactjs-component

3. Lập trình ReactJS

3.1 /src/App.js
import React, { Component } from 'react';
import './App.css';
import Header from './components/Header';
import Headline from './components/Headline';
import ItemList from './components/ItemList';
import Aside from './components/Aside';
import BoxList from './components/BoxList';
import Footer from './components/Footer';

class App extends Component {

constructor(props){
super(props);
this.state = blog;
};

render() {
return (
<div id="layout">
<Header />

<main>
<section id="content">
<Headline bigTitle={this.state.bigTitle} />
<ItemList itemList={this.state.itemList} />
<button type="button" onClick={this.changeItem}>Change Data</button>
</section>

<Aside />

<BoxList boxList={this.state.boxList} />

</main>

<Footer />
</div>
);
};
 changeItem = () => {
this.setState({
itemList: [
{
title: 'Title changed',
info: 'Proin ex nunc, bibendum ut magna quis.'
},
{
title: 'Blandit mollis',
info: 'New information changed.'
},
{
title: 'Donec ut libero',
info: 'Donec ut libero pretium, efficitur nisl vel, sagittis elit.'
}
]
});
};
};

const blog = {
bigTitle: 'Consectetur elit proin sit amet neque.',
itemList: [
{
title: 'Proin ex nunc',
info: 'Proin ex nunc, bibendum ut magna quis.'
},
{
title: 'Blandit mollis',
info: 'Blandit mollis orci. Ut pretium diam ut tristique interdum amet
condimentum.'
},
{
title: 'Donec ut libero',
info: 'Donec ut libero pretium, efficitur nisl vel, sagittis elit.'
}
],
boxList: [
'Placerat arcu vel',
'Duis at est nunc',
'Tellus at trist',
'Ut rhoncus'
]
};

export default App;

▪ Giải thích
₋ this.state = blog : liên kết dữ liệu với state thông qua this.state.
₋ Ta có thể sử dụng this.state để gọi giá trị dữ liệu của blog.

4. Kết quả thực thi

▪ Khởi động ứng dụng:
▪ Xem kết quả: Mở trình duyệt, gõ: http://127.0.0.01:3000
▪ Giải thích
₋ ?
Kết quả
5. Tham khảo
[1] https://hocwebchuan.com/tutorial/reactjs/reactjs_project_state.php

----------------------------------------------------------