6 kỹ năng thiết yếu dành cho nhà phát triển web React JS

Không có nhà phát triển front-end nào là xa lạ với HTML và CSS . Khả năng làm việc và tạo giao diện người dùng là điều cần thiết đối với mọi tổ chức, đặc biệt là vì giao diện người dùng thường quyết định giá trị và chất lượng mong đợi của nội dung trang web đối với người dùng. Ở cấp độ cao, các nhà phát triển React phải có khả năng:

• Làm việc với và viết các thẻ HTML ngữ nghĩa

• Làm việc với và viết bộ chọn CSS

• Thực hiện thiết lập lại CSS

• Hiểu mô hình hộp và cách thiết lập lại border-box

• Hiểu flexbox

• Làm việc và triển khai các nguyên tắc web phản hồi bao gồm người dùng truy vấn phương tiện phù hợp

Trong React, bạn sẽ làm việc với một phần mở rộng cú pháp thực sự là một trong những phần đáng chú ý nhất của hệ sinh thái React: JSX . JSX trông rất giống HTML đến nỗi bạn có thể nghĩ nó là JavaScript có hương vị HTML. Điều tuyệt vời về JSX là nếu bạn biết HTML và CSS, bạn sẽ trực quan biết cách làm việc với JSX .

Các nhà phát triển React hiểu cách làm việc với JSX có thể tạo ứng dụng bằng React API, vốn tốn nhiều thời gian nếu không có JSX - JSX là một lớp trừu tượng nằm trên API React.createElement().

Một lý do khiến nó trở nên quan trọng đối với thư viện—và lý do tại sao nhóm React đã chọn sử dụng nó ngay từ đầu—là vì API sẽ quá cồng kềnh để sử dụng về mặt mở rộng quy mô. Người ta có thể sử dụng React.createElement() để xây dựng toàn bộ ứng dụng, tuy nhiên điều này sẽ không hiệu quả hơn việc chỉ sử dụng HTML đúng cách. JSX hoạt động để cải thiện khả năng mở rộng quy mô của ứng dụng mà không làm tăng thêm độ phức tạp cho mã, điều này cuối cùng sẽ tăng tốc và hợp lý hóa quá trình phát triển ứng dụng.

Bạn không thể sử dụng thành thạo React nếu không hiểu rõ các khái niệm cơ bản mà ngôn ngữ JavaScript cung cấp, nhưng  phiên bản ES6  của JS lại yêu cầu những kỹ năng hàng đầu sau:

Hiểu được khi nào và ở đâu bạn có thể truy cập vào dữ liệu bạn cần là rất quan trọng. Biến là cơ chế được tích hợp trong JavaScript cho phép chúng ta giữ dữ liệu trong bộ nhớ và truy cập dữ liệu đó sau này trong các ứng dụng của chúng ta. 

ES6 mang đến những từ khóa mới mà chúng ta có thể sử dụng để lưu trữ các biến khác ngoài từ khóa `var` truyền thống (như `let` và `const`). Bạn có thể chọn sống theo nguyên tắc là trừ khi bạn thực sự cần `var`, hãy sử dụng `const` cho đến khi trình kiểm tra lỗi của bạn cho bạn biết cách khác, sau đó mặc định là `let`.

React gợi ý một mô hình mà `view của bạn là một hàm của trạng thái của bạn`. Về mặt số học, đó là `v = f(s)`, và là điều bạn cần nhớ khi xem lại các kỹ năng của mình về nền tảng của thư viện. 

Trạng thái là dữ liệu mà chúng ta muốn hiển thị cho người dùng hoặc các mục trong bộ nhớ mà chúng ta có thể truy cập để cho phép người dùng tương tác với dữ liệu của chúng ta. Chúng ta giữ tất cả dữ liệu mà chúng ta trình bày trên một đối tượng được gọi là trạng thái và truy cập các bit dữ liệu này thông qua các thuộc tính trên đối tượng trạng thái này. Đây là cách React nhận được tên của nó; khi trạng thái thay đổi, chế độ xem sẽ cập nhật (`v = f(s);`). Vì vậy, chế độ xem của bạn 'phản ứng' với các thay đổi được thực hiện trong đối tượng trạng thái của bạn. 

Bạn nên ôn lại cách đột biến các đối tượng và thay đổi giá trị của các thuộc tính trên chúng. Đừng lo lắng, React sẽ xử lý cơ chế này thông qua một hàm tiện lợi có tên là `setState()` để giúp bạn thực hiện việc này.

Có thể lưu trữ dữ liệu và truy cập dữ liệu trong mảng và đối tượng là một chuyện. Có thể thao tác dữ liệu đó một cách chính xác lại là chuyện khác. Các phương thức mảng JavaScript tích hợp là những công cụ thiết yếu trong hộp công cụ của mọi nhà phát triển. Tập trung vào `.map`, `.filter` và `.reduce` để có tác động tối đa.

Trong React, mọi thành phần bạn xây dựng đều là một hàm theo cách này hay cách khác. Hãy nhớ rằng 'lớp' chỉ là `hàm xây dựng` ẩn bên trong. Bất kể cú pháp bạn sử dụng là gì, khi xây dựng `thành phần chức năng` hoặc `thành phần lớp`, bạn đang sử dụng một số dạng hàm . 

Đừng đánh giá thấp tầm quan trọng của những nguyên tắc cơ bản này. Nhiều phương pháp hiện nay có thể áp dụng cho lập trình chức năng. Cơ hội sử dụng các hàm JavaScript để xây dựng các phần nhỏ của UI giống như việc xây dựng một bộ Lego mà không cần hướng dẫn. Mỗi phần của UI là một hàm được đóng gói chứa dữ liệu trạng thái mà các thành phần của bạn cần trình bày, chính các thành phần đó và logic thành phần chính thức mà bạn cần sử dụng logic đó. Mỗi thành phần là một viên gạch Lego và bạn phải lắp chúng lại với nhau.

