kiến thức React cho người mới bắt đầu: Cách tạo một ứng dụng từ a-z

JordanPham said:

1. Lời nói đầu

Hello World.
Nhận thấy trong box Lập trình có nhiều anh chị mới bắt đầu ở entry level nên tôi muốn đóng góp một ít công sức để viết ra và chia sẻ.
Hôm nay trong loạt series hướng dẫn, tôi sẽ đề cập về những nền tảng React cho người mới bắt đầu React for beginners - Fundamentals.
Hy vọng sẽ giúp ích cho những anh chị mới, tìm kiếm sự thành công với mức lương $ 1.000 đầu tiên của mình. Nếu có ích, hãy like và để lại comment.

2. Tại sao là React?

Với những anh chị mới chưa biết bắt đầu từ đâu hẳn sẽ có câu hỏi này.
Đầu tiên chúng ta sẽ là người tạo ra những trang web và ứng dụng applications.
Ví dụ websites: google.com, zing.vn, youtube.com.
Ví dụ applications: ứng dụng Vietcombank, game Angry Birds, hay ứng dụng sách nói Fonos.

Bên trong những ứng dụng này, chúng ta sẽ quan tâm đến hai phần.

• Nội dung, giao diện, đường link, hình ảnh, video, icons, etc. Nói chung là những gì show ra trước mặt của chúng ta. Người ta gọi đó là User Interface UI, cũng có thể được gọi là FrontEnd, front nghĩa là phía trước.
• Có một tảng băng chìm lớn hơn, diễn ra đằng sau khi chúng ta lướt web. Đó có thể là dữ liệu - data chúng ta nhập vào, thông tin đăng nhập mà chúng ta lưu - authentification, phân quyền chúng ta có thể làm gì - authorization. Nói tóm là những gì chạy đằng sau, những gì server làm, còn được gọi là BackEnd.

React giải quyết vấn đề đầu tiên, là User Interface.

Các bạn cũng có thể có câu hỏi, tại sao không dùng Wordpress hoặc những công cụ làm website nhanh chóng, chỉ cần kéo và thả drag-and-drop, tiện lợi, không cần học, đơn giản. Well, React có những thế mạnh như sau:

• Đầu tiên, hệ thống files theo dạng modulars, có là có thể lắp ghép lại với nhau, người ta gọi là components. Có thể hiểu một component là một chức năng và mình có thể sử dụng lại khi cần thiết, không phải viết lại reusable.
• Ví dụ: website news.zing.vn có 1.000 bài viết. Nếu sử dụng Wordpress, ta phải code 1.000 files khác nhau và phải code lại từng trang một. Nếu muốn thay đổi, cập nhật, hoặc bảo trì, ta phải làm lần lượt 1.000 files khác nhau. Việc này vô cùng tốn kém thời gian và tiền bạc.
• Ngược lại, React tạo ra một website tĩnh static website. Các bạn có thể hình dung website là một cái khung frame của một ngôi nhà, có các trụ components là cố định không đổi. Muốn tạo 1.000 bài viết khác nhau, chỉ đơn giản là thay đổi phần dữ liệu data bên trong, còn cái khung thì giữ nguyên. Việc này tiết kiệm rất nhiều công sức khi muốn chỉnh sửa và bảo trì.

Để hiểu rõ hơn sự khác biệt giữa React và những công cụ tools làm website đơn giản, kéo và thả, drag-and-drop, anh chị hãy đọc thêm bài viết sau: https://www.mindbowser.com/react-vs-wordpress/

3. Set up môi trường làm việc (dành cho MacOS)

- Đầu tiên, anh chị sẽ cần một nơi để viết code gọi là code editor. Người ta đã nghĩ ra nhiều công cụ khác nhau để giúp việc viết code trở nên thoải mái, dễ dàng, và thuận tiện. Một trong số đó là Visual Studio Code được rất nhiều người yêu thích. VS Code là một semi-IDE, Intergrated Development Enviroment, nôm na là một nơi anh chị có thể viết code, chạy thử, chỉnh sữa lỗi fix bugs trên đó. Để tải về và cài đặt, hãy truy cập vào https://code.visualstudio.com/download

