200Lab
Community

KHOÁ HỌC REACTJS – Xây dựng dự án Github clone với GraphQL, Apollo và Testing

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.

TÌM HIỂU NGAY
ĐỐI TƯỢNG KHOÁ HUẤN LUYỆN
  • Đã có kiến thức cơ bản về HTML, CSS, Javascript.
  • Đã có kinh nghiệm với ReactJS, hiểu các nguyên lý cơ bản.
  • Có đam mê với lập trình Web và muốn nắm bắt xu hướng công nghệ mới nhất.
  • Đang tìm kiếm các hướng phát triển Web với React trong tương lai.
  • 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.

MỤC TIÊU KHOÁ HUẤN LUYỆN

KIẾN THỨC ĐƯỢC CHIA SẺ TRONG KHÓA HỌC

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.
ReactJS_Topic Typescript

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.
next js logo 8FCFF51DD2 seeklogo.com

ĐẶC BIỆT: CHỈ CÓ TẠI 200LAB EDUCATION

Tư vấn giải pháp

Học viên được hỗ trợ tư vấn giải pháp xây dựng ứng dụng trong thực tế. Không chỉ là các nội dung trong khoá học, mà còn là các giải pháp cho công việc của bạn.

Khoá học Flutter
Khoá học Flutter

Hỗ trợ Update CV

Học viên được hỗ trợ để update CV, phù hợp với ReactJS. Các mentor sẽ hướng dẫn để bạn có được CV hấp dẫn nhất. Tăng tỉ lệ nhận việc với mức lương cao hơn.

Interview & xin việc

Bạn vẫn đang chưa tự tin hoặc chưa biết mình cần chuẩn bị những gì cho buổi phỏng vấn? Bạn sẽ được hỗ trợ interview thử và xin việc ReactJS.

Khoá học Flutter
DataAnalytic Benefit3

PHƯƠNG PHÁP GIẢNG DẠY

  • Hiện tại khoá training là Online 100% thông qua Google Meet.
  • Mentor (giảng viên) sẽ chia sẻ, hướng dẫn thông qua screen sharing.
  • Mentor (giảng viên) sẽ review source code thông qua Pull Request (Github).
  • Thời gian học: 16 buổi (2 tiếng/ buổi), 02 buổi/tuần.
  • 2 buổi event talkshow đặc biệt với đối tác của 200Lab Education.

ĐỘI NGŨ GIẢNG VIÊN
Who are Mentors?

2021 10 24 18.49.30

Huy Trần

Frontend Engineer at Toptal

Với kinh nghiệm làm việc tại nhiều công ty lớn nhỏ khác ở các nước như Singapore, Thái Lan, Mỹ trong 6 năm qua ở vị trí Frontend developer và có phỏng vấn các ứng viên cho công ty, mình có thể cung cấp những lời khuyên, kiến thức liên quan và cập nhật nhất cho công việc hiện tại và tương lại của các bạn.

photo 2022 04 25 15 11 06 modified

Linh Lê

Frontend Engineer

Là dev nữ ít ỏi trong ngành được nhận xét có khả năng học hỏi tốt mình muốn chia sẻ kinh nghiệm của mình để có thể giúp các bạn phát triển hơn. Mình mong các bạn đến với khoá học không chỉ được bổ sung kiến thức về mặt kỹ thuật mà còn cả về kỹ năng mềm, cách giải quyết vấn đề trong công việc và định hướng trong nghề. Hy vọng sẽ được cùng đồng hành với các bạn.

2021 10 18 15.26.15 cropped

Nhàn Thái

Frontend Architect tại Sutrix Solutions

Với hơn 6 năm trong ngành Web Development, làm việc với rất nhiều dự án Web từ CMS đến Single Page App và cả Hybrid app. Mình tin sẽ có thể giúp bạn hiểu và làm việc tốt với Frontend nói chung và ReactJS nói riêng.

2021 10 25 10.32.34 modified

Tín Phạm

Frontend Engineer at Ahamove

Chào các bạn, mình là Tín. Với hơn 2 năm làm việc về Back-end và đặc biệt là Front-end (ReactJS), cùng với kinh nghiểm trải qua các dự án. Hy vọng mình có thể đồng hành cùng các bạn trong khoá học để cùng nhau tìm hiểu và phát triển các kỹ năng về ReactJS.

download

Hẹn gặp lại các bạn trong khoá học

THÔNG TIN & QUYỀN LỢI SAU KHÓA HỌC

  • Khoá học tổng cộng 16 buổi
  • Thời gian học: 20h00 – 22h00, T2 – T5 hằng tuần.
  • Bạn vẫn có thể THAM GIA HỎI ĐÁP cùng cộng đồng học viên và giảng viên 200Lab.
  • Bạn được xem lại video và kiến thức được CẬP NHẬP LIÊN TỤC trên hệ thống e-learning của 200Lab.
  • Bạn được cập nhập tất cả các khóa MINI COURSE liên quan đến khóa học trong tương lai.

ĐĂNG KÝ NGAY HÔM NAY

6,400,000đ 7,900,000đ

  • GIẢM 20% + 5 BỘ UI tuyệt đẹp khi đăng ký học vào dịp lễ (30/4 – 1/5) này.
  • Tặng kèm EBOOK & CHEAT SHEET các để đào sâu kiến thức.
ĐĂNG KÝ NGAY

KHÁCH HÀNG VÀ ĐỐI TÁC CỦA 200LAB

logo-200lab-education

THEO DÕI CHÚNG TÔI

Facebook-f Youtube Instagram Tiktok

Khóa học

Liên hệ

  • Hotline: 0938852108
  • Email: edu@200lab.io

Thông tin công ty

  • Công ty TNHH công nghệ 200LAB
  • MST: 0317035178
  • 9A Phạm Văn Hai, P1, Tân Bình, TP.HCM
©200Lab Education. All Rights Reserved.