Khóa Học Reactjs Xây Dựng Dự Án Github Clone Với Graphql, Apollo Và Testing Cùng 200Lab

Nội dung khóa học:

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

Kiến thức cơ bản ngôn ngữ Typep: 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: Typep 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, Subpion.

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.