5 Mẹo phát triển React cho người mới bắt đầu

React không phải là một ngôn ngữ lập trình, nó là một thư viện trên JavaScript . Đó là V của MVC của bạn , vì vậy nếu bạn xuất thân từ nền tảng JavaScript (Vue, Angular, jQuery hoặc bất cứ thứ gì), bạn sẽ không gặp phải bất kỳ trở ngại lớn nào.

Vì vậy, đây là mẹo của tôi cho những ai muốn học React:

Sử dụng IDE với linter .

React không phải là một ngôn ngữ lập trình, nó là một thư viện trên JavaScript . Đó là V của MVC của bạn , vì vậy nếu bạn xuất thân từ nền tảng JavaScript (Vue, Angular, jQuery hoặc bất cứ thứ gì), bạn sẽ không gặp phải bất kỳ trở ngại lớn nào.

Vì vậy, đây là mẹo của tôi cho những ai muốn học React:

 Sử dụng IDE với linter 

Hãy sử dụng nó nếu bạn muốn đồng nghiệp hoặc đối tác của mình giúp bạn gỡ lỗi mã của mình, nó sẽ tiết kiệm cho họ và BẠN rất nhiều thời gian. Mã tốt, người viết thư vui vẻ, đồng nghiệp vui vẻ và chủ nhân của bạn cũng sẽ vui sau khi nhìn thấy mã đẹp của bạn. Sử dụng một linter cụ thể cho một tiêu chuẩn mã để phát triển tốt hơn.

Tại sao sử dụng một tiêu chuẩn mã? tiêu chuẩn mã có nghĩa là mã gọn gàng. Nó đã làm cho cuộc sống của chúng tôi (của tôi) tốt hơn.

Trong các dự án của tôi, tôi sử dụng standard.js. Tại sao? Về cơ bản, nó không sử dụng dấu chấm phẩy (LOL), quá nhiều người mới bắt đầu đã phàn nàn về việc bỏ lỡ dấu chấm phẩy hàng ngày.

 Sử dụng ES6

Sử dụng ES6 (ECMAScript 2015) để được hỗ trợ tốt hơn nhiều tính năng mà JavaScript thông thường không có và khả năng đọc tốt hơn và tất nhiên là khả năng bảo trì. Nó có phạm vi thay đổi , các hàm mũi tên , các lớp và toán tử trải rộng .

Đó là tiêu chuẩn JavaScript mới, có rất nhiều hướng dẫn về React sử dụng ES6.

Sử dụng JSX

Có thể bạn đang tự hỏi tại sao sau khi tôi đề xuất ES6 và bây giờ tôi khuyên bạn nên sử dụng JSX, lý do là sự đơn giản của JSX. Trong phần này, tôi sẽ cung cấp cho bạn một vài đoạn mã ví dụ.

Đây là ví dụ về div trên HTML :

<div class = ”sidebar”> </div>

Trên React với JavaScrip t:

React.createElement ( 
  'div', 
  {className: 'sidebar'}, 
  null 
)

Và phản ứng với JSX :

<div className = "sidebar"> </div>

hoặc với các thẻ tự đóng :

<div className = "sidebar" />