, January 27, 2022

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

ReactJS Tutorial for Beginners Phần 2

  • Đăng bởi  Groot
  •  Dec 12, 2021

  •   3 min reads
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:

  • 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

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.

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

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.

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

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é!

Bài viết cùng seri

Bài viết liên quan

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
Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 4

Trong phần 4 của series này, chúng ta sẽ tiếp tục hoàn thiện phần Guest Home Page . Lần này, chúng ta sẽ bắt tay vào code phần FAQs component, thực hiện config router để redirects qua lại các page nhé. Cùng bắt đầu thôi 😉....

Netflix Clone với ReactJS, Styled Components và Firebase (Firestore & Auth) - Phần 4
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.