Hướng dẫn ReactJS ReactJS tutorial (p3) Bài 3: ReactJS Tìm hiểu các Components trong React

Bài 3: ReactJS - Tìm hiểu các
Components trong React
Trong bài này chúng ta sẽ tìm hiểu về các components trong React và cách quản lý
chúng.

STATELESS EXAMPLE
Chúng ta tiếp tục sử dụng lại App.js, thêm vào 2 components đó là Header và Content,
App sẽ chứa 2 component mới thêm vào, sau đó ta export thằng App.

App.js
import React from 'react';

class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>

Header

</div>
);

}
}
class Content extends React.Component {
render() {
return (
<div>

Content

The content text!!!

</div>
);
}
}
export default App;

Để render App chúng ta cần import nó vào index.js và gọi hàm reactDom.render() như
đã làm ở bài 1: Enviroment Setup
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

Và kết quả ta được:


STATEFULL EXAMPLE
Trong ví dụ này chúng ta sẽ thêm state vào trong App component, state sẽ là 1 mảng
object, chúng ta thay content thành TableRow component, TableRow sẽ nhận các giá trị
state của component cha là App. (Chúng ta sẽ tìm hiểu kĩ hơn về state và props ở các
bài sau)

App.js
import React from 'react';

class App extends React.Component {
constructor() {
super();
this.state = {
data:
[
{
"id":1,
"name":"Foo",
"age":"20"
},
{
"id":2,


"name":"Bar",
"age":"30"
},
{
"id":3,
"name":"Baz",
"age":"40"
}
]
}
}

render() {
return (
<div>
<Header/>
<table>
<tbody>
{this.state.data.map((person, i) => data = {person} />)}
</tbody>
</table>
</div>
);
}
}
class Header extends React.Component {
render() {


return (
<div>

Header

</div>
);
}
}
class TableRow extends React.Component {
render() {
return (
<tr>
<td>{this.props.data.id}</td>

<td>{this.props.data.name}</td>
<td>{this.props.data.age}</td>
</tr>
);
}
}
export default App;

Hàm map giống như for-loop js, nếu viết bằng for thì sẽ như giầy:
for (let i = 0; i < this.state.data.length; i++) {
data = {this.state.data[i]} />
}
key={i} giúp React update lại element 1 cách chính xác với key đó thay vì render lại
toàn bộ list, khi ta thay đổi 1 thành phần nào đó trong state, việc này rất hiệu quả nếu
chúng ta có viết các ứng dụng lớn nhiều elements sau này.
Index.js ta giữ nguyên code,
import React from 'react';


import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Kết thúc bài 3 ở đây, các bạn xem lại r thực hành nha.