- Tiếp theo, mở Terminal được tích hợp sẵn built-in trong VS Code, sử dụng tổ hợp phím tắt Ctrl+Shift+`. Terminal kiểu gần giống như hệ điều hành MS-Dos ngày xưa anh chị học, là nơi để thực thi một số lệnh, ví dụ như cd change directory để thay đổi vị trí thư mục, ls để liệt kê file, mkdir make directory để tạo thư mục.

- Tại Terminal, chúng ta sẽ sử dụng npm node package manager để bắt đầu dự án: npx create-react-app {tên ứng dụng} sau đó hit enter. React sẽ tự động tải về và cài đặt một số thư mục để giúp các anh chị code, có thể kể đến là node_modules, public, src, .gitignore, package-lock.json, package.json.

- Sẽ có một số thư mục và files quan trọng, anh chị cần nhớ khi làm việc. Đó là ./public/index.html, ./src/App.js, ./src/App.css, và ./package.json. App.js là root component, là ông tổ của mọi components. Anh chị có thể hình dung đơn giản nó là gốc cây, là nơi khởi thủy của mọi chức năng khác, từ nội dung website, comment, like & upvote cho đến thanh navigation bar. Còn file App.css sẽ đảm nhận vai trò làm đẹp, để trang trí cho page, căn lề chỉnh dòng, font & size và nhiều thứ khác. Nói chung, làm đẹp thì vào App.css, làm chức năng thì vào App.js.

- Ok, bây giờ chúng ta bắt tay vào xây dựng website từ những viên gạch đầu tiên nào.

4. Xây dựng tính năng

- Mục tiêu của chúng ta là xây dựng một trang web. Một website thông thường sẽ có trang chủ Home Page, thông tin về chủ website và dịch vụ họ cung cấp About Us, và danh sách những bài viết Articles List. Ok here we go.

- Tạo Home Page và About Us
https://voz.vn/t/react-cho-nguoi-moi-bat-dau-cach-tao-mot-ung-dung-tu-a-z.627852/post-20361582

- Tạo Navigation Bar và cập nhật vào root component App.js
https://voz.vn/t/react-cho-nguoi-moi-bat-dau-cach-tao-mot-ung-dung-tu-a-z.627852/post-20361724

- Tạo Article Page để hiển thị thông tin website và Not Found Page khi URLs are invalid
https://voz.vn/t/react-cho-nguoi-moi-bat-dau-cach-tao-mot-ung-dung-tu-a-z.627852/post-20361748

- Tạo article-content để lưu thông tin tất cả bài viết của anh chị
https://voz.vn/t/react-cho-nguoi-moi-bat-dau-cach-tao-mot-ung-dung-tu-a-z.627852/post-20399068

- Tạo Articles List Page để hiển thị danh sách tất cả những bài viết của website
https://voz.vn/t/react-cho-nguoi-moi-bat-dau-cach-tao-mot-ung-dung-tu-a-z.627852/post-20465761

Click to expand...

JordanPham said:

1. Lời nói đầu

Hello World.
Nhận thấy trong box Lập trình có nhiều anh chị mới bắt đầu ở entry level nên tôi muốn đóng góp một ít công sức để viết ra và chia sẻ.
Hôm nay trong loạt series hướng dẫn, tôi sẽ đề cập về những nền tảng React cho người mới bắt đầu React for beginners - Fundamentals.
Hy vọng sẽ giúp ích cho những anh chị mới, tìm kiếm sự thành công với mức lương $ 1.000 đầu tiên của mình. Nếu có ích, hãy like và để lại comment.

2. Tại sao là React?

Với những anh chị mới chưa biết bắt đầu từ đâu hẳn sẽ có câu hỏi này.
Đầu tiên chúng ta sẽ là người tạo ra những trang web và ứng dụng applications.
Ví dụ websites: google.com, zing.vn, youtube.com.
Ví dụ applications: ứng dụng Vietcombank, game Angry Birds, hay ứng dụng sách nói Fonos.

Bên trong những ứng dụng này, chúng ta sẽ quan tâm đến hai phần.

• Nội dung, giao diện, đường link, hình ảnh, video, icons, etc. Nói chung là những gì show ra trước mặt của chúng ta. Người ta gọi đó là User Interface UI, cũng có thể được gọi là FrontEnd, front nghĩa là phía trước.
• Có một tảng băng chìm lớn hơn, diễn ra đằng sau khi chúng ta lướt web. Đó có thể là dữ liệu - data chúng ta nhập vào, thông tin đăng nhập mà chúng ta lưu - authentification, phân quyền chúng ta có thể làm gì - authorization. Nói tóm là những gì chạy đằng sau, những gì server làm, còn được gọi là BackEnd.

React giải quyết vấn đề đầu tiên, là User Interface.

Các bạn cũng có thể có câu hỏi, tại sao không dùng Wordpress hoặc những công cụ làm website nhanh chóng, chỉ cần kéo và thả drag-and-drop, tiện lợi, không cần học, đơn giản. Well, React có những thế mạnh như sau:

• Đầu tiên, hệ thống files theo dạng modulars, có là có thể lắp ghép lại với nhau, người ta gọi là components. Có thể hiểu một component là một chức năng và mình có thể sử dụng lại khi cần thiết, không phải viết lại reusable.
• Ví dụ: website news.zing.vn có 1.000 bài viết. Nếu sử dụng Wordpress, ta phải code 1.000 files khác nhau và phải code lại từng trang một. Nếu muốn thay đổi, cập nhật, hoặc bảo trì, ta phải làm lần lượt 1.000 files khác nhau. Việc này vô cùng tốn kém thời gian và tiền bạc.
• Ngược lại, React tạo ra một website tĩnh static website. Các bạn có thể hình dung website là một cái khung frame của một ngôi nhà, có các trụ components là cố định không đổi. Muốn tạo 1.000 bài viết khác nhau, chỉ đơn giản là thay đổi phần dữ liệu data bên trong, còn cái khung thì giữ nguyên. Việc này tiết kiệm rất nhiều công sức khi muốn chỉnh sửa và bảo trì.

Để hiểu rõ hơn sự khác biệt giữa React và những công cụ tools làm website đơn giản, kéo và thả, drag-and-drop, anh chị hãy đọc thêm bài viết sau: https://www.mindbowser.com/react-vs-wordpress/

3. Set up môi trường làm việc (dành cho MacOS)

- Đầu tiên, anh chị sẽ cần một nơi để viết code gọi là code editor. Người ta đã nghĩ ra nhiều công cụ khác nhau để giúp việc viết code trở nên thoải mái, dễ dàng, và thuận tiện. Một trong số đó là Visual Studio Code được rất nhiều người yêu thích. VS Code là một semi-IDE, Intergrated Development Enviroment, nôm na là một nơi anh chị có thể viết code, chạy thử, chỉnh sữa lỗi fix bugs trên đó. Để tải về và cài đặt, hãy truy cập vào https://code.visualstudio.com/download

- Tiếp theo, mở Terminal được tích hợp sẵn built-in trong VS Code, sử dụng tổ hợp phím tắt Ctrl+Shift+`. Terminal kiểu gần giống như hệ điều hành MS-Dos ngày xưa anh chị học, là nơi để thực thi một số lệnh, ví dụ như cd change directory để thay đổi vị trí thư mục, ls để liệt kê file, mkdir make directory để tạo thư mục.

- Tại Terminal, chúng ta sẽ sử dụng npm node package manager để bắt đầu dự án: npx create-react-app {tên ứng dụng} sau đó hit enter. React sẽ tự động tải về và cài đặt một số thư mục để giúp các anh chị code, có thể kể đến là node_modules, public, src, .gitignore, package-lock.json, package.json.

- Sẽ có một số thư mục và files quan trọng, anh chị cần nhớ khi làm việc. Đó là ./public/index.html, ./src/App.js, ./src/App.css, và ./package.json. App.js là root component, là ông tổ của mọi components. Anh chị có thể hình dung đơn giản nó là gốc cây, là nơi khởi thủy của mọi chức năng khác, từ nội dung website, comment, like & upvote cho đến thanh navigation bar. Còn file App.css sẽ đảm nhận vai trò làm đẹp, để trang trí cho page, căn lề chỉnh dòng, font & size và nhiều thứ khác. Nói chung, làm đẹp thì vào App.css, làm chức năng thì vào App.js.

- Ok, bây giờ chúng ta bắt tay vào xây dựng website từ những viên gạch đầu tiên nào.

4. Xây dựng tính năng

- Mục tiêu của chúng ta là xây dựng một trang web. Một website thông thường sẽ có trang chủ Home Page, thông tin về chủ website và dịch vụ họ cung cấp About Us, và danh sách những bài viết Articles List. Ok here we go.

