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