SASS là một cách viết CSS kiểu mới, giúp bạn quản lí code CSS một cách khoa học, dễ quản lí, nâng cấp, thích hợp khi làm các dự án lớn. Nhờ các tính năng như variables, functions, mixins... các đoạn mã CSS sẽ trở nên có tổ chức cho phép developer làm việc nhanh và ít gặp lỗi hơn.
Trang chủ: http://sass-lang.com/
SASS là một CSS Processor có đuôi file là .scss khác với CSS thuần là .css
File scss thì trình duyệt không hiểu được nên bạn phải dùng cách nào đó để chuyển sang file css, có nhiều cách để làm ở đây mình sẽ hướng dẫn các bạn dùng phần mềm Koala hoàn toàn miễn phí để biên dịch nó.
1. Cài đặt Koala để biên dịch scss
Mình đã có bài hướng dẫn các bạn có thể xem cách cài đặt tại đây
2. Sử dụng Koala
Đầu tiên để giúp các bạn dễ theo dõi mình sẽ tạo 1 folder Sass_P1 ở ngay desktop, bên trong sẽ có các folder css, images và file index.html như hình bên dưới

Bên trong folder css ta sẽ tạo ra 1 file tên là style.scss
Code file index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sass_P1</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Hello <span>World!</span></h1>
</body>
</html>
Ta thấy trong index.html thì link tới file style.css mà trong khi file đó ta chưa hề tạo. Bây giờ chúng ta nên nhớ là viết code css trong file style.scss sau đó dùng phần mềm Koala biên dịch nó ra file css nhé.
Mở phần mềm Koala nên, click vào dấu + và tìm đến desktop » Sass_P1 » css

Sau khi tìm đến folder css, Koala sẽ tự động tìm thấy file style.scss, bạn click chuột vào file đó sẽ hiện ra giao diện như thế này


Auto Compile: tự động biên dịch mỗi khi ta nhấn Ctrl + S
Source Map: tạo ra 1 file style.css.map (file này giúp chúng ta debug tìm được code scss)
Autoprefix: thêm các prefix cho các thuộc tính css3
Mặc định file css được biên dịch sẽ nằm ngay cạnh file scss

3. Output style
Có 4 kiểu định dạng khi xuất ra file css, để hiểu rõ output như nào thì ta viết code scss rồi xem nhé
h1 {
  text-align: center;
  box-shadow: 0 0 5px blue;
  span {
    color: green;
  }
}
3-1. Kiểu nested
h1 {
  text-align: center;
  -webkit-box-shadow: 0 0 5px blue;
          box-shadow: 0 0 5px blue; }
  h1 span {
      color: green; }

/*# sourceMappingURL=style.css.map */
3-2. Kiểu expanded
h1 {
  text-align: center;
  -webkit-box-shadow: 0 0 5px blue;
          box-shadow: 0 0 5px blue;
}
h1 span {
  color: green;
}

/*# sourceMappingURL=style.css.map */
3-3. Kiểu compact
h1 { text-align: center; -webkit-box-shadow: 0 0 5px blue; box-shadow: 0 0 5px blue; }
h1 span { color: green; }

/*# sourceMappingURL=style.css.map */
3-4. Kiểu compressed
h1{text-align:center;-webkit-box-shadow:0 0 5px blue;box-shadow:0 0 5px blue}h1 span{color:green}

/*# sourceMappingURL=style.css.map */
4. Nested Rules
Quy tắc này cho phép viết các CSS lồng vào nhau. Khi biên dịch, Sass sẽ cho ra tập tin CSS với đầy đủ các selector theo đúng chuẩn. Kiểu viết này giống với kiểu phân cấp trong HTML
Ta có HTML như sau
<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Feature</a></li>
  <li><a href="#">Product</a></li>
  <li><a href="#">Contact</a></li>
</ul>
Đây là cách viết CSS thông thường mà mình hay viết
ul.menu {
  list-style: none;
}
ul.menu li {
  float: left;
}
ul.menu li a {
  color: #696969;
}

Còn đây là cách viết theo kiểu Nested Rules
ul.menu {
  list-style: none;
  li {
    float: left;
    a {
      color: #696969;
    }
  }
}

5. Referencing Parent Selectors
Sử dụng kí hiệu & đứng trước hiệu ứng, trạng thái mà chúng ta muốn. Ví dụ ta muốn khi hover vào thẻ a thì có gạch chân và đổi màu chữ
ul.menu {
  list-style: none;
  li {
    float: left;
    a {
      color: #696969;
      &:hover {
        color: #999;
      }
    }
  }
}

6. Nested Properties
Kiểu viết này sẽ gom các thuộc tính có cùng namespaces giống nhau, ví dụ như margin-left, margin-right, margin-top, margin-bottom...
ul.menu {
  list-style: none;
  li {
    float: left;
    a {
      color: #696969;
      margin: {
        top: 0;
        bottom: 0;
        left: 9px;
        right: 9px;
      }
    }
  }
}