- Tạo Home Page và About Us
https://voz.vn/t/react-cho-nguoi-moi-bat-dau-cach-tao-mot-ung-dung-tu-a-z.627852/post-20361582

- Tạo Navigation Bar và cập nhật vào root component App.js
https://voz.vn/t/react-cho-nguoi-moi-bat-dau-cach-tao-mot-ung-dung-tu-a-z.627852/post-20361724

- Tạo Article Page để hiển thị thông tin website và Not Found Page khi URLs are invalid
https://voz.vn/t/react-cho-nguoi-moi-bat-dau-cach-tao-mot-ung-dung-tu-a-z.627852/post-20361748

- Tạo article-content để lưu thông tin tất cả bài viết của anh chị
https://voz.vn/t/react-cho-nguoi-moi-bat-dau-cach-tao-mot-ung-dung-tu-a-z.627852/post-20399068

- Tạo Articles List Page để hiển thị danh sách tất cả những bài viết của website
https://voz.vn/t/react-cho-nguoi-moi-bat-dau-cach-tao-mot-ung-dung-tu-a-z.627852/post-20465761

Click to expand...

Nanatu said:

Bác có khóa react nào dạy ổn k ạ, cho e xin link với

Click to expand...

NhanThucLechLac said:

Mì ăn liền dạo này hơi nhiều. Fen muốn khác đi và hay hơn thì tạo 1 project bằng npm luôn chứ k dùng cli của thằng react, như thế sẽ dần dần giải thích được react nó dựa vào đâu để hoạt động, nó hoạt động thế nào,...

Click to expand...

Hello.World said:

hi các bác, e đang tự học và đang làm 1 website bán hàng: database dùng mongodb, backend e build đơn giản bằng nodejs, frontend thì e làm bằng reactjs + redux.
e đang làm phần admin board để quản trị user, product, categories gồm mấy chức năng cơ bản như xem, thêm, sửa, xoá. Đến phần update thì e gặp vấn đề:

1. Khi submit dispatch actions thành công và server đã cập nhật đã trả về data nhưng react lại không re-render để cập nhật state từ store của redux.

2. Bình thường nếu vào từ pages Categories để xem danh sách danh mục rồi thêm, sửa hoặc xoá danh mục thì không có vấn đề, do data đã được get từ pages trước đó là Categories. Nhưng khi vào thẳng link Add hoặc Update Category, ví dụ như: "http://localhost:3000/categories/635b59d7934596f6fb3af548", do k đc get đc data trước đó nên trong mỗi pages Add hoặc Update Category e đều phải chạy hàm getCategories() để get data, có cách nào khắc phục vấn đề này không ạ?

Văn e hơi lủng củng mong các bác giúp đỡ. Ở dưới là đoạn code của pages UpdateCategory, do e thấy page AddCategory và UpdateCagegory chung form nên e tạo 1 form component r truyền thẳng state xuống đó luôn.

JavaScript:

import FormCategory from "../../../components/FormCategory/FormCategory";
import "./update-category.scss";
import { useEffect, useState } from "react";
import storage from "../../../firebase";
import { ref, uploadBytesResumable, getDownloadURL, deleteObject } from "firebase/storage";
import { getCategories, updateCategory } from "../../../redux/apiCalls";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";

const UpdateCategory = () => {
  const { id } = useParams();
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const [inputs, setInputs] = useState({
    name: '',
    desc: '',
    slug: '',
    isActive: false
  });
  const [file, setFile] = useState({});
  const [tempURL, setTempURL] = useState("");
  const categories = useSelector((state) => state.category.categories);
  const category = categories.filter(item => item._id === id)[0];

  useEffect(() => {
    getCategories(dispatch);
    if (category) {
      setInputs({
        name: category.name,
        desc: category.desc,
        slug: category.slug,
        isActive: category.isActive
      });
      setTempURL(category.img);
    }
  }, [categories.length]);

  const handleOnChange = (e) => {
    if (e.target.type === "checkbox") {
      setInputs({ ...inputs, [e.target.name]: e.target.checked });
    } else {
      setInputs({ ...inputs, [e.target.name]: e.target.value });
    }
  };

  const updateImage = () => {
    return new Promise((resolve, reject) => {
      const fileName = new Date().getTime() + file.name;
      const storageRef = ref(storage, fileName);
      const uploadTask = uploadBytesResumable(storageRef, file);

      // Register three observers:
      // 1. 'state_changed' observer, called any time the state changes
      // 2. Error observer, called on failure
      // 3. Completion observer, called on successful completion
      uploadTask.on('state_changed',
        (snapshot) => {
          // Observe state change events such as progress, pause, and resume
          // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
          const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        },
        (error) => {
          // Handle unsuccessful uploads
        },
        async () => {
          // Handle successful uploads on complete
          // For instance, get the download URL: https://firebasestorage.googleapis.com/...
          const downloadURL = await getDownloadURL(uploadTask.snapshot.ref);
          console.log(downloadURL);
          resolve(downloadURL);
          delImgFireBase();
        }
      );
    });
  };

  const delImgFireBase = () => {
    // Create a reference to the file to delete
    const desertRef = ref(storage, category.img);
    console.log("category img", category.img)
    // Delete the file
    deleteObject(desertRef).then(() => {
      console.log("xoa thanh cong", category.img);
    }).catch((error) => {
      console.error(error);
    });

  }

  const handleOnSubmit = async () => {
    const imgURL = tempURL ? tempURL : await updateImage();
    const updatedCategory = {
      ...inputs,
      img: imgURL,
    };
    updateCategory(dispatch, id, updatedCategory);
  };

  const handleCancel = () => {
    navigate("/categories");
  }
  return (
    <div className="update-category">
      <FormCategory
        file={file}
        setFile={setFile}
        tempURL={tempURL}
        setTempURL={setTempURL}
        inputs={inputs}
        handleOnChange={handleOnChange}
        handleOnSubmit={handleOnSubmit}
        handleCancel={handleCancel}
      />
    </div>
  );
};

export default UpdateCategory;

Click to expand...

datontien said:

Chia sẻ cho mọi người khóa react cho người mới bắt đầu (tải về nhé)

Spoiler: part 1

https://drive.google.com/file/d/1KZfM1GaRzvZ-xKDKlta5cgSTeGQofoVk/view

Spoiler: part 2

https://drive.google.com/file/d/1tNeQoWGo-k2G6ag3ZkulNZDQwUXijAu-/view

Click to expand...

TheWalk said:

Mình muốn lập server chơi cờ vây thì phải học những gì?

Click to expand...

buonnguqua7 said:

Node JS Express
Còn web client thì Cocos Creator
Chứ code client thuần JS thì nhọc

Click to expand...

TheWalk said:

Chào bạn, mình là người học qua Python , C#. Biết cơ bản về lập trình, if else v.v...

Hiện tại mình muốn làm một server chơi cờ vây, mình tạm hiểu có 3 phần cần phải làm đó là:

1. Giao thức mạng? Server Client
2. Giao diện
3. Logic (về luật cờ vây thì mình nắm rất rõ, sẽ biết cách code theo được)

Theo lộ trình mình nghĩ ra thì đầu tiên phải làm để hai bên có thể tự chơi trên cùng 1 máy tính, sau đó mới đưa lên mạng. Mình bị vướng phần server client đó, mình inbox hỏi thêm cho rõ được không? Rất mong bạn hỗ trợ.

Click to expand...

kingsmank20 said:

hơi gà css thì nên học react không các bác .Em đã học qua js rồi .Mấy cái project html css js thuần của em ,em css gà lắm nhìn xấu ạ =.=.Js thì em biết và làm một project nhỏ về cấu trúc mvc rồi ạ

Click to expand...

meohen2109 said:

Thoải mái đi bạn. Nhưng bạn vẫn phải luyện thêm css vì đi làm chắc chắn phải đụng vào.

Click to expand...

chiyeuemthoi said:

CSS đến level nào thì có thể tự tin học React à bác

Click to expand...

chiyeuemthoi said:

CSS đến level nào thì có thể tự tin học React à bác

Click to expand...

meohen2109 said:

Biết hết mặt cú pháp là được nhé.

Click to expand...