ZendVN - Học lập trình online

logo.png
thumb

Khóa học Lập trình ReactJS - JS Framework hướng dẫn học viên làm chủ ReactJS và sử dụng ReactJS trong các ứng dụng thực tế. Thông qua kiến thức của khóa học này, học viên hoàn toàn có thể tự tìm hiểu các Javascript Framework khác như Angular, VueJS, NextJS, NuxtJS

Các bạn phù hợp tham gia khóa học:

  • Những bạn đã có kiến thức cơ bản về Javascript, HTML, CSS, Javascript ES6 hoặc
    • đã học xong khóa học Lập trình Frontend Offline tại ZendVN hoặc
    • đã học xong khóa học Lập trình Frontend Online tại ZendVN
  • Sinh viên năm 3 năm 4 muốn tiếp cận với các Javascript Framework một cách bài bản.
  • Đã có kiến thức về JS Framework nhưng chưa vững, cần thực hành nhiều dự án thực tế.

    Hình thức học

    • Học viên được cấp tài khoản để xem các video đã được quay sẵn, rãnh lúc nào xem lúc đó
    • Học viên làm bài tập ở mỗi buổi và nộp cho người hướng dẫn, người hướng dẫn sẽ xem bài làm của học viên và quay video nhận xét trên bài làm đó
    • Trong quá trình học, học viên có thể trao đổi trực tiếp với người hướng dẫn qua group hỗ trợ, được chat hỗ trợ và teamview fix code
    5,600,000
    5,000,000
    4,800,000đ
    4,800,000đ
    5,000,000đ

    Hỗ trợ 24/7

    Group Zalo hỗ trợ 24/7 trực tiếp từ Giảng viên và Mentor.

    Projet và thực hành thực tế

    Cung cấp các tình huống thực hành, các project thực tế được lồng ghép vào nội dung học, áp dụng ngay vào công việc.

    Video Review

    Tất cả bài làm của bạn đều được giảng viên và mentor quay video review từng dòng code, giúp bạn hoàn thiện cách viết code và tối ưu code.

    Thời gian linh động

    Tốc độ học nhanh hay học chậm, học buổi sáng hay tối muộn, ... do học viên hoàn toàn quyết định.

    NỘI DUNG

    Chương trình học online này là sự kết hợp của các khóa học online trên ZendVN và sự kèm cặp trực tiếp từ người hướng dẫn. Chương trình học gồm hơn 1000 video và thời gian hơn 300 giờ trực tuyến, nội dung chi tiết của lộ trình học như sau:

    Phần 01

    Ôn tập về Javascript DOM và xử lí event trong Javascript thuần.

    Nhập môn ReactJs, cách cài đặt, nâng và giảm version trong mã nguồn ReactJs. Tìm hiểu về Semantic versioning.

    Tìm hiểu Babel, Webpack là gì?

    Cách sử dụng State và Props trong ReactJs.

    Kỹ thuật Props Down - Event Up trong ReactJs.

    Phần 02

    Tìm hiểu và ôn tập về ReactJs qua các video học ở nhà.

    Thực hành và làm việc với Array trong ReactJs.

    Tìm hiểu các cách Thêm, Xoá, Sửa thông qua các methods của ES6: map, filter, concat, sort, ... khi làm việc với Array.

    Hiểu cách ReactJs tối ưu hiệu suất ứng dụng với key.

    Cách tự xây dựng UI Components tối ưu và có khả năng tái sử dụng cao.

    Phần 03

    Tìm hiểu và ôn tập về ReactJs qua các video học ở nhà.

    Tìm hiểu về Redux và mô hình Redux cơ bản với Action, Reducer, Store, Dispatch.

    Kết hợp React với Redux bằng thư viện react-redux.

    Cách sử dụng Redux trong React Hooks.

    Luyện tập Pet Project sử dụng Redux kết hợp với React.

    Phần 04

    Tìm hiểu và ôn tập về ReactJs qua các video học ở nhà.

    Hiểu về khái niệm API. Cách tương tác với API.

    Học về Redux và mô hình Redux nâng cao với Middlewares và APIs.

    Cách xử lý bất đồng bộ (Asynchronous Programming) trong Javascript.

    Cách tổ chức mã nguồn chuẩn với Redux.

    Phần 05

    Tìm hiểu và ôn tập về ReactJs qua các video học ở nhà.

    Tìm hiểu React Router và áp dụng.

    Tìm hiểu React Router sử dụng trong React Hooks.

    Một số Patterns thường dùng (HOC, Custom Hooks, ...).

    Cách tổ chức mã nguồn cho Router trong dự án thực tế.

    Phần 06

    Xây dựng cấu trúc mã nguồn cho Project thực tế.

    Cài đặt hệ thống Back End vào máy tính cá nhân

    Cài đặt và kết nối Database với Back End

    Cấu hình port, domain tại máy tính cá nhân.

    Cách sử dụng Postman để gọi APIs.

    Phần 07

    Xây dựng chức năng Latest Articles

    Xây dựng chức năng Popular List

    Xây dựng chức năng Articles List

    Xây dựng tính năng Pagination phía Front End kết hợp với Back End thông qua APIs.

    Xử lý ngày giờ trong Javascript với thư viện DayJs.

    Phần 08

    Tìm hiểu về cơ chế bảo mật Token Based Authentication và Json Web Token ứng dụng trong ReactJs.

    Cách xử lý Form, Error Handling, Validate Form trong ReactJs và Javascript.

    Xây dựng tính năng Form Login, Form Register và Logout.

    Kỹ thuật duy trì trạng thái đăng nhập người dùng với token.

    Phần 09

    Xây dựng tính năng tìm kiếm theo từ khoá, tìm kiếm theo danh mục kết hợp với Router và Query String.

    Xây dựng Pagination cho kết quả tìm kiếm.

    Ứng dụng Custom Hooks. tối ưu Pagination có tính tái sử dụng cao.

    Hiện thực tính năng Highlight Search.

    Phần 10

    Xây dựng tính năng Menu đa cấp và tương tác với dữ liệu thật với Back End thông qua APIs.

    Kỹ thuật xử lí đệ quy dữ liệu trong Javascript với Array.

    Kỹ thuật xử lí render đệ quy Component trong ReactJs.

    Xây dựng tính năng bài viết chi tiết. Đổ dữ liệu dạng HTML.

    Phần 11

    Xây dựng tính năng Comments và Reply Comments.

    Cách xử lí dữ liệu cho Comments hai cấp.

    Ứng dụng Custom Hooks để xây dựng tính năng Pagination cho Parent Comment và Child Comment.

    Xây dựng tính năng thêm mới Comment kết hợp với xác thực người dùng.

    Phần 12

    Tìm hiểu về Ant Design và các UI Components.

    Cách sử dụng UI Components phổ biến từ Ant Design.

    Tìm hiểu về styled-components. Xây dựng CSS theo dạng modules trong ứng dụng ReactJs.

    Cách Override CSS từ các Components có sẵn của Ant Design.

    Phần 13

    Tiếp tục tìm hiểu về Ant Design và các UI Components, Layouts.

    Xây dựng Layout trang Dashboard với Ant Design.

    Cách cấu hình Router 2 cấp để xây dựng trang Admin.

    Kỹ thuật giới hạn truy cập người dùng vào trang Admin.

    Phần 14

    Xây dựng tính năng Update thông tin Profile trong trang Dashboard.

    Kỹ thuật gọi API để upload hình ảnh trong Javascript.

    Xây dựng tính năng thay đổi mật khẩu.

    Kỹ thuật xử lí Form và Validate Form với Ant Design.

    Phần 15

    Xây dựng tính năng đa ngôn ngữ cho Website.

    Các ngôn ngữ hỗ trợ: Tiếng Việt, Tiếng Anh, Trung Quốc và Tiếng Pháp.

    Cách tổ chức và cấu hình mã nguồn cho ứng dụng đa ngôn ngữ.

    Cách sử lí tình huống phức tạp với đa ngôn ngữ, số ít, số nhiều, truyền biến, ...

    Phần 16

    Tìm hiểu về Server Side Rendering (SSR) và Client Side Rendering (CSR).

    Nhập môn NextJs kết hợp với ReactJs.

    Cách cài đặt dự án NextJs.

    Tìm hiểu Data Fetching và Dynamic Routing trong NextJs.

    Phần 17

    Thực hành dự án thực tế với NextJs.

    Cách cấu hình Redux kết hợp với NextJs.

    Tích hợp mã nguồn ReactJs vào dự án với NextJs.

    Chuyển đổi các lời gọi APIs ở phía Client về phía Server.

    Tìm hiểu về Next Router.

    Phần 18

    Thực hành dự án thực tế với NextJs (P2)

    Phần 19

    Thực hành dự án thực tế với NextJs (P3)

    Phần 20

    Thực hành dự án thực tế với NextJs (P4)

    Sản phẩm Demo

    Các sản phẩm chính được hướng dẫn và các project cuối khóa được xây dựng bởi các bạn học viên tham gia khóa học.

    VIDEO ONLINE ĐƯỢC TẶNG KÈM

    Giúp học viên xem trước các video khi đến lớp, tận dụng tối đa thời gian trên lớp để thực hành, tương tác cùng giảng viên. Kiến thức video bao gồm tất cả nội dung như lộ trình học bên dưới.

    317 Videos
    53 Giờ
    45 Phút
    Phần 1

    Reactjs Cơ Bản

    Introduce và phân tích kiến thức

    ReactJS thông tin cần biết

    Tích hợp Bootstrap

    Xây dựng Component

    Sử dụng Props, Event, Ref và State

    Tìm hiểu LifeCycle

    Hệ thống kiến thức và mở rộng

    React Hooks cơ bản (Update version 16.8.x)

    Phần 2

    Xây dựng Project Todo List

    Introduce và phân tích kiến thức

    Xây dựng và tích hợp giao diện

    Phân chia Component của ứng dụng

    Hiển thị danh sách các Item

    Form Toogle

    Xây dựng chức năng Search, Sort, Delete, Add, Edit

    Sử dụng localStorage

    Tối ưu ứng dụng

    Publish ứng dụng

    React Hooks với Todo List

    Phần 3

    Sử dụng Redux với Project TodoList

    Introduce và phân tích kiến thức

    Xây dựng Tool Convert HTML to JSX

    Sử dụng Redux

    Hiển thị danh sách các Item với Redux

    Form Toogle với Redux

    Xây dựng chức năng Search, Sort, Delete, Add, Edit với Redux

    React Hooks kết hợp với React Redux

    Phần 4

    Sử dụng Redux với Project Shopping Cart

    Introduce và phân tích kiến thức

    Xây dựng cấu trúc ứng dụng

    Xây dựng chức năng hiển thị sản phẩm

    Xây dựng chức năng Add, Delete, Update sản phẩm vào giỏ hàng

    Redux các vấn đề nâng cao

    Phần 5

    Sử dụng React Router với Project Blog

    Introduce và phân tích kiến thức

    Sử dụng React Router

    Xây dựng cấu trúc ứng dụng

    Xây dựng Page và cấu hình Router

    Xây dựng Menu và Custom Link

    Xây dựng Page Login giới hạn vùng truy cập

    Phần 6

    Thao tác API với Project SpotifyAPI

    Introduce và phân tích kiến thức

    Phân tích yêu cầu và xác định giải pháp

    Xây dựng cấu trúc ứng dụng

    Spotify App và Access Token

    Xây dựng trang tìm kiếm Artist, trang Artist, Album

    Xây dựng Breadcrumb

    Tình huống tự thực hành

    Phần 7

    Project Task Manager với Firebase

    Introduce và phân tích kiến thức

    Phân tích yêu cầu và xác định giải pháp

    Tích hợp Firebase vào ứng dụng

    Xây dựng Task Page - Task Doing

    Xây dựng chức năng Notify

    Xây dựng Task Page - Task Completed

    Xây dựng Signup Page

    Xây dựng Signin Page

    Hoàn chỉnh các chức năng của ứng dụng

    Phần 8

    Khám phá NextJs

    Giới thiệu NextJs

    So sánh SSR, CSR và demo

    Cài đặt và một số lưu ý

    Tìm hiểu cấu trúc ứng dụng NextJs đầu tiên

    Deploy ứng dụng NextJs đầu tiên

    Phần 9

    Tìm hiểu NextJs cơ bản

    Cài đặt và tích hợp Typescript với NextJs và React

    Tìm hiểu về khái niệm Pages trong NextJs

    Tìm hiểu Dynamic Route

    Tìm hiểu Routing Basic

    Tìm hiểu Static File Serving và cách cài đặt

    Custom lại Webpack và cách dùng File loader

    Custom App Component và CSS Module Support

    Custom App Component và Typescript

    Phần 10

    Life Cycle, React Hooks và ứng dụng

    Ôn tập Life Cycle cơ bản trong Class Component

    Cách sử dụng State Hooks và so sánh

    Tìm hiểu về useEffect trong Hooks

    Tìm hiểu về useMemo, useCallback, useRef

    Tìm hiểu Custom Hooks và useConstructor

    Demo ứng dụng Hooks trong tình huống thực tế

    Solution 01, 02, 03, 04, 05, 06

    Phần 11

    Data Fetching và Server API

    Khái niệm API là gì?

    Postman Collection là gì và cách dùng

    Khái niệm Fetch Data trong NextJs

    Tìm hiểu getIntialProps trong NextJs

    Tìm hiểu về getServerSideProps

    Một số lưu ý về Typescript

    Static generation và getStaticProps

    Tìm hiểu getStaticPaths

    Phần 12

    Project thực tế (NextJs + React + Typescrpit)

    Giới thiệu Project và các chức năng

    Khởi tạo và thiết lập cấu trúc dự án

    Tạo Master Layout cho ứng dụng

    Xây dựng trang Home, Login và Register

    Xây dựng trang Create

    Xây dựng trang Detail

    Xây dựng trang liên quan tới User

    Phần 13

    Nhóm chức năng Authentication

    Thuật ngữ Authentication và Authorization

    Tìm hiểu cơ chế Token Based Authentication

    Thu thập dữ liệu từ Form Login

    Gọi API Login phía Client

    Custom API phía Server bằng NextJs

    Gọi API Login phía Server

    Các kỹ thuật với Cookie phía Client và Server

    Kỹ thuật Redirect phía Client và Server

    Xử lí Error cho chức năng Login phía Server

    Lấy Token từ Custom App và Master Layout

    Gọi API Get User Info dựa vào token

    Cách sử dụng React Hooks Global State

    Ứng dụng Hooks để xây dựng Navigation Guard

    Tối ưu mã nguồn cho chức năng Login

    Chức năng Logout và Optional Chaining

    Thu thâp dữ liệu từ Form Register

    Xử lí Error cho chức năng Register phía Client

    Gọi API Register phía Client

    Cải thiện UI/UX với Loading state

    Phần 14

    Nhóm chức năng User, Post và tối ưu SEO

    Sử dụng Typescript trong Homepage

    Gọi API lấy danh sách bài viết phía Server

    Render dữ liệu Homepage và một số lưu ý

    Chức năng Pagination (Load More Posts)

    Xử lí Form cho chức năng Search Post

    Gọi API Search Post và Masonry Layout

    Highlight keywords cho chức năng tìm kiếm

    Filter bài viết theo danh mục (Category)

    Gọi API cho chức năng User Detail

    Render dữ liệu User Detail

    Chức năng thay đổi mật khẩu

    Chức năng User Profile và kĩ thuật upload avatar

    Loading và Route events trong NextJs

    Phân tích chức năng Create Post

    Xử lí CheckBox trong React

    Xử lí Form Data cho chức năng Create Post

    Gọi API cho chức năng Create Post, Post Detail

    Render dữ liệu Post Detail và Post Categories

    Gọi API cho chức năng List Comments

    Render List Comments ra giao diện

    Xây dựng chức năng Comment, Edit Post

    Các kĩ thuật tối ưu SEO trong mã nguồn

    CÂU HỎI THƯỜNG GẶP

    Về nội dung: khóa 1 kèm 1 online sẽ có lượng kiến thức nhiều hơn các khóa học online riêng lẻ

    Về hình thức học: khóa 1 kèm 1 online sẽ có hỗ trợ trực tiếp 24/7 qua chat, teamview, voice chat, video review code cho từng bài tập của bạn

    Anh Lưu Trường Hải Lân và đội ngũ support của ZendVN sẽ đồng hành cùng bạn trong suốt khóa học này

    Khóa học 1 kèm 1 có sự tương tác cao giữa Học viên và ZendVN qua hình thức: hỏi đáp trong group Zalo, teamview, video review code cho từng học viên. Do đó mỗi tháng ZendVN chỉ nhận tối đa 5 học viên, ZendVN sẽ ưu tiên cho các bạn học viên đăng ký và thanh toán học phí sớm.

    Để đăng ký, bạn điền thông tin vào Form đăng ký tại trang này, sau đó check mail để xem hướng dẫn nộp học phí.

    Các video của từng buổi học đã được ZendVN xây dựng sẵn, bạn hoàn toàn chủ động được thời gian học của mình, tốc độ học nhanh hay chậm là do bạn quyết định, bạn không cần học theo tốc độ của bất kỳ ai, hoàn toàn có thể kết thúc sớm khóa học.

    Ngược lại nếu bạn học chậm, bạn cũng không cần lo lắng, ZendVN sẽ đồng hành cùng bạn đến khi bạn hoàn tất khóa học, tuy nhiên thời gian học không kéo dài quá 12 tháng kể từ thời điểm bạn bắt đầu học

    Sau khi hoàn tất khóa học và báo cáo project cuối khóa, bạn sẽ được ZendVN cấp giấy xác nhận hoàn thành khóa học, giấy do Công ty Lập trình Zend Việt Nam cấp

    Khóa học được kéo dài tối đa là 12 tháng kể từ thời điểm bạn bắt đầu học. Nếu đang trong quá trình học, bạn gặp một vấn đề gì đó không thể tiếp tục tham gia khóa học, ZendVN sẽ bảo lưu khóa học cho bạn trong thời gian tối đa 6 tháng.

    Học ONLINE Học ONLINE 1 Kèm 1
    Đặc điểmHọc qua các video đã được ZendVN quay sẵnHọc qua các video đã được ZendVN quay sẵn, kết hợp sự kèm cặp và tương tác trực tiếp từ giảng viên và mentor
    Nội dung học100% qua các video của khoá học onlineVideo của khoá học online
    Video của khóa học từ xa
    Video nhận xét mỗi bài tập của giảng viên
    Project thực tế được lồng ghép vào suốt chương trình học.
    Hỏi đáp trong khóa họcForm hỏi đáp có tại mỗi video học
    Không quá 2 giờ câu hỏi sẽ được hỗ trợ bởi bộ phận support
    Qua group Zalo thảo luận trực tiếp cùng 2 giảng viên
    Sẽ được hỗ trợ và trao đổi trực tiếp ngay với giảng viên và mentor
    Tương tác với giảng viên / mentorGửi câu hỏi qua Form hỏi đápChat trực tiếp qua group Zalo
    Thời gian họcLinh động, học viên rãnh lúc nào học lúc đóLinh động, học viên rãnh lúc nào học lúc đó
    Sự chủ độngChủ động trong việc học, việc học nhanh / chậm đều do học viên quyết địnhChủ động trong việc học, việc học nhanh / chậm đều do học viên quyết định
    Học viên sẽ bị đốc thúc, nhắc nhở, chăm sóc bởi giảng viên để cải thiện tốc độ học
    Review bài tập từ giảng viênKhông cóGiảng viên sẽ quay video nhận xét chi tiết từng dòng code giúp học viên nhìn thấy chỗ code chưa hoàn thiện, cách nâng cấp và tối ưu code
    Giấy xác nhận hoàn thành khóa họcKhông cóĐược cấp khi hoàn tất project cuối khóa (xem ảnh)
    Giấy xác nhận tực tập tại ZendVNKhông cóĐược cấp khi học viên hoàn thành chương trình học
    Tham gia khoá họcTất cả các bạn hoàn thiện đăng ký và thanh toán học phíZendVN chỉ nhận giới hạn 5 học viên / tháng (ưu tiên các bạn học viên đã học khoá online)
    Danh sách khóa họcKhóa học ONLINEKhóa học ONLINE 1 kèm 1

    CẢM NHẬN CỦA HỌC VIÊN VỀ KHÓA HỌC

    ĐĂNG KÝ

    Do giới hạn số lượng học viên chỉ 5 bạn / 1 tháng, để hoàn tất đăng ký giữ chỗ các bạn vui lòng đăng ký và hoàn thiện học phí sớm

    Họ và tên của bạn *
    Địa chỉ email của bạn *
    Số điện thoại của bạn *
    Facebook của bạn

    Ưu đãi học phí:

    Nâng cấp hỗ trợ 1 kèm 1 (không bắt buộc)

    Học phí cần thanh toán:

    Hỗ trợ sau khóa học

    Sau khi hoàn thành khóa học, học viên sẽ được ZendVN cấy giấy xác nhận hoàn thành khóa học, xác nhận thực tập, hỗ trợ viết CV, kết nối doanh nghiệp và tham gia câu lạc bộ học viên đang đi làm

    Xác nhận hoàn thành khóa học

    Học viên tham gia trên 80% số buổi học có thành tích học tập tốt, sẽ được cấp giấy chứng nhận hoàn thành khóa học do công ty Lập trình Zend Việt Nam cấp

    Xác nhận thực tập doanh nghiệp

    Học viên tham gia xây dựng project cuối khóa, chuyên cần trong học tập sẽ được cấp giấy xác nhận thực tập tại công ty Lập trình Zend Việt Nam

    CV & Việc làm

    Hỗ trợ học viên xây dựng CV, chia sẻ kinh nghiệm phỏng vấn, kết nối việc làm với doanh nghiệp, tham gia câu lạc bộ học viên đã đi làm

    Tư vấn khóa học

    Bạn sẽ được tư vấn trực tiếp từ anh Hải Lân về việc chọn khóa học và lộ trình phù hợp với mình nhất