daipt
Well-known member
Đối với bất kỳ bạn lập trình viên mới nào thì React hiện tại đang là một thư viện JavaScript được sử dụng rộng rãi, được phát triển và duy trì bởi Meta (tiền thân là Facebook). React đã trở thành một thư viện front-end được ưa chuộng nhất và lên tục được phát triển về cả mức độ phổ biến và tầm ảnh hưởng của mình.
Để cho các bạn mới bắt đầu tiếp cận với thế giới React một cách thuận tiện nhất, mình có tổng hợp một số các hướng dẫn, gợi ý dành cho các bạn trong bài viết này hôm nay. Chúng ta cùng bắt đầu nhé
Sử dụng Create React App để khởi tạo projects
Một trong những chức năng đơn giản mà hiệu quả nhất của React là khả năng tạo ra một dự án mới bằng một dòng lệnh duy nhất: sử dụng Create React App. Bạn có thể chạy 1 trong 3 dòng lệnh dưới đây:
Sau khi cài đặt, chúng ta có thể ngay lập tức chạy ứng dụng của mình ở chế độ development bằng lệnh: “npm start” hoặc “fiber start”, cổng (port) mặc định sẽ là 3000, thậm chí nó còn tự động mở trình duyệt lên và chạy ứng dụng vừa được tạo ra.
Tìm hiểu những cú pháp cơ bản
React là thư viện thân thiện với lập trình viên, hãy bắt đầu học và nắm chắc những khái niệm dưới đây, bạn có thể tự tin trong việc viết code React:
Thực tiễn trong các dự án React, component nên được chia càng nhỏ các tốt về mặt chức năng và không nên bị trừu tượng hóa quá mức. Theo kinh nghiệm của mình, hãy bắt đầu từ App component ở top (bao trọn cả tất cả các components khác), sau đó chia nhỏ dần các thành phần giao diện nhỏ hơn đến mức chức năng. Điều này sẽ giúp ứng dụng của bạn:
Một trong những sai lầm lớn mà các bạn mới làm React hay gặp phải là việc tạo ra quá nhiều biến state không cần thiết trong các trường hợp mà chỉ cần sử dụng props kết hợp với logic có điều kiện là đủ. Chúng ta đều biết mỗi khi biến state thay đổi thì component sẽ thực hiện việc re-render lại, và khi bạn tạo ra quá nhiều biến state trong 1 component cũng đồng nghĩa với việc có thêm nhiều “nguồn tác động” đến việc cập nhật hiển thị component.
Hãy xem xét việc nên hay không nên thêm 1 biến state mới vào 1 component, có 1 vài yếu tố các bạn có thể cân nhắc
Tránh các lỗi không đồng bộ
Khi bạn sử dụng state trong React, luôn luôn phải để ý rằng việc setState (thay đổi giá trị state) là bất đồng bộ. Điều đó có nghĩa là biến state sẽ không thay đổi ngay lập tức mà nó phải đợi việc re-render component. Để tránh các lỗi xảy ra do việc cập nhật dữ liệu 1 cách không đồng bộ, hãy tìm hiểu vòng đời của component trong React.
Thêm 1 lời khuyên nữa cho các bạn trong trường hợp này, hãy “bắt” sự kiện biến state thay đổi, thay vì “chờ” biến state đó thay đổi xong.
Để cho các bạn mới bắt đầu tiếp cận với thế giới React một cách thuận tiện nhất, mình có tổng hợp một số các hướng dẫn, gợi ý dành cho các bạn trong bài viết này hôm nay. Chúng ta cùng bắt đầu nhé
Sử dụng Create React App để khởi tạo projects
Một trong những chức năng đơn giản mà hiệu quả nhất của React là khả năng tạo ra một dự án mới bằng một dòng lệnh duy nhất: sử dụng Create React App. Bạn có thể chạy 1 trong 3 dòng lệnh dưới đây:
- npx create-react-app my-app
- npm init react-app my-app
- yarn create react-app my-app
Sau khi cài đặt, chúng ta có thể ngay lập tức chạy ứng dụng của mình ở chế độ development bằng lệnh: “npm start” hoặc “fiber start”, cổng (port) mặc định sẽ là 3000, thậm chí nó còn tự động mở trình duyệt lên và chạy ứng dụng vừa được tạo ra.
Tìm hiểu những cú pháp cơ bản
React là thư viện thân thiện với lập trình viên, hãy bắt đầu học và nắm chắc những khái niệm dưới đây, bạn có thể tự tin trong việc viết code React:
- Props: là 1 object được truyền vào 1 component, cho phép giao tiếp giữa các component bằng cách truyền tham số qua lại giữa component cha và component con
- State: là phần dữ liệu động bên trong component của bạn, nó có thể thay đổi theo thời gian thông qua tương tác của component với người dùng
- Components: bản chất là 1 function nhận đầu vào chính là props và trả về JSX (1 cú pháp mở rộng trong React để viết HTML). Components có khả năng mở rộng và tái sử dụng – đây cũng chính là đặc trưng và ưu điểm lớn nhất của React
- React Hooks: các function đặc biệt cho phép chúng ta “móc nối” vào các biến state bên trong components. Để sử dụng hook, trước tiên hãy import và gọi chúng bên trong component của bạn. Để làm quen, mình khuyên các bạn hãy tìm hiểu kỹ 2 hooks: useState và useEffect
- useState: sử dụng để truy cập và sửa đổi các biến state của components
- useEffect: sử dụng để thực hiện những side effect (tác động từ bên ngoài function chính) như: lấy dữ liệu, cập nhật các phần tử bên trong components, …
Thực tiễn trong các dự án React, component nên được chia càng nhỏ các tốt về mặt chức năng và không nên bị trừu tượng hóa quá mức. Theo kinh nghiệm của mình, hãy bắt đầu từ App component ở top (bao trọn cả tất cả các components khác), sau đó chia nhỏ dần các thành phần giao diện nhỏ hơn đến mức chức năng. Điều này sẽ giúp ứng dụng của bạn:
- Dễ dàng debug gỡ lỗi hơn
- Code bạn viết dễ hiểu hơn
- Cho phép tái sử dụng và khả năng mở rộng component tốt hơn
Một trong những sai lầm lớn mà các bạn mới làm React hay gặp phải là việc tạo ra quá nhiều biến state không cần thiết trong các trường hợp mà chỉ cần sử dụng props kết hợp với logic có điều kiện là đủ. Chúng ta đều biết mỗi khi biến state thay đổi thì component sẽ thực hiện việc re-render lại, và khi bạn tạo ra quá nhiều biến state trong 1 component cũng đồng nghĩa với việc có thêm nhiều “nguồn tác động” đến việc cập nhật hiển thị component.
Hãy xem xét việc nên hay không nên thêm 1 biến state mới vào 1 component, có 1 vài yếu tố các bạn có thể cân nhắc
- Component của bạn có tĩnh và không thay đổi hay không?
- Bạn có thể tính toán trước giá trị props theo logic có sẵn để tạo ra các trạng thái component mong muốn hay không?
Tránh các lỗi không đồng bộ
Khi bạn sử dụng state trong React, luôn luôn phải để ý rằng việc setState (thay đổi giá trị state) là bất đồng bộ. Điều đó có nghĩa là biến state sẽ không thay đổi ngay lập tức mà nó phải đợi việc re-render component. Để tránh các lỗi xảy ra do việc cập nhật dữ liệu 1 cách không đồng bộ, hãy tìm hiểu vòng đời của component trong React.
Thêm 1 lời khuyên nữa cho các bạn trong trường hợp này, hãy “bắt” sự kiện biến state thay đổi, thay vì “chờ” biến state đó thay đổi xong.