Khoá Học ReactJS

Khoá học ReactJS

Khoá học ReactJS nâng cao sẽ giúp bạn tiếp cận đến những công nghệ mới và được quan tâm nhiều nhất hiện nay như: Apollo, GraphQL, Cypress,…

Khóa học không chỉ nâng cao kỹ năng lập trình của bạn mà còn giúp bạn code tốt hơn với chủ đề về Testing – một yêu cầu bắt buộc phải biết khi apply vào các công ty lớn.
Bạn Sẽ Học Được Gì Từ Khóa Học REACTJS 200Lab
✅ Nắm được những kỹ thuật để tối ưu React như useMemo, React.memo, React.lazy, Suspense.

✅ Có kinh nghiệm thực tiễn và hiểu được GraphQL trên client với Apollo.

✅ Hiểu rõ cách sử dụng Test để testing các dự án lớn.

✅ Có thể ứng tuyển vào các công ty với vị trí Mid – Senior Level React developer.

Nội dung khóa học REACTJS 200Lab

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

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