Còn đây là lúc khi đã Compile ra file CSS
ul.menu {
  list-style: none;
}
ul.menu li {
  float: left;
}
ul.menu li a {
  color: #696969;
  margin: 0px 9px;
}

7. Variables
Giống với các ngôn ngữ lập trình ta khai báo biến để lưu trữ một giá trị được sử dụng nhiều lần. Để khai báo một biến ta sử dụng kí tự $ đằng trước tên biến
$text-success: #3c763d;

h1.big-title { color: $text-success; }


// Kết quả
h1.big-title { color: #3c763d; }
8. Global Variables
Ở ví dụ trên nếu ta khai báo biến $text-success ở bên ngoài không nằm trong bất kì bộ chọn nào thì ở chỗ nào ta cũng có thể gọi được đến biến đó. Nhưng nếu bạn khai báo biến ở bên trong 1 bộ chọn thì phạm vi của biến sẽ chỉ nằm trong bộ chọn đấy.
h2 {
  $text-success: #3c763d;
  span {
    color: $text-success;
  }
}
h3 {
  color: $text-success;
}
Ở ví dụ trên biến $text-success được khai báo bên trong h2 nên thẻ span có thế sử dụng được nhưng h3 thì không.
Để h3 sử dụng được biến trên thì ta thêm !global
h2 {
  $text-success: #3c763d !global;
  span {
    color: $text-success;
  }
}
h3 {
  color: $text-success;
}
9. Data Types
Sass hỗ trợ 8 kiểu dữ liệu khác nhau:

Numbers: 1.2, 13, 10px
Strings of text, có hoặc không có dấu nháy: "foo", 'foo', foo
Colors: blue, green, #04a3f9, rgba(255, 0, 0, 0.5)
Booleans: true, false
nNulls: null
Lists of values ngăn cách nhau bởi dấu cách hoặc dấu phẩy: 1.5em 1em 0 2em, Helvetica, Arial, sans-serif
Maps from one value to another: (key1: value1, key2: value2)
Function references

10. Operations
Sass hỗ trợ các kiểu toán tử so sánh, tính toán cộng, trừ, nhân, chia, lấy dư. Ngoài ra còn dùng được khi nối chuỗi.
10-1. Number Operations
Các kiểu hỗ trợ tính toán so sánh áp dụng với Data Types là Number. Xem ví dụ dưới đây để hiểu cách làm việc của Sass (lưu ý đặc biệt giữa kí hiệu slash / và phép chia /)
p {
  font: 10px / 8px;                // CSS thuần, không tính chia
  $width: 1000px;                  // Khai báo biến
  width: $width / 2;               // Sử dụng biến, thực hiện phép chia
  height: (500px / 2);             // Sử dụng dấu ngoặc tròn, thực hiện phép chia
  line-height: round(1.5) / 2;     // Sử dụng function làm tròn 1.5 thành 2, thực hiện phép chia
  margin-left: 5px + 8px / 2px;    // Thực hiện phép chia trước, sau đó cộng giá trị
  font: (italic bold 10px / 8px);  // In a list, parentheses don't count
}


// Kết quả
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  line-height: 1;
  margin-left: 9px;
  font: italic bold 10px/8px;
}
10-2. Color Operations
Sass hỗ trợ việc tính toán các giá trị màu sắc lần lượt dựa trên 3 màu chính red, green, blue
.ex1 { color: #010203 + #040506; }
.ex2 { color: #010203 * 2; }
.ex3 { color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75); }


// Kết quả
.ex1 { color: #050709; }
.ex2 { color: #020406; }
.ex3 { color: rgba(255, 255, 0, 0.75); }

Với ex1: 01 + 04 = 05, 02 + 05 = 07, 03 + 06 = 09
Với ex2: 01 * 2 = 02, 02 * 2 = 04, 03 * 2 = 06
Với ex3: cộng giá trị tương ứng với mỗi phần tử

10-3. String Operations
Nối chuỗi lại với nhau sử dụng dấu +, lưu ý chỉ áp dụng với Data Types là String
p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
  margin: 3px + 4px auto;
}


// Kết quả
p:before {
  content: "Foo Bar";
  font-family: "san-serif";
  margin: 7px auto;
}
10-4. Interpolation
Sử dụng để lấy giá trị của một biến gán vào bộ chọn selector hoặc tên của thuộc tính sử dụng kí tự #{ }
$name: foo;
$attr: border;
$font-size: 12px;
$line-height: 30px;

p.#{$name} {
  #{$attr}-color: blue;
  font: #{$font-size}/#{$line-height};
}


// Kết quả
p.foo {
  border-color: blue; 
  font: 12px/30px;
}
11. Import & Partial
Trong thực tế khi code scss ta thường chia nhỏ ra các file đảm nhiệm các chức năng khác nhau như _colors.scss hay _variables.scss rồi dùng từ khóa @import để gọi vào.
$primary-300: #64B5F6;
$primary-400: #42A5F5;
$primary-600: #1E88E5;
$font-size-base : 14px;
$font-size-large: ceil(($font-size-base * 1.25)); // ~18px
$font-size-small: ceil(($font-size-base * 0.85)); // ~12px
File style.scss để import 2 file ở trên ta viết code như sau
@import "variables";
@import "colors";

.title {
  font-size: $font-size-small;
  color: $primary-300;
}


// Kết quả
.title {
  font-size: 12px;
  color: #64B5F6;
}
Lưu ý

3 file ở trên nằm cùng cấp ngang hàng với nhau
Khi import việc ghi cả đuôi file scss là không cần thiết
Ta thấy 2 file _colors.scss và  _variables.scss có gạch dưới ở phía trước, đó là cách dùng của Partial, điều này có nghĩa SASS sẽ không biên dịch các file đó ra file css

12. Media
Cách viết @media tương tự như viết của CSS, thường dùng khi responsive website
@media (min-width: 1200px) {
  .col-lg-6 {
    width: 50%;
  }
}
13. Extend
Kế thừa các thuộc tính của một selector khác. Sử dụng từ khóa @extend
.btn {
  border: 1px solid transparent;
  padding: 7px 12px;
  font-size: 13px;
}
.btn-primary {
  @extend .btn;
  color: #fff;
  background-color: #2196F3;
  border-color: #2196F3;
}
Kết quả
.btn, .btn-primary {
  border: 1px solid transparent;
  padding: 7px 12px;
  font-size: 13px;
}
.btn-primary {
  color: #fff;
  background-color: #2196F3;
  border-color: #2196F3; 
}
Vùng chọn %extend sẽ chỉ kế thừa các thuộc tính mà không compile.
%btn {
  border: 1px solid transparent;
  padding: 7px 12px;
  font-size: 13px;
}
.btn-primary {
  @extend %btn;
  color: #fff;
  background-color: #2196F3;
  border-color: #2196F3;
}
Kết quả
.btn-primary {
  border: 1px solid transparent;
  padding: 7px 12px;
  font-size: 13px;
}
.btn-primary {
  color: #fff;
  background-color: #2196F3;
  border-color: #2196F3; 
}
14. if
Kiểm tra một câu lệnh điều kiện và trả về một giá trị tương ứng
p {
  @if 1 + 1 == 2    { border: 1px solid; }
  @if 5 < 3         { border: 2px dotted; }
  @if null          { border: 3px double; }
}

$type: monster;
h3 {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}


// Kết quả
p { border: 1px solid; }
h3 { color: green; }
15. for
Sử dụng vòng lặp @for cho các trường hợp biết trước số lần lặp lại khối lệnh.
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}


// Kết quả
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }
16. each
Vòng lặp @each dùng để lặp dữ liệu trong list hoặc map. Lưu ý trong SASS không có kiểu dữ liệu là mảng nhé
@each $name, $color in (item1, red), (item2, green), (item3, blue) {
  .#{$name} {
    background: url(../images/#{$name}.png);
    color: #{$color};
  }
}


// Kết quả
.item1 { 
  background: url(../images/item1.png); 
  color: red; 
}
.item2 { 
  background: url(../images/item2.png); 
  color: green; 
}
.item3 { 
  background: url(../images/item3.png); 
  color: blue; 
}
17. while
Vòng lặp @while sẽ thực hiện lặp đi lặp lại một khối công việc đến khi nào điều kiện đã cho còn là đúng.
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}


// Kết quả
.item-6 { width: 12em; }
.item-4 { width: 8em; }
.item-2 { width: 4em; }
18. Mixin không tham số
Mixin cho phép bạn định nghĩa các thuộc tính CSS lại với nhau, về cơ bản nó mạnh hơn so với việc dùng biến chỉ lưu được một giá trị, cũng giống với extend kế thừa các thuộc tính nhưng mixin còn hỗ trợ thêm cả tham số không khác gì một function.
Sử dụng @mixin mixinName để khai báo mixin
Sử dụng @include mixinName để sử dụng
@mixin BorderRadius {
  border-radius: 50%;
}
div.avatar {
  width: 150px;
  height: 150px;
  @include BorderRadius;
}


// Kết quả
div.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}
19. Mixin có tham số
Sử dụng @mixin mixinName($params) để khai báo mixin
Trong đó $params là các tham số truyền vào
Sử dụng @include name($params) để sử dụng
@mixin BorderRadius($value) {
  border-radius: $value;
}
div.avatar {
  width: 150px;
  height: 150px;
  @include BorderRadius(10px);
}


// Kết quả
div.avatar {
  width: 150px;
  height: 150px;
  border-radius: 10px;
}
20. Mixin có tham số giá trị mặc định
Sử dụng mixin với tham số mặc định
@mixin BorderRadius($value: 50%) {
  border-radius: $value;
}
div.avatar {
  width: 150px;
  
  // Không có tham số, lấy giá trị mặc định 50%
  @include BorderRadius;
  
  // Có tham số truyền vào 15px
  @include BorderRadius(15px);
}


