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