Khóa Học ReactJS (GraphQL, Apollo) – Clone Github cùng 200lab

Khóa Học ReactJS (GraphQL, Apollo) – Clone Github cùng 200lab

Khóa Học ReactJS (GraphQL, Apollo) – Clone Github không chỉ là một khóa học, mà còn là một chuyến phiêu lưu vào lòng công nghệ thông tin, nơi bạn sẽ được khám phá những công nghệ mới nhất và được quan tâm nhất hiện nay như: Apollo, GraphQL, Cypress.

Với khóa học này, bạn sẽ học được:

Khóa học REACTJS 200Lab sẽ giúp bạn:

Hiểu rõ những kỹ thuật tối ưu React như useMemo, React.memo, React.lazy, Suspense.

Có kiến thức thực tiễn và sự am hiểu về GraphQL trên môi trường khách hàng bằng cách sử dụng Apollo.

Thấu hiểu cách sử dụng Kiểm thử để kiểm tra các dự án quy mô lớn.

Phát triển khả năng của bạn để có thể ứng tuyển vào các công ty với vị trí Trình độ Trung - Cao cấp của nhà phát triển React.Đừng bỏ lỡ cơ hội đăng ký khóa học REACTJS 200Lab ngay bây giờ để trở thành một nhà phát triển React chuyên nghiệp!

Danh sách bài học:

TOPIC 1: Tiêu điểm ngôn ngữ Typediv và giới thiệu tổng quan ReactJS 

Kiến thức cơ bản ngôn ngữ Typediv: Basic types (number, string, boolean, v.v), Function, Generic, Interface type.

Uni-Directional Data Flow.

State và cách quản lý State.

Hook, useReducer và middleware giống Redux.

TOPIC 2: Typediv và rendering trong React 

ReactJS_Topic 2 : TypeScript và Rendering

Cách định type để thay thế cho propTypes.

Làm việc với các type của HTML, DOM APIs.

Install và cài đặt 1 vài thư viện hay dùng + type của nó.

Lifecycle cho Functional Component vs Class Component.

Hiểu về Virtual DOM.

TOPIC 3: Lazy loading – code splitting – Memoization trong ReactJS 

Giới thiệu về React.lazy và Suspense.

Code splitting theo page với react-router.

Phân tích Bundle size.

Giới thiệu về kỹ thuật memoization.

React.memo và PureComponent.

Sử dụng useMemo và useCallbak trong functional component

ReactJS_Topic 3: lazy loading

TOPIC 4: Component design pattern 

ReactJS_Topic 4: Component design pattern

Giới thiệu về các component design pattern.

Phân tích và ví dụ cho từng loại: props, renderProps, HOC.

TOPIC 5: Tìm hiểu GraphQL và so sánh với REST API 

Giới thiệu về GraphQL, các khái niệm quan trọng: Query, Fragment, Mutation, Subdivion.

So sánh lợi hại với REST.

Giới thiệu qua Apollo và cách query bằng Insomnia.

ReactJS_Topic 5: Tìm hiểu GraphQL và so sánh với REST

TOPIC 6: Query và Lazy Query, React Query 

Query và Lazy Query

Giới thiệu cách query & lazy query.

Cách sử dụng và trường hợp sử dụng của 2 phương pháp này.

Refetch 1 query.

Polling.

React Query: Query cache, fetch data, stale time (Bonus).

TOPIC 7: Xây dựng chức năng Repository của Github 

Setup codebase.

Sử dụng Codegen để generate types.

Setup Apollo.

Build 2 pages về Repositories cho 1 user bất kỳ bao gồm: 1 list Repositories, 1 detail page thể hiện thêm thông tin (Pull Requests, Stars, etc).

Xây dựng Application 1

TOPIC 8: Sử dụng ApolloLink như Middleware cho ứng dụng 

ApolloLink như Middleware

Giới thiệu về ApolloLink.

Data Flow của 1 ApolloLink

Xử lý Error trong ApolloLink

Bonus: Mix REST API vào GraphQL

TOPIC 9: InMemoryCache & xây dựng chức năng Paging, Filter & Pull Requets

Cách Apollo quản lý cache.

Setup introspection, typePolicies.

Cách sử dụng fetchPolicy.

Áp dụng cache vào trong application.

Build hệ thống Pagination / filter cho Repository list + Pull Requests.

Bonus: So sánh tương đồng với Redux Cache thông thường

InMemoryCache

TOPIC 10: Mutation và updating UI 

Mutation và updating UI

Mutation trong GraphQL.

Update UI.

Optimistic Response.

Refetch Queries.

TOPIC 11: Testing Pyramid 

Sơ lược về testing pyramid.

Unit test với jest.

Integration test với jest.

Testing Pyramid

TOPIC 12: Sử dụng Mutation để create / close Pull Request 

Application 3

Sử dụng mutation để tạo Pull Request, Issue.

Update 1 Pull Request.

Star / Unstar 1 Repository.

Close Pull Request.

TOPIC 13: Unit test & Integration test 

Unit test & Integration test

Setup Cypress.

Giới thiệu Page Object Pattern.

Mock và test Apollo.

Setup jest / react-testing-library.

Demo 1 vài cách test trong jest.

800px Nextjs logo.svg

BONUS TOPICS: Giới thiệu NextJS 

Tìm hiểu NextJS .

Cách thức Render website trong NextJS.

Set up Routing website trong NextJS.

Dynamic import.