// Kết quả
div.avatar {
  width: 150px;
  // Không có tham số, lấy giá trị mặc định 50%
  border-radius: 50%;
  // Có tham số truyền vào 15px
  border-radius: 15px;
}
21. Function
Sử dụng  @function functionName($params) để khai báo một function
Trong đó $params là các tham số truyền vào
Sử dụng functionName($params) để gọi function
@function grid-width($n) {
  @return $n * 40px;
}

#sidebar { width: grid-width(5); }

// Kết quả
#sidebar { width: 200px; }
Lưu ý

Function có thể có tham số hoặc không có tham số
Function có thể truyền tham số mặc định vào trong param
Function cũng khá giống với mixin nên tùy vào mục đích sử dụng
Ta dùng function khi muốn tính toán, so sánh giá trị rồi trả về một kết quả

SASS cơ bản đến căng cơ

Bài viết gốc: https://antongunnarsson.com/react-component-code-smells/

Code Smell là gì? code smell là thứ có thể chỉ ra vấn đề sâu hơn bên trong code nhưng không nhất thiết là lỗi. Đọc thêm trên Wikipedia

1. Too many props
Một component có quá nhiều props là dấu hiệu nên chia nhỏ component đó ra.
Vậy bao nhiêu thì coi là nhiều? Cái đấy còn tùy.
Bạn có thể thấy một component có 20 props và  hài lòng nó vẫn đang làm việc ngon, giờ bạn muốn thêm một cái nữa vào danh sách props vốn đã dài, có một số điều cần xem xét:
Component này có làm nhiều thứ không?
Giống như functions, component chỉ nên làm tốt một việc, vì vậy luôn kiểm tra xem có thể chia component đó thành nhiều component con hay không?
Tôi có nên dùng composition?
Một mô hình tốt nhưng thường bị bỏ qua là tạo các compose components thay vì xử lý tất cả logic bên trong nó. Giả sử chúng ta có một component như sau:
<ApplicationForm
  user={userData}
  organization={organizationData}
  categories={categoriesData}
  locations={locationsData}
  onSubmit={handleSubmit}
  onCancel={handleCancel}
  ...
/>
Nhìn vào các props của component này, chúng ta có thể thấy rằng tất cả chúng đều liên quan đến chức năng của component, nhưng vẫn còn chỗ để cải thiện điều này bằng cách chuyển thành một số component con thay thế:
<ApplicationForm onSubmit={handleSubmit} onCancel={handleCancel}>
  <UserField user={userData} />
  <OrganizationField organization={organizationData} />
  <CategoryField categories={categoriesData} />
  <LocationsField locations={locationsData} />
</ApplicationForm>
Giờ đây, chúng ta đã đảm bảo rằng ApplicationForm chỉ xử lý việc onSubmit và onCancel. Các component con có thể xử lý mọi thứ liên quan đến phần của chúng trong bức tranh lớn hơn. Đây cũng là một cơ hội tuyệt vời để sử dụng React Context cho việc giao tiếp giữa component cha và con.

Đọc thêm về compound components in React.


Tôi có đang gửi quá nhiều props config không?
Trong một số trường hợp, bạn nên nhóm các props lại với nhau thành một object, chẳng hạn như để hoán đổi cấu hình này dễ dàng hơn.
<Grid
  data={gridData}
  pagination={false}
  autoSize={true}
  enableSort={true}
  sortOrder="desc"
  disableSelection={true}
  infiniteScroll={true}
  ...
/>
Tất cả các props ngoại trừ  data có thể được coi là config. Trong những trường hợp này, bạn nên thay đổi component Grid để nó nhận một options gom các config ở trên.
const options = {
  pagination: false,
  autoSize: true,
  enableSort: true,
  sortOrder: 'desc',
  disableSelection: true,
  infiniteScroll: true,
  ...
}

<Grid
  data={gridData}
  options={options}
/>
2. Incompatible props
Tránh gửi các props không tương thích với nhau.
Ví dụ chúng ta tạo một component <Input /> chung chung nhằm mục đích xử lý type=text, nhưng sau một thời gian chúng ta lại thêm chức năng cho nó với type=tel. Việc triển khai có thể như sau:
function Input({ value, isPhoneNumberInput, autoCapitalize }) {
  if (autoCapitalize) capitalize(value)

  return <input value={value} type={isPhoneNumberInput ? 'tel' : 'text'} />
}
Vấn đề xảy ra  là isPhoneNumberInput và autoCapitalize không hợp cạ với nhau. Chúng ta đâu thể viết hoa số điện thoại.
Trong trường hợp này, giải pháp có lẽ là chia thành nhiều component nhỏ hơn. Nếu chúng ta có một số logic muốn chia sẻ, hãy chuyển nó sang custom hook:
function TextInput({ value, autoCapitalize }) {
  if (autoCapitalize) capitalize(value)
  useSharedInputLogic()

  return <input value={value} type='text' />
}

