React dành cho người mới bắt đầu

Đố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:

npx create-react-app my-app
npm init react-app my-app
yarn create react-app my-app

Đây là cách nhanh và cũng là tốt nhất dành cho các bạn mới học React, 1 project React với tên “my-app” (tất nhiên các bạn có thể đổi tên nó) được tạo ra với đầy đủ các package cần thiết cho bạn.

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

function Links(props) {
  const [linkedin, setLinkedin] = useState("");
 
  return (
    <div>
      <h3>Links</h3>
      <a href={props.github}>{props.github}</a>
      <a href={linkedin}>{linkedin}</a>
    </div>
  );
}

Đoạn code trên là cú pháp cơ bản nhất trong React, thể hiện 1 component Links với props “github” và state “linkedin”.

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, …

import React, { useState, useEffect } from "react";
 
function Links(props) {
  const [timeRemaining, setTimeRemaining] = useState(1);
 
  useEffect(() => {
    if (timeRemaining === 0) {
      setTimeRemaining(10);
      return;
    }
  }, []);
}

Hãy giữ cho component của bạn “nhỏ vừa đủ”

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

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
 
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

Đừng lạm dụng state

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?

Nếu câu trả lời là có thì tốt nhất là không sử dụng thêm biến state lúc này.

const [option1, setOption1] = useState(false);
const [option2, setOption2] = useState(false);
const [option3, setOption3] = useState(false);
const [option4, setOption4] = useState(false);
const [option5, setOption5] = useState(false);

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.

const [state, setState] = useState(0);
...
setState(2020);
console.log(state); // 0

Kết bài

Sẽ còn nhiều thứ phải học để các bạn có thể thành thạo với React, hy vọng những gợi ý trên sẽ giúp các bạn có thể nhanh chóng và dễ dàng hơn từ lúc bắt đầu làm quen với thư viện này. Cảm ơn các bạn đã đọc bài viết, hẹn gặp mọi người trong các bài sắp tới của mình.

Bài viết được đăng trên blog TopDev

https://topdev.vn/blog/react-danh-cho-nguoi-moi-bat-dau/

anyway

khoaphambk.com