React Components

Component là gì ?

Những framework và lib hiện nay đều theo xu thế viết component, vậy component là gì?
Đơn giản component là một class hoặc một function viết bằng javascript, nó có thể (hoặc không) nhận input, và trả về một element. Trong trường hợp React, component sẽ trả về một React Element, với input giống nhau thì output luôn giống nhau. Bên trong component là một hộp đen (black box).

Thử viết một component 😎

Component không nhận input:

const Hello = () => <div>Hello world !!!</div>

Component nhận input:

const Hello = (name) => <div>Hello {name} !!!</div>

Hai ví dụ trên là function component, vì hiện nay xu hướng của react là hook, nên blog sẽ viết toàn bộ ví dụ dưới dạng function component.

Có bao nhiêu loại component 🤔 ?

Về mặt vật lý (cách viết) thì có thể chia ra làm 2 loại Class Component (CC) và functional Component (FC). Khi chưa có react hook thì 2 loại component có một khác biệt cơ bản là FC không có state (stateless) còn CC thì có state (stateful). Nhưng hiện nay react hook cũng đã cung cấp state cho FC nên có thể coi là không còn khác biệt giữa FC và CC.

Do đó, ta có thể phân chia component theo cách sử dụng:

  • stateless component: component không chứa logic bên trong nó, là mức cơ bản nhất của component. Chủ yếu là dùng để hiển thị lên UI (như ví dụ ở trên)
  • stateful (smart) component: bên trong component này sẽ có đầy đủ state và lifecycle để thực hiện logic riêng của nó. Thường được dùng làm các container, chứa các component nhỏ hơn ở bên trong.

(còn tiếp … 😅)

React và Heroku

Đầu tiên khởi tạo website bằng react

npx create-react-app hello-world

Sau khi tạo xong thì vào chạy thử web trên localhost

cd hello-world
yarn start

Browser tự động mở ra http://localhost:3000/ với logo của react là thành công bước đầu. Bây giờ mình sẽ host website này lên heroku.

Login vào heroku (yêu cầu phải cài đặt trước heroku-cli):

heroku login

Tạo heroku app

heroku create

Sau khi tạo thành công app, bạn có thể chạy thử lại ở localhost. Chạy thành công thì bạn sẽ có thể mở http://localhost:5000/ để xem lại.

heroku local web

Như vậy là mọi chuyện ở local đã xong, mình sẽ public nó lên internet.

Install thêm serve để chạy server

yarn add serve

Sửa lại lệnh start trên package.json

...
"scripts": {
  "start": "serve -s build",
  "build": "node scripts/build.js",
  "test": "node scripts/test.js"
}
...

Đầu tiên, mình tạo bản build production:

yarn build

commit thay đổi

git add .
git commit -m "commit message"

push lên master của heroku.

git push heroku master

Bây giờ bạn có thể mở website của mình ra để xem thành quả:

heroku open

Ví dụ trên sẽ ra kết quả như thế này: https://secure-springs-54670.herokuapp.com/