function PhoneNumberInput({ value }) {
  useSharedInputLogic()

  return <input value={value} type='tel' />
}
Mặc dù ví dụ này hơi phức tạp, nhưng việc tìm kiếm các props không tương thích với nhau thường là một dấu hiệu tốt cho thấy bạn nên kiểm tra xem component có cần được chia nhỏ hay không.
3. Copying props into state
Đừng chặn dòng chảy của data bằng cách copy props vào state.
function Button({ text }) {
  const [buttonText] = useState(text)

  return <button>{buttonText}</button>
}
Bằng việc đặt props text vào initialValue của useState khiến cho component này bỏ qua các update của props text. Nếu props thay đổi thì component vẫn render với giá trị đầu tiên, đối với hầu hết các props, đây là hành vi không mong muốn, có thể làm cho component dễ bị lỗi hơn.
Một ví dụ thực tế hơn về điều này là khi chúng ta muốn lấy một giá trị mới nào đó từ một giá trị và đặc biệt nếu điều này đòi hỏi một số tính toán chậm. Ở ví dụ dưới đây, chúng ta chạy hàm slowFormatText để định dạng props text, điều này mất rất nhiều thời gian để thực thi.
function Button({ text }) {
  const [formattedText] = useState(() => slowlyFormatText(text))

  return <button>{formattedText}</button>
}
Một cách tốt hơn để giải quyết vấn đề này là sử dụng hook useMemo để ghi nhớ kết quả:
function Button({ text }) {
  const formattedText = useMemo(() => slowlyFormatText(text), [text])

  return <button>{formattedText}</button>
}
Bây giờ thì slowlyFormatText chỉ chạy khi text thay đổi và chúng ta không chặn update component.

Đôi khi chúng ta vẫn cần prop trong đó các thay đổi bị bỏ qua, ví dụ bộ chọn màu có các option cho sẵn, nhưng khi người dùng thay đổi thì chúng ta chưa muốn thay đổi ngay chỉ lưu tạm. Trong trường hợp này, việc sao chép prop vào state là hoàn toàn ổn, nhưng để biểu thị hành vi này của người dùng, chúng ta có thể phân tách ra thành initialColor hoặc defaultColor

Further reading: Writing resilient components by Dan Abramov.
4. Returning JSX from functions
Đừng trả về JSX từ các functions bên trong component.
Đây là một pattern phần lớn đã biến mất khi các function components trở nên phổ biến hơn, nhưng tôi vẫn thỉnh thoảng bắt gặp nó.
function Component() {
  const topSection = () => (
    <header>
      <h1>Component header</h1>
    </header>
  )

  const middleSection = () => (
    <main>
      <p>Some text</p>
    </main>
  )

  const bottomSection = () => (
    <footer>
      <p>Some footer text</p>
    </footer>
  )

  return (
    <div>
      {topSection()}
      {middleSection()}
      {bottomSection()}
    </div>
  )
}
Mặc dù điều này ban đầu có thể ổn, nhưng nó khiến bạn khó suy luận về code, không khuyến khích và nên tránh. Để giải quyết vấn đề này bạn nên chia các phần này thành các component con thay thế.

Hãy nhớ rằng khi bạn tạo một component mới, bạn không cần phải tách ra file mới. Đôi khi bạn nên giữ nhiều components trong cùng một file nếu chúng được kết hợp chặt chẽ với nhau.

5. Multiple booleans for state
Tránh sử dụng nhiều state boolean để thể hiện trạng thái của component
Khi viết một component và mở rộng chức năng cho nó, bạn có nhiều state để cho biết component đang ở trạng thái nào. Ví dụ:
function Component() {
  const [isLoading, setIsLoading] = useState(false)
  const [isFinished, setIsFinished] = useState(false)
  const [hasError, setHasError] = useState(false)

  const fetchSomething = () => {
    setIsLoading(true)

    fetch(url)
      .then(() => {
        setIsLoading(false)
        setIsFinished(true)
      })
      .catch(() => {
        setHasError(true)
      })
  }

  if (isLoading) return <Loader />
  if (hasError) return <Error />
  if (isFinished) return <Success />

  return <button onClick={fetchSomething} />
}
Mặc dù về mặt kỹ thuật thì nó hoạt động tốt nhưng thật khó để lý giải về trạng thái của component, nó có thể xảy ra lỗi. Chúng ta có thể rơi vào trạng thái impossible state nếu chúng ta vô tình đặt cả isLoading và isFinished thành true cùng một lúc.
Cách tốt hơn để quản lý trạng thái đó là dùng enum. Ở các ngôn ngữ khác thì enum là cách để khai báo một tập hợp các giá trị không đổi, vì enum không tồn tại trong javascript nên chúng ta có thế sử dụng string thay thế.
function Component() {
  const [state, setState] = useState('idle')

  const fetchSomething = () => {
    setState('loading')

    fetch(url)
      .then(() => {
        setState('finished')
      })
      .catch(() => {
        setState('error')
      })
  }

  if (state === 'loading') return <Loader />
  if (state === 'error') return <Error />
  if (state === 'finished') return <Success />

  return <button onClick={fetchSomething} />
}
Làm theo cách này chúng ta đã gỡ bỏ trạng thái impossible state và khiến cho component trở nên dễ hiểu hơn. Nếu bạn sử dụng TypeScript thì có thể khai báo như sau:
const [state, setState] = useState<'idle' | 'loading' | 'error' | 'finished'>('idle')
6. Too many useState
Tránh sử dụng quá nhiều useState trong component.
Một component có quá nhiều useState giống như làm quá nhiều thứ trong đó, tốt hơn là tách ra làm nhiều component, tuy nhiên sẽ có những component phức tạp cần nhiều state.
function AutocompleteInput() {
  const [isOpen, setIsOpen] = useState(false)
  const [inputValue, setInputValue] = useState('')
  const [items, setItems] = useState([])
  const [selectedItem, setSelectedItem] = useState(null)
  const [activeIndex, setActiveIndex] = useState(-1)

  const reset = () => {
    setIsOpen(false)
    setInputValue('')
    setItems([])
    setSelectedItem(null)
    setActiveIndex(-1)
  }

  const selectItem = (item) => {
    setIsOpen(false)
    setInputValue(item.name)
    setSelectedItem(item)
  }

  ...
}
Chúng ta có function reset để reset các state, function selectItem để cập nhật một số state. Cả hai hàm này đều sử dụng khá nhiều setState để thực hiện nhiệm vụ. Bây giờ, nếu chúng ta có thêm nhiều hành động khác phải cập nhật state, điều này trở nên khó để giữ cho không có lỗi trong thời gian dài. Trong những trường hợp này, sẽ có lợi khi quản lý state bằng một useReducer
const initialState = {
  isOpen: false,
  inputValue: "",
  items: [],
  selectedItem: null,
  activeIndex: -1
}
function reducer(state, action) {
  switch (action.type) {
    case "reset":
      return {
        ...initialState
      }
    case "selectItem":
      return {
        ...state,
        isOpen: false,
        inputValue: action.payload.name,
        selectedItem: action.payload
      }
    default:
      throw Error()
  }
}

function AutocompleteInput() {
  const [state, dispatch] = useReducer(reducer, initialState)

  const reset = () => {
    dispatch({ type: 'reset' })
  }

  const selectItem = (item) => {
    dispatch({ type: 'selectItem', payload: item })
  }

  ...
}
Với việc sử dụng useReducer chúng ta đã đóng gói logic quản lý state và chuyển sự phức tạp ra khỏi component. Điều này làm cho việc hiểu những gì đang diễn ra dễ dàng hơn, chúng ta đã tách UI và logic riêng biệt.

Cả useState và useReducer đều có ưu nhược điểm với các use case khác nhau, một trong các mục yêu thích của tôi với reducers đó là state reducer pattern của Kent C. Dodds.

7. Large useEffect
Tránh sử dụng các useEffect lớn và làm nhiều việc. Nó khiến code khó tìm lỗi, cứ lòng vòng update.
Một sai lầm mà tôi đã mắc phải là đặt quá nhiều thứ vào một useEffect.
function Post({ id, unlisted }) {
  ...

  useEffect(() => {
    fetch(`/posts/${id}`)
      .then(/* do something */)

    setVisibility(unlisted)
  }, [id, unlisted])

  ...
}
useEffect này không lớn lắm nhưng lại làm nhiều việc. Nếu id thay đổi thì fetch bài viết, nếu unlisted thay đổi thì setVisibility, tuy nhiên chỉ cần một trong hai dependencies thay đổi thì cả hai việc đều thực hiện.
Để dễ theo dõi chúng ta nên tách ra làm hai useEffect với từng dependencies riêng biệt
function Post({ id, unlisted }) {
  ...

  useEffect(() => { // when id changes fetch the post
    fetch(`/posts/${id}`)
      .then(/* do something */)
  }, [id])

  useEffect(() => { // when unlisted changes update visibility
    setVisibility(unlisted)
  }, [unlisted])

  ...
}
Làm cách này chúng ta đã giảm độ phức tạp của component xuống, dễ dàng suy đoán logic, giảm nguy cơ lỗi.
8. Wrapping up
Được rồi, tạm thế nhé! Hãy nhớ rằng những điều nêu trên không phải là quy tắc mà là dấu hiệu cho thấy điều gì đó có thể "sai". Bạn chắc chắn sẽ gặp phải những tình huống trên và muốn thực hiện chỉnh sửa lại.
Bạn muốn feedback hay suggest về code smells khác? Tìm tôi trên Twitter!

React component code smells

