JordanPham
Senior Member
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.
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:
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 download VS code
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.
Lesson 1: tạo Home Page và About Us
Lesson 2: tạo Navigation Bar
Lesson 3: tạo Article Page và Not Found Page
Lesson 4: tạo Article Content
Lesson 5: tạo Articles List Page
Lesson 6: giới thiệu React Hooks
Lesson 7: làm việc với useState và useImmer
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.
- Websites: google, zing, youtube, facebook
- Applications: Vietcombank, game Angry Birds, hay ứng dụng sách nói Fonos.
- 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à Front-End, 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.
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ì.
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 download VS code
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.
Lesson 1: tạo Home Page và About Us
Lesson 2: tạo Navigation Bar
Lesson 3: tạo Article Page và Not Found Page
Lesson 4: tạo Article Content
Lesson 5: tạo Articles List Page
Lesson 6: giới thiệu React Hooks
Lesson 7: làm việc với useState và useImmer
Last edited: