Site icon Khoa Phạm BK Blog

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

anyway

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

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

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”.

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:

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

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/

Exit mobile version