Nội dung chính
Tùy vào cách phân chia Component của mỗi người mà việc tách sẽ khác nhau, ở đây mình chỉ tách với một lớp Component và gọi nó vào trong
App.js
Để gom các Component vào một chỗ cho dễ quản lí, ta vào bên trong folder
src
vào tạo folder components
. Các Component tạo sau này sẽ đều để bên trong folder này.1. Tạo Component Title
Tạo ra 1 file mới tên làTitle.js
và code bên trong chỉ đơn giản là chứa tiêu đề của project.
import React, {Component} from 'react';
class Title extends Component {
render() {
return(
<div className="page-header">
<h1>Project 01 - ToDo List <small>ReactJS</small></h1>
</div>
)
}
}
export default Title;
2. Tạo Component Search
Tạo file mới tên làSearch.js
để chứa giao diện tìm kiếm của trang.
import React, {Component} from 'react';
class Search extends Component {
render() {
return(
<div className="input-group">
<input type="text" className="form-control" placeholder="Search item name" />
<span className="input-group-btn">
<button className="btn btn-info" type="button">Clear</button>
</span>
</div>
)
}
}
export default Search;
3. Tạo Component Sort
Tạo file mới tên làSort.js
để chứa giao diện sắp xếp của trang.
import React, {Component} from 'react';
class Sort extends Component {
render() {
return(
<div className="dropdown">
<button className="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Sort by <span className="caret" />
</button>
<ul className="dropdown-menu">
<li><a role="button">Name ASC</a></li>
<li><a role="button">Name DESC</a></li>
<li role="separator" className="divider" />
<li><a role="button">Level ASC</a></li>
<li><a role="button">Level DESC</a></li>
</ul>
<span className="label label-success label-medium">NAME - DESC</span>
</div>
)
}
}
export default Sort;
4. Tạo Component Form
Tạo file mới tên làForm.js
để chứa giao diện form thêm sản phẩm.
import React, {Component} from 'react';
class Form extends Component {
render() {
return(
<form className="form-inline">
<div className="form-group">
<input type="text" className="form-control" placeholder="Item Name" />
</div>
<div className="form-group">
<select className="form-control">
<option value={0}>Small</option>
<option value={1}>Medium</option>
<option value={2}>High</option>
</select>
</div>
<button type="button" className="btn btn-primary">Submit</button>
<button type="button" className="btn btn-default">Cancel</button>
</form>
)
}
}
export default Form;
5. Tạo Component Item
Tạo file mới tên làItem.js
để chứa giao diện một dòng sản phẩm.
import React, {Component} from 'react';
class Item extends Component {
render() {
return(
<tr>
<td className="text-center">1</td>
<td>Tìm thấy mảnh vỡ máy bay rơi ở Iran làm 66 người chết</td>
<td className="text-center"><span className="label label-danger">High</span></td>
<td>
<button type="button" className="btn btn-warning btn-sm">Edit</button>
<button type="button" className="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
)
}
}
export default Item;
6. Tạo Component Item Edit
Tạo file mới tên làItemEdit.js
để chứa giao diện khi sửa sản phẩm.
import React, {Component} from 'react';
class ItemEdit extends Component {
render() {
return(
<tr>
<td className="text-center">6</td>
<td><input type="text" className="form-control" defaultValue="F1 muốn tổ chức giải đua xe tại Việt Nam vào năm 2020" /></td>
<td className="text-center">
<select className="form-control">
<option>Small</option>
<option>Medium</option>
<option>High</option>
</select>
</td>
<td>
<button type="button" className="btn btn-default btn-sm">Cancel</button>
<button type="button" className="btn btn-success btn-sm">Save</button>
</td>
</tr>
)
}
}
export default ItemEdit;
7. Import Component vào App.js
Sau khi đã tách ra các Component riêng biệt, giờ ta chỉ việc import chúng vào lại fileApp.js
và gắn chúng vào vị trí tương ứng trong giao diện.Lưu ý là 2 Component
Item
và ItemEdit
chúng ta chưa import vào vì hiện tại chưa dùng đến.
import React, { Component } from 'react';
import Title from './components/Title';
import Search from './components/Search';
import Sort from './components/Sort';
import Form from './components/Form';
class App extends Component {
render() {
return (
<div className="container">
<Title />
<div className="row">
<div className="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<Search />
</div>
<div className="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<Sort />
</div>
<div className="col-xs-5 col-sm-5 col-md-5 col-lg-5">
<button type="button" className="btn btn-info btn-block marginB10">Add Item</button>
</div>
</div>
<div className="row marginB10">
<div className="col-md-offset-7 col-md-5">
<Form />
</div>
</div>
<div className="panel panel-success">
<div className="panel-heading">List Item</div>
<table className="table table-hover">
<thead>
<tr>
<th style={{ width: '10%' }} className="text-center">#</th>
<th>Name</th>
<th style={{ width: '15%' }} className="text-center">Level</th>
<th style={{ width: '15%' }}>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
);
}
}
export default App;
Nếu các bước tách Component và import thành công không có lỗi lầm gì, quay lại trang web sẽ có giao diện như này.
Danh sách bài học về ReactJS
- ReactJS B1 - Tạo giao diện HTML-CSS
- ReactJS B2 - Tạo project và copy giao diện
- ReactJS B3 - Phân chia Component
- ReactJS B4 - Tạo mockdata và render Item
- ReactJS B5 - Delete Item
- ReactJS B6 - Edit Item (P1)
- ReactJS B6 - Edit Item (P2)
- ReactJS B7 - Add Item
- ReactJS B8 - Sort Item
- ReactJS B9 - Search Item
ReactJS cơ bản qua ví dụ thực tế - B3 phân chia Component
Reviewed by kentrung
on
March 08, 2018
Rating:
No comments: