, January 26, 2022

0 kết quả được tìm thấy

Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 1


  •   4 min reads
Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 1

Hello các bạn, trong series về ReactJS hôm trước, chúng ta đã hoàn thành được Instagram clone app đơn giản, có authentication, create post rồi có thể comment vào các bài viết nữa. Nếu các bạn có hứng thú với ReactJS và biết một ít căn bản, muốn làm một app để luyện tay thì các bạn có thể tham khảo series "Hướng dẫn clone instagram với React JS và Firebase" tại đây nhé 😉

Còn hôm nay, mình sẽ mang đến cho các bạn một series mới về chuyên mục ReactJS, đó là series "Netflix Clone with ReactJS, Styled Components and Firebase (Firestore & Auth)". Đối tượng mà series này nhắm tới là những bạn đã nắm được các kiến thức cơ bản về ReactJS (useEffect, useState, useContext) ngoài ra các bạn cũng cần biết thêm khái niệm nâng cao của JS là HOF (Higher Order Fucntion) như: map, filter, reduce, và find.

Okie, Trong phần đầu tiên của series này, chúng ta sẽ setup project của chúng ta trước nhé. Nào bắt đầu thôi 😉.

I. Cấu trúc thư mục.

Folder structure hay cấu trúc thư mục của một project tưởng chừng như bình thường nhưng cũng quan trọng không kém. Một Folder structure được tối ưu sẽ giúp ta có thể dễ dàng mở rộng project một cách tốt nhất có thể.

Note: Không có Folder structure nào là thực sự chuẩn cả. Do đó bạn chỉ cần tổ chức Folder cho project của mình sao cho bạn nghĩ rằng nó hợp lý là được hoặc bạn cũng có thể tham khảo trên mạng cũng được.

Tất nhiên với project của chúng ta chỉ là một project để chúng ta "Luyện tay" thôi, do đó vấn đề về một Folder structure quá tối ưu cũng không phải là quan trọng.

Quay trở lại với project của chúng ta, thì Folder structure của nó sẽ được tổ chức như sau:

Folder structure

Note:

  • images: chứa những tài nguyên là hình ảnh.
  • videos: chứa những tài nguyên là video.
  • components: chứa những component của project.
  • hooks: chứa những hook custom của chúng ta.
  • helpers:  chứa những những fuction thường được tái sử dụng nhiều lần.
  • containers:  chứa những component có chức năng như một container.
  • pages: chứa các trang của project.
  • lib: chứa các thư viện cần thiết.
  • contexts: chứa các context của project.
  • ultis: chứa các function có thể share nhau giữa các pages.
  • constants: chứa các các hằng số, enum.
  • fixtures: chứa các data tĩnh của project.

II. Setup project.

Tạo một project có tên netflix-clone (bạn cũng có thể đặt tên tùy ý nhé 😁).

Nếu các bạn sử dụng npm thì sử dụng câu lệnh:

npm init react-app netflix-clone,

Nếu các bạn sử dụng npx thì sử dụng lệnh:

npx create-react-app netflix-clone

Còn nếu bạn sử dụng yarn thì sử dụng lệnh:

yarn create react-app netflix-clone

Okie! Sau khi tạo project xong, chúng ta tiến hành install các package/lib cần thiết cho project của chúng ta.

  • Đầu tiên là styled component:
# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

Bạn có thể đọc thêm về styled component tại trang chủ của nó tại đây.

  • Tiếp theo là install firebase:
# with npm
npm install firebase

# with yarn
yarn add firebase

Bạn có thể đọc thêm về cách triển khai firebase cho web tại đây.

  • Tiếp đến là install lib fuse.js: Đây là một lib tìm kiếm mạnh mẽ và nhẹ được xây dựng để xử lý tìm kiếm trong giao diện người dùng. Thư viện sử dụng một kỹ thuật được gọi là tìm kiếm mờ , tìm các chuỗi gần bằng với một mẫu nhất định thay vì chỉ các kết quả khớp chính xác.
# with npm
npm install --save fuse.js

# with yarn
yarn add fuse.js

Bạn có thể xem thêm cách cài đặt và sử dụng fuse.js tại đây.

  • Cuối cùng là normalize.css: nó có tác dụng làm cho các trình duyệt hiển thị tất cả các element một cách nhất quán hơn và phù hợp với các tiêu chuẩn hiện đại.
# with npm
npm install normalize.css

# with yarn
yarn add normalize.css

Bạn có thể đọc thêm về normalize.css tại đây.

Okie! Sau khi install hết đống ở trên, ta run thử project của chúng ta xem có work không nhé 😁.

# with npm
npm start

# with yarn
yarn start
First run react project

Okie! Vẫn chạy ngon lành nhé 😁!

III. Tổng kết.

Như vậy, phần đầu của series này, chúng ta đã setup thành công project cũng như khái quát folder structure của project sẽ trông như thế nào. Trong phần tiếp theo chúng ta sẽ tạo một số data tĩnh, tạo một số component đầu tiên sử dụng styled component nhé 😉, See u again!

Bài viết cùng seri

Bài viết liên quan

ReactJS Tutorial for Beginners Phần 2

Trong bài viết này chúng ta sẽ đi qua năm nội dung đầu tiên của tutorial...

ReactJS Tutorial for Beginners Phần 2
ReactJS vs React Native - Gà cùng một mẹ liệu có giống nhau?

Bạn có đang rối giữa ReactJS vs React Native? Nên chọn cái nào thì tốt hơn? Có thể tái sử dụng code của ReactJS cho React Native hay không? Hãy khám phá câu trả lời thông qua bài viết so sánh ReactJS vs React Native này bạn nhé!...

ReactJS vs React Native - Gà cùng một mẹ liệu có giống nhau?
Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 7

Nối tiếp phần 6 của series, trong phần này, chúng ta sẽ bắt tay vào code Sign Up page,config lại phần router để đáp ứng được vấn đề Authentication kèm theo tạo custom hook để listening for Authentication. Không dài dòng nữa, Chúng ta bắt đầu thôi 😁....

Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 7
Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 6

Trong phần này, chúng ta sẽ config React Context firebase cho project của chúng ta, sau đó tạo Sign In Page và apply Authentication màfirebase cung cấp cho project của chúng ta nhé. Bắt đầu thôi 😉!...

Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 6
Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 5

Trong phần 5 này, chúng ta sẽ hoàn thiện Guest Home Page và config để connect với firebase, chuẩn bị cho các phần tiếp theo nhé 😉....

Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 5
You've successfully subscribed to 200Lab Blog
Great! Next, complete checkout for full access to 200Lab Blog
Xin chào mừng bạn đã quay trở lại
OK! Tài khoản của bạn đã kích hoạt thành công.
Success! Your billing info is updated.
Billing info update failed.
Your link has expired.