Giới thiệu đôi điều về React    

React có "tên họ" đầy đủ là ReactJS, là bộ thư viện viết bằng ngôn ngữ lập trình JavaScript được dùng để xây dựng và phát triển các ứng dụng web. Nó là một công cụ mã nguồn mở, có các component được phát triển bởi "ông lớn" Facebook và được "debut" vào năm 2013. 

React không ngẫu nhiên mà được sử dụng bởi rất nhiều công ty lớn trên thế giới như Facebook, eBay, Netflix… Vì nó hỗ trợ cho việc lập trình tốt hơn nhờ các component có thể tái sử dụng, tốc độ ứng dụng nhanh hơn nhờ virtual DOMS, hiệu suất website tốt hơn, mượt mà hơn… Dưới đây là một vài kinh nghiệm nhỏ khi làm việc với React, hy vọng chúng sẽ hữu ích với bạn.

5 lưu ý quan trọng khi làm việc với React

Lưu ý về tên component khi làm việc với React

Để dễ tìm kiếm khi cần, bạn nên đặt tên component rõ ràng và "độc nhất" trong mỗi app. Khi làm việc với React, tên file component được đặt dựa trên đường dẫn (path) của nó. Chẳng hạn, file component nằm trong đường dẫn componets/User/List.jsx thì sẽ có tên là UserList. Đặt tên như thế sẽ giúp ta dễ dàng tìm kiếm trong cây thư mục hoặc fuzzy search. Bên cạnh đó, đặt tên component nên theo chuẩn PascalCase và thể hiện mục đích của file component ví dụ như:

Header.jsx // component Header

Sidebar.jsx // component Sidebar 

Cách tổ chức cấu trúc component trong React

Khi làm việc với React, nếu bạn muốn tổ chức một thư mục component, bạn có thể xem ví dụ dưới đây:

components/

|

|– header/          // component Header

|   |– index.jsx

|   |– styled.scss

|

|– PageAbout/

|   |– index.jsx    // component PageAbout

|   |– partials     // folder sub components

|   |   |– PageAboutAdmin

|   |   |   |– index.js

|   |   |   |– styled.scss

|   |   |

|   |   |– PageAboutSubUser

|   |   |   |– index.js

|   |   |   |– styled.scss

|

Phương pháp import component trong React

Khi làm việc với React, có cách thức nhập (import) component không nên thực hiện ví dụ như:

import Header from 'Header/index';

import Header from 'PageAbout/partials/PageAboutAdmin/index'

Thay vào đó có thể import component như sau:

import Header from 'Header';

import Header from 'PageAbout/partials/PageAboutAdmin';

Nên chọn React component kiểu function

Trong React, một component sẽ có 2 loại là class components (hay còn gọi là stateful) và functional components (stateless). Có thể thấy qua ví dụ dưới đây, cách viết stateful (class) khiến bạn "mỏi tay" hơn hẳn:

2 kiểu component trong React

JavaScript là một ngôn ngữ lập trình hướng chức năng (function), vì vậy mà trong những bản cập nhật mới gần đây (kể từ bản 16.8 với sự phát triển của React Hooks), ReactJS khuyến khích ta nên viết component theo kiểu function. Do đó, ta nên chọn functional components (stateless) khi làm việc với React.  
 

Sử dụng các extension hỗ trợ trong React

Làm thế nào để viết code nhanh trong React? Nhiều bạn tự tin viết code với tốc độ "bàn thờ" nhờ kỹ năng gõ phím bằng cả "tứ chi". Thiết nghĩ, sẽ không cần đến kỹ năng đánh máy thần sầu mà vẫn có thể viết code nhanh chóng. Hãy sử dụng những công cụ sau để hỗ trợ cho việc viết code:

ES7 React/Redux/GraphQL/React-Native snippets: extension này chứa các snippet code giúp bạn dễ dàng gen ra các đoạn code thường hay sử dụng mà không cần phải viết lại từ đầu.

Tool hỗ trợ làm việc với React

Auto Import - ES6, TS, JSX, TSX (VSCode Extension): tự động tìm và gợi ý component giúp bạn dễ dàng import.

Html-to-jsx: là một plugin Visual Studio Code giúp chuyển đổi web html sang jsx.

Change Case Extension: giúp bạn dễ dàng chuyển đổi chuẩn đặt tên.

Vscode-styled-components: giúp nhấn mạnh các cú pháp cho các styled-component.

Vscode-styled-components hỗ trợ làm việc với React

Ngoài ra còn khá nhiều tool hay, bạn có thể tự tìm thêm để hỗ trợ quá trình làm việc với React nhé.
 

Trên đây là những kinh nghiệm "xương máu" mà chúng mình đã tích góp được trong quá trình làm việc với React. Hy vọng bài viết sẽ đem lại những kiến thức bổ ích về React, hãy theo dõi website của chúng mình để cập nhật những bài viết đặc sắc về công nghệ nhé.