Trong React, việc thao tác các phần tử DOM thực tế là rất hiếm. Hãy nhớ rằng giờ đây chúng ta có thể sử dụng trừu tượng JSX. Đối tượng sự kiện gốc mà bạn nhận được với thao tác DOM thông thường trong React thực sự được gói gọn trong cái gọi là SyntheticEvent. Đảm bảo rằng bạn có thể đính kèm các loại sự kiện khác nhau vào các phần tử HTML như `onclicks`, `onchange`, `mouseenter`, v.v.

Từ khóa 'this' là một trong những tính năng thường bị sử dụng sai trong JavaScript. Hãy nghĩ về 'this' như một con trỏ đến một đối tượng. Ví dụ, bạn có thể sử dụng từ khóa 'this' để tham chiếu đến một đối tượng mà không cần phải tham chiếu đến tên của đối tượng đó.

Ý tưởng cho rằng các hàm có thể được truyền đi dưới dạng đối số—trong trường hợp các hàm bậc cao và hàm gọi lại—là động lực thúc đẩy mô hình `đầu vào/đầu ra` của lập trình hàm . 

Bạn truyền các trình xử lý ở khắp mọi nơi trong React. Hầu hết thời gian, các trình xử lý mà bạn truyền xung quanh đều ở dạng các phương thức được liên kết với một đối tượng và được truy cập dưới dạng các thuộc tính, sẽ được liên kết trong chuỗi nguyên mẫu. Tuy nhiên, có những lúc bạn cần phải tiếp cận bên ngoài mô hình thành phần React hoặc tạo một vài loại thành phần khác nhau để mở rộng một số chức năng cho nhau. Các mẫu này thường được gọi là các mẫu React nâng cao và chúng đang tìm đường vào lĩnh vực thực hành tốt hơn/phổ biến. React sẽ thúc đẩy bạn trở nên sáng tạo và đổi mới khi bạn mở rộng quy mô cùng với nó.

React tự nó phù hợp với mô hình lập trình chức năng ở nhiều khía cạnh. Tuy nhiên, bạn làm việc trong thế giới của các lớp và do đó, thế giới của việc tạo đối tượng. Nếu bạn hiểu những điều cơ bản về cách chuỗi nguyên mẫu hoạt động trong JavaScript , bạn sẽ biết những gì bạn cần về cách chúng ta đạt được sự kế thừa trong JavaScript. Hãy nhớ rằng không có lớp truyền thống nào trong JavaScript. Từ khóa class chỉ là cú pháp ngọt ngào trên đầu chuỗi `object prototype` trong JavaScript. 

Các lớp JavaScript không giống như các lớp theo nghĩa lập trình truyền thống. Bạn tạo các lớp đóng gói logic mẫu, logic JavaScript chính thức và thậm chí cả các kiểu được gọi là thành phần. Các thành phần này là các khối xây dựng của bất kỳ ứng dụng React nào và chỉ có hai cách để viết thành phần cơ bản: bằng cách khai báo nó dưới dạng hàm hoặc khai báo nó dưới dạng lớp.

Đánh giá trình độ của bạn với các lớp học bằng cách đảm bảo bạn có thể trả lời: 

• Làm thế nào để thiết lập phương thức trên một lớp? 

• Làm sao tôi có thể liên kết những phương pháp đó lại với nhau? 

• Làm thế nào để truy cập các thuộc tính được tìm thấy trên hàm tạo? 

• Làm thế nào để tạo các đối tượng được coi là 'con' của các đối tượng cha?

Git là công cụ thiết yếu của mọi nhà phát triển để lưu trữ và duy trì các phiên bản mã và dự án trên các giải pháp kiểm soát phiên bản tập trung như GitHub , Bitbucket và GitLab. Các kỹ năng chỉ nên là một phần trong công việc hàng ngày của bạn bao gồm:

• Theo dõi các thay đổi bằng cách thêm, cam kết, đẩy và kéo

• Chiến lược phân nhánh và sáp nhập

• Xử lý xung đột hợp nhất

Node có thể là điều ngạc nhiên đối với nhiều người. Tại sao bạn cần biết cách làm việc với Node để trở thành một nhà phát triển React phía máy khách? Mặc dù bạn có thể kéo React vào bất kỳ tệp HTML nào, nhưng sẽ có nhiều gói khác ngoài kia cho phép bạn mở rộng thư viện React. Một nhà phát triển React JS thành thạo về các nút thường sẽ hiểu đầy đủ hơn về nhu cầu phát triển phía máy khách.

Các nhà phát triển React cần có hiểu biết vững chắc về npm registry  (Node Packet Manager registry). Đây là nơi các nhà phát triển phần mềm có thể tìm đến để lấy phần mềm giúp họ xây dựng phần mềm. Nghe có vẻ buồn cười, nhưng thực ra đó chính là npm: một kho lưu trữ đám mây cho các gói mà chúng ta gọi là dependency.

Yarn là trình quản lý gói được xây dựng để sử dụng sổ đăng ký npm. Yarn thực sự tối ưu hóa quy trình làm việc npm của bạn. Yarn và npm có phần cạnh tranh nhau ngày nay, nhưng sứ mệnh của Yarn là giải quyết rất nhiều vấn đề được chấp nhận trong hệ sinh thái Node/npm. npm đã làm mọi thứ có thể để tuân theo các mô hình và thực hành mà Yarn trình bày.