REACT JS LEARNING & ROADMAP

HOẠT ĐỘNG:

• Slack: Technetup on Slack - trao đổi về React JS, Javascript
• Offline: 2 tuần 1 lần trao đổi những cái thắc mắc và làm project.

1.ROADMAP

1.1 LEVEL

• [LEVEL 1-3]: Fresh React JS Developers
• [LEVEL 4-10]: Junior React JS Developere (trên 4 dự án thực hiện)
• [LEVEL 10-15]: React JS Developer (trên 10 dự án đã triển khai)
• [LEVEL 15-16]: Senior React JS Developer (trên 40 dự án - kinh nghiệm 3 năm đối với React JS)
• [LEVEL 16-N]: Master React JS Developer (React Lover, Code everywhere, everytime like as Ninja)

  Tương ứng với mỗi cấp level là danh sách các lý thuyết, thực hành cũng như dự án của chúng ta.

1.2 ỨNG DỤNG THỰC TIỄN

• [DEMO 1] - Ứng dụng web load dữ liệu các khóa học cơ bản từ 1 file JSON có sẵn
• [DEMO 2] - Ứng dụng web cho phép tìm kiếm tour/chuyến đi phượt
• [DEMO 3] - Ứng dụng web Blog đơn giản.

2. CHƯƠNG TRÌNH

2.0 REQUIRE BEFORE REACT JS (Những kiến thức bắt buộc phải biết)

• HTML cơ bản
• CSS cơ bản (CSS2 hoặc 3)
• Javascript cơ bản (ECMAScript 5)

2.1 PREPACK REACT JS (Những kiến thức cần nắm trước khi làm REACT JS)

• ECMAScript 6 (ES6)

• Babel

• Webpack

• NPM

• Pre-Pack REACTJS: phần Pre-Pack này hỗ trợ cho những ai chưa tìm hiểu và nắm 4 cái trên.

NPM

• NPM Source

BABEL & ES6

• Git Source chuyên về ES6

WEBPACK

• Git source chuyên về Webpack

2.2 REACT JS

<Level 0> CÀI ĐẶT & EDITOR:

• Cài đặt ReactJS
• Tạo 1 project đầu tiên với ReactJS
• Sử dụng NPM create-react-app của Facebook tạo reactjs project.
• Editor sử dụng để code React JS

<Level 1> Các kĩ thuật cơ bản trong React JS

• Routing: bất kỳ ứng dụng Client Side Application nào cũng cần có Routing [React-Router]
• Classes: React JS làm việc rất tốt với CLASS (do sử dụng ES6)
• PropType: kiểm tra thuộc tính
• Component: quản lý ReactJS với Components
• JSX: sử dụng và làm việc với JSX
• State & Props
• React Component Life Cycle
• React Router
• Fetch Data

<Level 2> Các kĩ thuật cần phải biết để xây dựng project React JS

• Flux
• Redux
• GraphQL
• Relay

[Level 3] Các kĩ thuật hỗ trợ trong React JS

• Lint JS
• JEST (Tool Test)(https://facebook.github.io/jest/docs/tutorial-react.html)

[Level 4] Hoàn chỉnh các dự án sử dụng React JS (khoảng 4 dự án)

• Project 1: Fetch data từ 1 API (Github)
• Project 2: Fetch data từ 1 API - nhiều feeds.
• Project 3: Fetch data từ 1 API - nhiều feeds - gom nhóm và tối ưu
• Project 4: Game Quiz - các câu hỏi về 1 lĩnh vực (1 câu hỏi - và chọn đáp án) - cái này ứng dụng thực tế cao ( làm bài app chứa dữ liệu các bài test Anh Văn / game đố vui / hỏi đáp vui / làm bài test tuyển dụng/...)
• Project 5: Shopping Cart đơn giản
• Project 6: Ứng dụng quản lý Blog đơn giản (= React * Redux)
• Project 7: Tạo 1 trang porfolio = React
• Project 8: Tạo 1 trang survey form - thu thập thông tin khách hàng.
• Project 9: Tạo 1 Media Library (chọn xem đơn giản với React)
• Project 10: Tạo ứng dụng Hybrid App kết hợp với Cordova (ko sử dụng React Native) để xài lại code React JS cho Mobile App luôn

[Level 5] React Native

• Làm quen và sử dụng các Component của React Native
• Cài đặt môi trường (Xcode, Android Studio)
• Sử dụng React Native Base
• Các Platform API
• Làm quen về Modules trong iOS và Android
• Debug và các lỗi thường gặp

BEGINNER

TOPICS

RESOURCES

• Awesome React

Tài liệu chính chủ

• React Documentation

3. VIDEO

• React Tutorial

4. CÁC PROJECT MẪU

REACT JS

• Ứng dụng Quiz Game nhỏ - đọc dữ liệu Quesion-Answer
• Ứng dụng tạo 1 Survey nhỏ trên website
• Ứng dụng React tạo Quiz các câu hỏi và trả lời
• Ứng dụng tạo Shopping Cart nhỏ với React
• Ứng dụng tạo 1 trang Porfolio với React + Redux

REACT NATIVE

• Ứng dụng đọc tin tức - nguồn từ các trang báo - Đọc dữ liệu từ các trang báo, hiển thị layout với React Native.