Things I learned In this project
ESLint là một công cụ để xác định và báo cáo về các bugs được tìm thấy trong mã ECMAScript / JavaScript, với mục tiêu là strict code style rules, nhằm hạn chế bugs, looks prettier
Codebase - Linter
npm i -D eslint eslint-config-airbnb-base eslint-plugin-import
Create .eslintrc.js: module.exports = { "extends": "airbnb-base" };
In VS Code, Ctrl + Shift + X
Search ESLint
Install ESLint
Restart VS Code
😶 😮
Config ở trên xài style AirBNB, các bạn có thể tham khảo trong cli những style khác, hoặc tự custom style, với sự ra mắt ES2020 thì 1 số nơi trong porject cũng nên tắt ESLint
next.config.js là 1 file khá quan trọng của project, chủ yếu để customize với các plugin của zeit, có thể tới thời điểm bạn đọc cái này thì 1 số cái đã bị deprecated(hãy update nó). Trong project này mình config next.config.js như 1 .env để setup môi trường cho toàn project 1 cách thống nhất nhất có thể
Codebase - Config - .env
Tạo file next.config.js
😶 😮 😯
Tận dụng thiết kế project Monorepo và lợi dựng env:[] trong file này, tìm hiểu thêm các boilerplate nextJS config như thế nào trong file này
Các global variables cho dự án, sử dụng {ThemeProvider} của styled component, Thiết kế Global Style, Các Global Style trong styled Component như này sẽ không bị hashed, có thể override về sau bằng component-level styling
Codebase - Consts - Global Style
yarn add styled-components @styled-system/theme-get
😶 😮
Việc strict các variables, comment cẩn thận giúp cho Project là 1 thể thống nhất rất quan trọng, giúp chúng ta dễ quản lý project, bên cạnh đó thì tạo global style với styled-components bằng createGlobalStyle
PropTypes là 1 core module của React, nó giúp cho việc manipulate props dễ dàng, strict, HOC, best usage có thể nói là validators, giúp trả về đúng data, đúng mục đích, có thể là bool, string, 1 mảng oneOf, trả về đúng string gắn vô className và render đúng element className tương ứng, về mặt perfomance thì nên sử dụng trong môi trường development
Techinique - Props - Data manipulating
yarn add prop-types
- Trong Functional Programming, ta có thể declare props bằng cách sau
- Toàn bộ đều .PropTypes
- 1 số cách sử dụng
- Advance Inline Style
- Đổi className base on headerType
- Validate và trả đúng data
- Advance Inline Style
😶 😮 😯 😦
Phản quản lý props chặt chẽ, có workflow đúng, strict các conditional, trả đúng data và type, nên tận dụng tối đa propTypes cho việc trả đúng className validator bằng oneOf, xài tốt với styled-component
Loader cho trang web hay bất cứ đâu
UI - Design - Snippet
Kiếm spinner loader của bạn
- Loader Setup
- Example usage
😶 😮
Tham khảo getStaticPageProps hoặc getInitialpPageProps để làm loader load trang