Git Product home page Git Product logo

react's Introduction

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

BABEL & ES6

WEBPACK

2.2 REACT JS

  • 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
  • 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
  • Flux
  • Redux
  • GraphQL
  • Relay

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

[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

Tài liệu chính chủ

3. VIDEO

4. CÁC PROJECT MẪU

REACT JS

REACT NATIVE

react's People

Contributors

nvminhtu avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.