ReactJS Cơ Bản Qua Ví Dụ Thực Tế - B3 Phân Chia Component

• Home
• About
• Sitemap
• Learn English

Home

• HTML
• CSS
• _Sass
• _Bootstrap
• Javascript
• jQuery
• _jQuery Plugin
• ReactJS
• Adobe Animate CC
• Sitemap

Home / react / ReactJS cơ bản qua ví dụ thực tế - B3 phân chia Component ReactJS cơ bản qua ví dụ thực tế - B3 phân chia Component March 08, 2018 react

Nội dung chính

• 1. Tạo Component Title
• 2. Tạo Component Search
• 3. Tạo Component Sort
• 4. Tạo Component Form
• 5. Tạo Component Item
• 6. Tạo Component Item Edit
• 7. Import Component vào App.js

Việc phân chia Component giúp project của chúng ta được tách ra làm các phần khác nhau, thuận tiện và dễ dàng chỉnh sửa nâng cấp, tránh xung đột... 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 file App.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: 5

Liên hệ

Mỗi người một quan điểm, mỗi người một cách code khác nhau. Đây chỉ là ý kiến mang tính cá nhân trong quá trình học tập, nghiên cứu, làm việc... Nếu có gì thiếu sót hoặc code bị lỗi rất mong nhận được những lời đánh giá và sửa sai từ các bạn. Hy vọng chúng ta cùng nhau phát triển trên con đường sự nghiệp lập trình. Các bạn có thể liên hệ với mình qua một trong những hình thức dưới đây:

• Website: https://kentrung256.blogspot.com
• Gmail: trungnt256@gmail.com

Share This: Facebook Twitter Google+ Pinterest Linkedin

You May Also Like

react

No comments:

Subscribe to: Post Comments ( Atom )

Bài Xem Nhiều

• Tạo hiệu ứng tuyết rơi chỉ bằng HTML - CSS
• Tạo hiệu ứng mở sách 3D bằng CSS
• ReactJS cơ bản qua ví dụ thực tế - B2 tạo project và copy giao diện HTML
• Mẹo nhanh: Lưu ý khi sử dụng phiên bản Slim của jQuery
• ReactJS cơ bản qua ví dụ thực tế - B3 phân chia Component

Tags

css (19) javascript (16) react (10) project javascript (9) jquery plugin (8) jquery (6) html (5) hướng dẫn (5) adobe animate (4) bootstrap (1) font icon (1) sass (1)

Sự khác nhau giữa những điều tưởng giống nhau

Bài viết tổng hợp những điều tưởng giống nhau nhưng thực ra khác nhau VL trong HTML - CSS - JAVASCRIPT. Bài viết được tổng hợp chủ yếu tại đ...

Tìm Bài Theo Tháng

• May 2021 (2)
• December 2020 (1)
• November 2019 (3)
• October 2019 (16)
• September 2019 (10)
• August 2019 (3)
• July 2019 (3)
• May 2019 (5)
• April 2019 (4)
• March 2019 (1)
• January 2019 (1)
• December 2018 (1)
• November 2018 (4)
• October 2018 (1)
• August 2018 (1)
• March 2018 (10)
• January 2018 (2)
• December 2017 (4)
• November 2017 (2)
• June 2017 (1)
• May 2017 (1)

Total Pageviews

Powered by Blogger.

Random Posts

randomposts

Tags

css (19) javascript (16) react (10) project javascript (9) jquery plugin (8) jquery (6) html (5) hướng dẫn (5) adobe animate (4) bootstrap (1) font icon (1) sass (1)

Recent Posts

recentposts Created By ThemeXpose