--- title: "Hướng dẫn clone instagram với React JS và Firebase phần 1." description: "Trong bài viết này, chúng ta sẽ cùng nhau clone một trang mạng xã hội nỗi tiếng, là nơi chia sẽ hình ảnh và video của hàng trăm triệu người trên toàn thế giới, đó chính là Instagram. Chúng ta bắt đầu thôi 😁!" canonical: "https://200lab.io/blog/clone-instagram" published: "2021-09-19T02:45:27Z" updated: "2026-08-21T07:17:44Z" authors: ["TỪ QUỐC HƯNG"] tags: ["Javascript"] reading_minutes: 4 access: "public" --- Trong bài viết này, chúng ta sẽ cùng nhau clone một trang mạng xã hội nỗi tiếng, là nơi chia sẽ hình ảnh và video của hàng trăm triệu người trên toàn thế giới, đó chính là Instagram. Chúng ta bắt đầu thôi 😁! ## I. Tạo project với creat-react-app. Để bắt đầu với một project với ReactJS thường các công ty sẽ sử dụng **webpack**, tuy nhiên ở đây chúng ta tạo một project cá nhân và để học thì chỉ cần sử dụng lệnh `create-react-app` thôi nhé 😉. Nếu các bạn dùng `npm` hoặc `npx` thì sử dụng câu lệnh như dưới để tạo tự động một project ReactJS nhé 😉 ``` npm create-react-app instagram-clone npx create-react-app instagram-clone ``` **Lưu ý**: Để sử dụng các câu lệnh `npm` hoặc `npx` thì hãy chắc chắn rằng máy tính của bạn đã cài nodeJS. Nếu chưa bạn có thể vào [đây]() để tải về và cài đặt như bình thường thôi. ## II. Tạo app trên firebase Trong quá trình project đang được tạo chúng ta có thể tranh thủ vào **firebase **để setup luôn nhé 😁. Nếu chưa có tài khoản thì nhớ đăng ký luôn nha 😉. Dành cho bạn nào chưa biết thì firebase là một dịch vụ cơ sở dữ liệu theo thời gian thực, nó được cung cấp bởi ông lớn Google và hoạt động trên nền tảng điện toán đám mây. Nó giúp các lập trình phát triển nhanh các ứng dụng di động bằng cách đơn giản hóa các thao tác với cơ sở dữ liệu. Khi vào trang chủ của **firebase** nhấn vào cửa phần **Go to console** như hình: ![](https://assets.200lab.io/images/2024/12/05/firebase-01-84205797ede319af3049.webp) Sau đó bạn nhấn vào nút **Create a project** như hình: ![](https://assets.200lab.io/images/2024/12/05/firebase-02-4c270fa2e9d7bda36aa9.webp) Để tạo project ta có 3 step: - Step 1: Điền tên của project mà bạn muốn đặt và nhấn **Continue **để xong _step 1_ và sang _step 2_. ![](https://assets.200lab.io/images/2024/12/05/firebase-03-d5b71c56835c97a75f0a.webp) - Step 2:  nhấn **Continue **để sang _step 3_. ![](https://assets.200lab.io/images/2024/12/05/firebase-04-438eae138dd889a5cc38.webp) - Step 3:  Chọn **Default Account for Firebase** và nhấn **Create project** để hệt thống tự động tạo cho chúng ta. ![](https://assets.200lab.io/images/2024/12/05/firebase-05-1e8ed9aae40b61fd555c.webp) Sau khi cài đặt xong ta được như hình dưới: ![](https://assets.200lab.io/images/2024/12/05/firebase-06-1-027c585039ed8367c414.webp) Tiếp theo để setup firebase hosting ta nhấn vào button `` như hình: ![](https://assets.200lab.io/images/2024/12/05/firebase-07-12cf737d19c35ca9c2d6.webp) Ở phần này ta có 4 step như sau: - Step 1: Ta phải đăng ký app trước, **App nickname** là tên project mà bạn đặt lúc tạo. Sau khi nhập xong click vào **check box** và click tiếp **Register app** để tiến hành đăng ký và qua step 2. ![](https://assets.200lab.io/images/2024/12/05/firebase-08-1c999214841b6e237710.webp) - Step 2: Đây là phần SDK của firebase, ta sẽ cần để add project của chúng ta để có thể sử dụng được các services của firebase. Bước này ta click **Next**. ![](https://assets.200lab.io/images/2024/12/05/firebase-09-8915f9f0b42add95f089.webp) - Step 3: Ở bước này firebase cung cấp cho ta một lệnh `npm` để **install **toàn bộ các tool mà firebase cung cấp để thao tác với nó trong project của chúng ta. Sau khi cài đặt xong thì click **Next **nhé 😉. ![](https://assets.200lab.io/images/2024/12/05/firebase-010-058fd3757b60c1aff74a.webp) - Step 4: Ở đây là một vài hướng dẫn của firebase cung cấp cho việc deploy, ta chỉ cần click **Continue to console **để hoàn thành việc setup. ![](https://assets.200lab.io/images/2024/12/05/firebase-011-212a0fe011e23d66277d.webp) ## III. Chạy project lần đầu tiên Để run project, ta gõ lệnh `npm start` trong phần terminal và nhấn **enter** nhé. Sau khi chạy thành công ta sẽ có UI khởi đầu như hình nè: ![](https://assets.200lab.io/images/2024/12/05/first-time-run-project-16ba46bdeb04b1ed922c.webp) Đây là cấu trúc thư mục của project sau khi ta cài đặt thành công. ![](https://assets.200lab.io/images/2024/12/05/structure-folder-project-07b17c8c1b8bc3e89f1b.webp) ## IV. Tổng kết Trên đây là phần 1 của series clone instagram sử dụng ReactJS và Firebase, với phần đầu mình chỉ hướng dẫn các bạn setup một project ReactJS bằng lệnh `create-react-app` , đăng ký và tạo app trên firebase để có thể sử dụng và lưu trữ data sau này. Trong phần tiếp theo chúng ta sẽ bắt tay vào code để tạo header và tạo bài post đầu tiên nhé. Hy vọng bài viết này sẽ có ích với các bạn, cảm ơn các bạn đã đọc 🤗. ## Đọc thêm - [Event Loop là gì? Cơ chế hoạt động của Event Loop trong JavaScript](https://200lab.io/blog/event-loop-la-gi.md): Event Loop là một cơ chế cho phép xử lý các tác vụ bất đồng bộ trong JavaScript, sử dụng một vòng lặp vô tận để kiểm tra, quản lý các tác vụ. - [So sánh Golang và NodeJS chi tiết](https://200lab.io/blog/so-sanh-golang-vs-nodejs.md): Golang và NodeJS khác nhau như thế nào? Golang và Nodejs từ lâu đã trở thành chủ đề sôi nổi. Nodejs đã chiếm ưu thế trong một khoảng thời gian dài. Golang liệu có đủ sức thuyết phục để chuyển đổi? - [ReactJS Tutorial for Beginners Phần 2](https://200lab.io/blog/reactjs-tutorial-for-beginners-phan-2.md): 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 vs React Native - Gà cùng một mẹ liệu có giống nhau?](https://200lab.io/blog/reactjs-vs-react-native.md): 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é! - [Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 7](https://200lab.io/blog/netflix-clone-voi-reactjs-styled-components-va-firebase-firestore-auth-phan-7.md): 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 😁. - [Mọi bài viết chủ đề Javascript](https://200lab.io/blog/tags/javascript.md) Toàn bộ nội dung: https://200lab.io/llms.txt