--- title: "ReactJS Tutorial for Beginners Phần 2" description: "Trong bài viết này chúng ta sẽ đi qua năm nội dung đầu tiên của tutorial" canonical: "https://200lab.io/blog/reactjs-tutorial-for-beginners-phan-2" published: "2021-12-12T05:00:00Z" updated: "2026-08-21T07:17:59Z" authors: ["Nguyên"] tags: ["Javascript"] reading_minutes: 3 access: "public" --- Trong bài viết này chúng ta sẽ đi qua năm nội dung đầu tiên của tutorial: - Tìm hiểu về ReactJS - Set up ReactJS, Storybook & CSS styled-component - Functional/Class Component & JSX code style - Làm việc với Icons, Grids - Set up React Router ## 1. Tìm hiểu về ReactJS Trong video này mình sẽ giới thiệu sơ qua những thông tin tổng quan về ReactJS [youtube: https://www.youtube.com/embed/nF7XrQSdypY?feature=oembed](https://www.youtube.com/embed/nF7XrQSdypY?feature=oembed) ### [Lịch sử ReactJS]() Website / Web page Interactive Website Web application: Angular, Ember, Polymer, React... ### [Demo Declarative & Imperative]() Trong video mình cũng demo cho các bạn thấy là ReactJS nó dễ dàng như thế nào so với việc không có ReactJS Chúng ta cũng sẽ tìm hiểu về Declarative và Imperative và mình cũng demo hai khái niệm này luôn. ### [Khi nào nên sử dụng ReactJS]() Sau khi bạn biết về Declarative và Imperative rồi thì có một câu hỏi được đặt ra là khi nào mình cần dùng React? React không phải là giải pháp cho tất cả mọi trường hợp. Mình chỉ sử dụng nó khi mình cần có một cái web application thôi. Một cái web application có những stage những flow chart rất là phức tạp thì mình nên dùng React. Còn nếu bạn chỉ muốn xây dựng một web page đơn giản giống như các trang báo chẳng hạn thì mình chỉ cần dùng HTML, CSS và JavaScript là đủ rồi. ## 2. Set up ReactJS, Storybook & CSS styled-component Trong phần này, ngoài việc hướng dẫn cho mọi người cách set up ReactJS, mình còn giới thiệu thêm cho các bạn cấu trúc của 1 dự án project structure sau khi khởi tạo là như thế nào, Storybook (tại sao phải cần sử dụng thư viện này & hướng dẫn cài đặt), giới thiệu CSS styled-component trong ReactJS. [youtube: https://www.youtube.com/embed/syqldIZIQMs?feature=oembed](https://www.youtube.com/embed/syqldIZIQMs?feature=oembed) ### Nội dung của video: [Set up ReactJS]() [Khởi tạo new project ReactJS]() [Tìm hiểu project structure của ReactJS]() [Phân tích và cấu trúc dự án Leave Management]() [Làm việc với Storybook]() [CSS styled-component trong ReactJS]() ## 3. Tìm hiểu Functional / Class Component & JSX code style Trong video này, chúng ta sẽ cùng nhau tìm hiểu những khái niệm cơ bản nhất khi làm việc với ReactJS đó là: Component, sự khác biệt giữa Functional / Class Component, JSX code style, props, và cuối cùng là CSS trong Javascript với styled-component [youtube: https://www.youtube.com/embed/xDBGrRkfAEE?feature=oembed](https://www.youtube.com/embed/xDBGrRkfAEE?feature=oembed) ### Component và styled components - Functional/Class component - JSX - Props - css in js với styled-components ## 4. Làm việc với Icons, Grids Trong video này, chúng ta sẽ tạo những component như là Icon, Grid dựa trên kiến thức component mà mình đã giới thiệu trong bước 2. Những component này được sử dụng để tạo nên những phần cơ bản của page. [youtube: https://www.youtube.com/embed/bKeQsdlK41k?feature=oembed](https://www.youtube.com/embed/bKeQsdlK41k?feature=oembed) ## 5. Set up React Router Trong video này, mình sẽ giới thiệu với các bạn về React Router, một trong giải pháp routing rất nổi tiếng và thông dụng của React [youtube: https://www.youtube.com/embed/A4UowJyPDH4?feature=oembed](https://www.youtube.com/embed/A4UowJyPDH4?feature=oembed) Bạn có thể tải các [tài liệu của tutorial tại đây]() và đọc tiếp phần 3 nhé! ## Đọ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 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 😁. - [Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 6](https://200lab.io/blog/checked-netflix-clone-voi-reactjs-styled-components-va-firebase-firestore-auth-phan-6.md): 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 😉! - [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