Font Awesome 5 là một trong những icon font phổ biến nhất hiện nay, tại thời điểm viết bài 28/10/2020 với phiên bản 5.15.1 hỗ trợ trên 1600 icon miễn phí, rất dễ dàng để tích hợp vào website, công việc của bạn bây giờ là lựa chọn icon và copy paste. Font Awesome có bản miễn phí và bản trả phí, tuy nhiên bạn chỉ cần dùng bản miễn phí là đủ để làm đẹp cho website của mình.
01. Demo

Link thư viện: https://fontawesome.com/v5/search
Danh sách icon bản miễn phí: https://fontawesome.com/v5/search?m=free

02. Cài đặt
Cách 1: Sử dụng link CDN
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css

Cách 2: Tải thư viện về hoặc một vài cách tải khác qua npm - yarn ...
03. Thêm thư viện vào trang web
Đối với link CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

Đối với thư viện tải về, ta giải nén và link tới file all.min.css
Mẫu HTML cơ bản
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hướng dẫn sử dụng Fontawesome 5 | kentrung</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
</head>
<body>
	
</body>
</html>

04. Cách tìm icon và sử dụng
Các bạn lên trang web của họ có liệt kê toàn bộ icon, tìm tên icon bằng tiếng anh, ở đây mình tìm các icon của user
https://fontawesome.com/v5/search?q=user&m=free



Click chọn icon bạn thấy thích, ở đây mình chọn icon user-tag, để sử dụng bạn chỉ cần copy đoạn code vào trang web là xong.




Tên icon
Kiểu icon và prefix
Mã unicode
Mã html
Tag loại nhóm
Phiên bản hỗ trợ
Nếu là: Start Using This Pro Icon thì là bản PRO trả phí mới dùng được

05. Color Icons
Thay đổi màu sắc của icon
<i class="fas fa-clock" style="color: red;"></i>
<i class="fas fa-clock" style="color: blue;"></i>
<i class="fas fa-clock" style="color: green;"></i>
<i class="fas fa-clock" style="color: pink;"></i>
<i class="fas fa-clock" style="color: #000;"></i>

Kết quả:

06. Sizing Icons
Sử dụng các class fa-xs fa-sm fa-lg fa-2x fa-3x fa-4x fa-5x fa-6x fa-7x fa-8x fa-9x fa-10x để điều chỉnh kích thước icon
<i class="fas fa-clock fa-xs"></i>
<i class="fas fa-clock fa-sm"></i>
<i class="fas fa-clock fa-lg"></i>
<i class="fas fa-clock fa-2x"></i>
<i class="fas fa-clock fa-5x"></i>
<i class="fas fa-clock fa-10x"></i>

Kết quả:

07. Icon in a List
Sử dụng class fa-ul và fa-li để thay thế style mặc định của ul
<ul class="fa-ul">
  <li>
    <span class="fa-li"><i class="fas fa-check-square"></i></span>List Item
  </li>
  <li>
    <span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>List Item
  </li>
  <li>
    <span class="fa-li"><i class="fas fa-square"></i></span>List Item
  </li>
</ul>

Kết quả:

08. Animating Icons

Sử dụng class fa-spin để xoay tròn icon liên tục.
Sử dụng class fa-pulse để xoay tròn icon với 8 bước di chuyển.

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync-alt fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-cog fa-pulse"></i>
<i class="fas fa-spinner fa-pulse"></i>

Kết quả:

09. Rotating and Flipping Icons
Sử dụng class fa-rotate-* và fa-flip-* để xoay và lật icon.
<i class="fas fa-horse"></i>
<i class="fas fa-horse fa-rotate-90"></i>
<i class="fas fa-horse fa-rotate-180"></i>
<i class="fas fa-horse fa-rotate-270"></i>
<i class="fas fa-horse fa-flip-horizontal"></i>
<i class="fas fa-horse fa-flip-vertical"></i>

Kết quả:

10. Stacking Icons
Để ghép hai icon ta sử dụng class fa-stack trên lớp bao ngoài, class fa-stack-1x cho icon có kích thước nhỏ và fa-stack-2x cho icon lớn hơn, class fa-inverse được sử dụng để đổi sang màu đối ngược.
<span class="fa-stack fa-lg">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<br>
<span class="fa-stack fa-lg">
  <i class="far fa-circle fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x"></i>
</span>
<br>
<span class="fa-stack fa-lg">
  <i class="fas fa-camera fa-stack-1x"></i>
  <i class="fas fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>

Kết quả:

11. Fixed-Width Icons
Các icon có độ rộng khác nhau nên ta sử dụng class fa-fw để đặt icon có độ rộng cố định.
<p>Fixed Width:</p>
<div><i class="fas fa-arrows-alt-v fa-fw"></i> Icon 1</div>
<div><i class="fas fa-band-aid fa-fw"></i> Icon 2</div>
<div><i class="fab fa-bluetooth-b fa-fw"></i> Icon 3</div>

