Khóa học Frontend với NextJS và React
Khóa học Frontend với NextJS và React
Khóa học cung cấp kiến thức HTML, CSS trong dự án, cách sử dụng responsive, tổng quan về javascript, typescript, xây dựng project Reactjs, hướng dẫn cài đặt như routing, useMemo, useCallback và react memo, sử dụng các thư viện, thực hành làm CRUD với redux, cài đặt và sử dụng react query, thực hiện project cuối khóa (React + NextJS).
Tại sao chọn khóa học
- Số lượng buổi học: 60 buổi (2-3 tiếng/ buổi)
- Hoàn thành 4 project
- 100% giảng viên, trợ giảng đã và đang làm việc tại các công ty công nghệ lớn
- Hỗ trợ giải đáp thắc mắc của học viên 24/7
- Kiểm tra, sửa chữa từng dòng code cho học viên
- Video xem lại sau mỗi buổi học
- Hướng dẫn viết CV xin việc
Mục tiêu khóa học
- Hiểu rõ các khái niệm cơ bản và nâng cao về Next.js
- Phát triển kỹ năng lập trình frontend với HTML, CSS, JavaScript và TypeScript
- Xây dựng và triển khai các ứng dụng web hoàn chỉnh với Next.js
- Áp dụng các phương pháp tối ưu hóa và bảo mật trong phát triển web
Kết quả mong đợi
- Có khả năng phát triển ứng dụng web hoàn chỉnh với Next.js
- Sử dụng thành thạo HTML, CSS, JavaScript và TypeScript
- Hiểu và áp dụng các kỹ thuật tối ưu hóa và bảo mật web
- Phát triển kỹ năng làm việc nhóm và quản lý dự án
Đối tượng hướng đến
- Lập trình viên muốn nâng cao kỹ năng và kiến thức về Next.js
- Sinh viên ngành Công nghệ Thông tin
- Người muốn chuyển hướng sang lĩnh vực lập trình web
- Lập trình viên muốn học thêm về phát triển frontend và backend
Nội dung chương trình học
Phần 1: HTML, CSS và JavaScript cơ bản
Cấu trúc cơ bản của một trang HTML
Các thẻ HTML phổ biến và cách sử dụng
Semantic HTML và tầm quan trọng của nó
Thực hành: Xây dựng một trang web đơn giản
Cú pháp CSS và cách áp dụng styles
Selectors và specificity
Box model và layout cơ bản
Flexbox: Các thuộc tính và cách sử dụng
Thực hành: Tạo layout responsive với Flexbox
Cú pháp JavaScript cơ bản
Biến, kiểu dữ liệu, và phạm vi
Cấu trúc điều khiển: if-else, switch, loops
Functions và arrow functions
DOM manipulation cơ bản
Thực hành: Tạo ứng dụng Todo list đơn giản
ES6+ features: let/const, destructuring, spread/rest operators
Promises và async/await
Fetch API và AJAX
Error handling
Thực hành: Xây dựng ứng dụng fetch dữ liệu từ API
Nguyên tắc của Responsive Web Design
Media queries và breakpoints
CSS Grid: Các thuộc tính và cách sử dụng
So sánh Flexbox và Grid
Thực hành: Xây dựng layout phức tạp với Grid
Phần 2: TypeScript Fundamentals
TypeScript là gì và tại sao sử dụng nó
Cài đặt và cấu hình TypeScript
Kiểu dữ liệu cơ bản trong TypeScript
Type inference và type annotation
Thực hành: Chuyển đổi một project JavaScript sang TypeScript
Interfaces trong TypeScript
Type aliases
Union và Intersection types
Optional và Readonly properties
Thực hành: Xây dựng một hệ thống type cho ứng dụng
Function types và overloading
Classes và access modifiers
Inheritance và implements
Abstract classes và interfaces
Thực hành: Implement một hệ thống OOP với TypeScript
Generic functions và classes
Constraints trong generics
Built-in utility types (Partial, Readonly, Pick, etc.)
Creating custom utility types
Thực hành: Sử dụng generics để tạo các components tái sử dụng
Conditional types
Mapped types
Decorators trong TypeScript
Module augmentation
Thực hành: Áp dụng advanced features vào một project thực tế
Phần 3: React Fundamentals với TypeScript
Cài đặt và cấu hình React với TypeScript
JSX trong TypeScript
Typing components và props
useState và useEffect với TypeScript
Thực hành: Tạo ứng dụng React-TypeScript đầu tiên
Typing state trong functional components
useReducer với TypeScript
Custom hooks trong TypeScript
Lifecycle methods trong class components với TypeScript
Thực hành: Xây dựng ứng dụng quản lý state phức tạp
Typing event handlers
Controlled components với TypeScript
Form validation trong TypeScript
useRef với TypeScript
Thực hành: Xây dựng form phức tạp với validation
Typing Context trong React
useContext hook với TypeScript
Higher-Order Components (HOCs) trong TypeScript
Render props pattern với TypeScript
Thực hành: Implement global state management với Context API
Cài đặt và cấu hình React Router với TypeScript
Typing route parameters và query strings
Protected routes trong TypeScript
Code splitting với React.lazy và TypeScript
Thực hành: Xây dựng ứng dụng multi-page với routing
Jest và React Testing Library với TypeScript
Mocking trong TypeScript tests
Testing hooks và context
Snapshot testing với TypeScript
Thực hành: Viết test suite cho React components
Phần 4: React Ecosystem và Advanced Concepts
Cài đặt Redux với TypeScript
Typing actions, reducers, và store
Redux Toolkit với TypeScript
Async actions với Redux Thunk và TypeScript
Thực hành: Implement Redux trong ứng dụng React-TypeScript
CSS Modules với TypeScript
Styled-components và TypeScript
Emotion với TypeScript
Tailwind CSS trong React-TypeScript projects
Thực hành: Áp dụng các phương pháp styling khác nhau
useMemo và useCallback với TypeScript
React.memo trong TypeScript
Profiling React-TypeScript apps
Code splitting và lazy loading với TypeScript
Thực hành: Tối ưu hóa performance cho ứng dụng lớn
SSR concepts trong TypeScript environment
Setting up SSR với Express và TypeScript
Data fetching trong SSR với TypeScript
Hydration trong TypeScript context
Thực hành: Chuyển đổi ứng dụng React-TypeScript sang SSR
Giới thiệu GraphQL và Apollo Client
Typing GraphQL queries và mutations
Generating TypeScript types từ GraphQL schema
Caching và state management với Apollo Client
Thực hành: Xây dựng ứng dụng React-GraphQL với TypeScript
CSS transitions và animations trong React
React Transition Group với TypeScript
Framer Motion trong TypeScript environment
GSAP (GreenSock) với React và TypeScript
Thực hành: Thêm animations phức tạp vào ứng dụng
ARIA attributes và roles trong TypeScript
Keyboard navigation với TypeScript
Creating accessible forms
Testing accessibility trong React-TypeScript apps
Thực hành: Audit và cải thiện accessibility cho ứng dụng
Phần 5: Next.js với TypeScript
Cài đặt và cấu hình Next.js với TypeScript
Pages và routing trong Next.js-TypeScript
getStaticProps và getServerSideProps với TypeScript
Custom App và Document trong TypeScript
Thực hành: Tạo ứng dụng Next.js-TypeScript đầu tiên
Typing getStaticProps và getStaticPaths
Incremental Static Regeneration với TypeScript
SWR hook trong TypeScript environment
API Routes với TypeScript
Thực hành: Xây dựng blog với Next.js, TypeScript và Markdown
CSS Modules và Sass trong Next.js-TypeScript
Styled JSX với TypeScript
Image Optimization với next/image và TypeScript
Font Optimization trong TypeScript context
Thực hành: Tối ưu hóa assets trong ứng dụng Next.js-TypeScript
Implementing NextAuth.js với TypeScript
Typing custom authentication logic
Protecting API routes trong TypeScript environment
Server-side authentication checks với TypeScript
Thực hành: Xây dựng hệ thống authentication hoàn chỉnh
Cấu hình i18n trong Next.js với TypeScript
Typing translated content
Dynamic routes với multiple languages
Server-side language detection trong TypeScript
Thực hành: Thêm hỗ trợ đa ngôn ngữ cho ứng dụng
Unit testing với Jest và React Testing Library trong TypeScript
Integration tests cho API routes với TypeScript
End-to-end testing với Cypress và TypeScript
Mocking trong Next.js-TypeScript tests
Thực hành: Viết test suite toàn diện cho ứng dụng Next.js-TypeScript
Deploying Next.js-TypeScript apps to Vercel
Cấu hình CI/CD cho Next.js-TypeScript projects
Performance auditing với TypeScript
Implementing PWA features trong Next.js-TypeScript
Thực hành: Deploy và tối ưu hóa ứng dụng production-ready
Phần 6: AI Integration với LLMs và RAG
Tổng quan về Large Language Models (LLMs)
Tích hợp OpenAI API với Next.js
Streaming responses và error handling
Rate limiting và cost optimization
Thực hành: Xây dựng chatbot AI đơn giản
Giới thiệu về LangChain và use cases
Chains và Agents trong LangChain
Memory và conversation history
Prompt engineering và templates
Thực hành: Xây dựng ứng dụng AI với LangChain
RAG architecture và principles
Vector databases (Pinecone, Supabase)
Document processing và chunking
Semantic search implementation
Thực hành: Xây dựng hệ thống RAG với tài liệu tùy chỉnh
Security considerations trong AI applications
Caching và optimization strategies
Monitoring và logging AI interactions
Cost management và scaling
Thực hành: Deploy AI application lên production
Multi-modal AI với vision và speech
Fine-tuning models cho use cases cụ thể
AI-powered analytics và insights
Ethical considerations và best practices
Thực hành: Xây dựng advanced AI features
Phần 7: Docker và Container Development
Giới thiệu về containers và Docker
Docker architecture và components
Writing Dockerfiles cho Next.js apps
Docker commands và best practices
Thực hành: Containerize Next.js application
Docker Compose configuration
Managing multiple services
Networking giữa containers
Volume management và persistence
Thực hành: Set up development environment với Docker Compose
Container orchestration concepts
Kubernetes introduction
Deployment strategies
Scaling và load balancing
Thực hành: Deploy containerized app to Kubernetes
Setting up CI/CD pipelines
Automated testing trong containers
Image building và pushing
Deployment automation
Thực hành: Implement CI/CD pipeline với GitHub Actions
Production considerations cho containers
Security best practices
Monitoring và logging
Performance optimization
Thực hành: Deploy production-ready containerized application
