Component Trong Reactjs | Lê Vũ Nguyên Dạy Học Lập Trình
Có thể bạn quan tâm
- Giới thiệu nội dung bài viết
- 1. Stateless là gì
- 2. Stateful là gì
- 3. Video Demo
Giới thiệu nội dung bài viết
Chào các em, hôm nay anh sẽ hướng dẫn mọi người cách sử dụng Component trong reactjs. Chúng ta sẽ học cách tạo ra các component cho các thành phần của một website, nó giúp chúng ta dể dàng bảo trì, mở rộng hoặc thay đổi giao diện mà không ảnh hưởng đến các thành phần khác của website.
Khi nói về component thì các em cứ tưởng như như 1 chiếc xe hơi. Để tạo thành 1 chiếc xe hơi thì gồm có nhiều thành phần (component) kết hợp lại với nhau như khung xe, bánh xe, động cơ. Một component có thể chức các component khác, anh ví dụ như bánh xe thì được tạo thành từ nhiều component (các thành phần) như khung bánh xe, lốp xe.
Tương tư như vậy ta có thể hình dung trong một trang web có nhiều component (thành phần) kết hợp với nhau tạo thành trang web, như phần header, phần thân (body), phần footter. Trong mỗi phần header có thể chức các thành phần khác như ảnh, button, slider là những thành phần con tạo nên header.
1. Stateless là gì
Trong ví dụ sau đây chúng ta tạo ra một component chứa Header và Content. Chúng ta sẽ tạo Header và Content là những component sau đó nhúng vào component cha (App component).
Để tạo component ta sử dụng extends React.Component như sau
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | import React from 'react'; class App extends React.Component { render() { return ( <div> <Header/> <Content/> </div> ); } } class Header extends React.Component { render() { return ( <div> <h1>Header</h1> </div> ); } } class Content extends React.Component { render() { return ( <div> <h2>Content</h2> <p>The content text!!!</p> </div> ); } } export default App; |
-
Như vậy ta thấy trong phần render của component cha App. Ta nhúng 2 component con là <Header/> và vào.
-
Hàm render() có nhiệm vụ vẽ các component ra màn hình.
Để có thể hiển thị được các component thì trong hàm main.js ta gọi hàm reactDom.render() như sau
1 2 3 4 5 | import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App />, document.getElementById('app')); |
2. Stateful là gì
Trong ví dự stateless chúng ta không khởi tạo hoặc thêm giá trị cho các component. Trong ví dụ dưới đây chúng ta khởi tạo dữ liệu và gán giá trị cho các component. Ví dụ sau anh sẽ render dữ liệu cho một table.
Đầu tiên anh sẽ khởi tạo một mảng dữ liệu json và chứa trong biến state như sau.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 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) => <TableRow key = {i} data = {person} />)} </tbody> </table> </div> ); } } class Header extends React.Component { render() { return ( <div> <h1>Header</h1> </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; |
Các em chú ý trong component TableRow anh sử dụng phương thức this.pros để lấy giá trị từ component cha truyền xuống cho component con để nó render giá trị thông qua đoạn code
1 | <TableRow key = {i} data = {person} /> |
Để chạy được chương trình và render kết quả thì trong file main.js anh chạy như sau
1 2 3 4 5 | import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App/>, document.getElementById('app')); |
3. Video Demo
![](http://i3.ytimg.com/vi/jrbTsvLgjSk/maxresdefault.jpg)
Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm
Các khoá học lập trình MIỄN PHÍ tại đây
Từ khóa » Cách Chia Component Trong Reactjs
-
Cách Phân Chia Folder Và đặt Tên Components Cho Một App React
-
ReactJS: Chia Component Thế Nào Cho Hiệu Quả? (2020) - YouTube
-
Tư Duy Trong React
-
ReactJS: Cách Tạo Component Tùy Chỉnh Trong React | V1Study
-
ReactJS: Chia Component Thế Nào Cho Hiệu Quả? (2020)
-
ReactJS Cơ Bản Qua Ví Dụ Thực Tế - B3 Phân Chia Component
-
Component Trong React Và Cách Quản Lý Chúng | TopDev
-
Hướng Dẫn Chia Component Thế Nào Cho Hiệu Quả Trong React JS
-
Components Trong ReactJS - Freetuts
-
Component Trong ReactJS - Khám Phá Thành Phần Trong ReactJS
-
React.js Project Component - Học Web Chuẩn
-
Cách Chia Cấu Trúc ReactJS Như Thế Nào? - NVKSolution
-
Component Trong React - Thầy Long Web
-
ReactJS: Giới Thiệu Về Components Và Props Trong React - Tino Group