<p>Without Fixed Width:</p>
<div><i class="fas fa-arrows-alt-v"></i> Icon 1</div>
<div><i class="fas fa-band-aid"></i> Icon 2</div>
<div><i class="fab fa-bluetooth-b"></i> Icon 3</div>

Kết quả:

12. Bordered + Pulled Icons
Class fa-border, fa-pull-right hoặc fa-pull-left cho dấu ngoặc kép hoặc icon bài viết.
<i class="fas fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Kết quả:

13. [Advanced] CSS Pseudo-elements
Với một vài dự án đôi khi chúng ta không thể thêm icon trực tiếp vào HTML được nhưng không sao vẫn có cách thêm bằng CSS. CSS có một tính năng mạnh mẽ được gọi là Pseudo-element. Font Awesome đã tận dụng yếu tố pseudo-element :: before để thêm các icon vào trong trang web.
Các bước thực hiện

Thiết lập css chung cho tất cả icon
Xác định font-family tương ứng cho mỗi kiểu, Font Awesome có 5 kiểu trong đó 2 kiểu free là Solid và Brands còn 3 kiểu pro (trả phí) là Regular, Light và Duotone. Xem bảng bên dưới để tìm giá trị.
Xác định font-weight tương ứng cho mỗi kiểu, xem bảng bên dưới để tìm giá trị.
Xác định Unicode tương ứng cho icon bạn muốn, xem bảng cheatsheet để tìm giá trị.




Style
Availability
font-weight
font-family




Solid
Free Plan
900
Font Awesome 5 Free or Font Awesome 5 Pro (for pro users)


Brands
Free Plan
400
Font Awesome 5 Brands


Regular
Pro Plan Required
400
Font Awesome 5 Pro


Light
Pro Plan Required
300
Font Awesome 5 Pro


Duotone
Pro Plan Required
900
Font Awesome 5 Duotone



Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
  <style>
    /* CSS pseudo-element styling */
    /* general reset/setup styling for icons - needed on all */
    .icon::before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block; 
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
    }

    /* defining the right font-family/font-face for each style */
    .icon-solid::before {font-family: "Font Awesome 5 Free";}
    .icon-brand::before {font-family: "Font Awesome 5 Brands";}

    /* defining the right weight for each style */
    .icon-solid::before {font-weight: 900;}
    .icon-brand::before {font-weight: 400;}

    /* defining the right unicode values for each icon */
    .icon-microphone::before {content: "\f130";}
    .icon-aws::before {content: "\f375";}

     /*Custom CSS*/
    h1, h2 {text-align: center;}
    h1 span {margin: 0 20px;}
    h1 span:before {margin-right: 1rem; color: red;}
    .rating-outer {position: relative; color: red; display: inline-block;}
    .rating-inner {position: absolute; top: 0; left: 0; overflow: hidden;}
    .rating-outer::before,
    .rating-inner::before {
      font-family: "Font Awesome 5 Free"; 
      font-weight: 400; 
      content: "\f005 \f005 \f005 \f005 \f005";
    }
    .rating-inner::before {
      font-weight: 900;
    }
  }
  </style>
</head>
<body>
  <h1>
    <span class="icon icon-solid icon-microphone">Microphone</span>
    <span class="icon icon-brand icon-aws">Amazon</span>
  </h1>
  <h2>
    <span class="icon rating-outer">
      <span class="icon rating-inner" style="width: 50%"></span>
    </span>
    (69 reviews)
  </h2>
</body>
</html>

Kết quả

14. [Advanced] Tối ưu Font Awesome với IcoMoon
Font Awesome 5 hỗ trợ trên 1600 icon miễn phí, tuy nhiên nếu bạn chỉ muốn sử dụng khoảng 10 đến 20 icon trong đó... thì bạn vẫn phải tải toàn bộ style của Font Awesome, điều này quả thật là chưa tối ưu. Một câu hỏi đặt ra là làm sao mình vẫn sử dụng được Font Awesome mà chỉ cần tải về style của những icon mình dùng? Sau khi tìm hiểu một số phương pháp thì mình thấy cách tối ưu Font Awesome với IcoMoon là đơn giản và hiệu quả nhất.
Đã có một vài bài viết hướng dẫn cách tối ưu nên mình không viết lại, các bạn tham khảo tại:

http://completejavascript.com/toi-uu-font-awesome-voi-icomoon
https://viblo.asia/p/tao-icon-font-voi-icomoon-WAyK8e1eZxX



Bài viết đến đây là hết, hi vọng với bài viết này các bạn đã thêm được nhiều kiến thức bổ ích. Hẹn gặp lại các bạn ở bài viết tiếp theo.
Tham khảo thêm các chức năng cực kì ó sầm (awesome) nữa tại đây: https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
Liên hệ: trungnt256

Welcome to DevBlog

SASS cơ bản đến căng cơ

React component code smells

Hướng dẫn Font Awesome 5 bản miễn phí

React router dom V6