Advanced React
Advanced React is a follow-on course to Basic React.js using React 19, covering TypeScript, Tailwind CSS 4, advanced routing, TanStack Query, Redux Toolkit, a headless CMS back end, authentication with JWT and Firebase, testing and deployment. It suits frontend developers, students and IT professionals who already know the basics of React.
- Duration18 hours · 3 days
- FormatOnsite / live online
- Next roundOn request
- CertificateIncluded
Course overview
As a React app grows, components that simply work are no longer enough. Teams need types that catch mistakes before the code runs, a clear way to manage state, secure login and tests that make changes safe. React 19 and today's tools make all of this much easier.
This course builds on Basic React.js and teaches React 19 with TypeScript, styling with Tailwind CSS 4, advanced routing, server state with TanStack Query and global state with Redux Toolkit, advanced forms, a headless CMS back end, authentication with JWT and Firebase, performance tuning and testing, and finishes with a workshop and deployment. (3 days, 6 hours per day, 18 hours in total, Advanced level.)
What you’ll gain
- Build React 19 projects with TypeScript the right way
- Style pages with Tailwind CSS 4 and design reusable components
- Choose and use TanStack Query and Redux Toolkit to manage state appropriately
- Use a headless CMS as a back end and build CRUD features over a REST API
- Build authentication with JWT and Firebase
- Test, optimise and deploy React apps to production
Who this course is for
- Frontend developers who know React basics and want to work at real project level
- Graduates of Basic React.js or people with similar experience
- Teams maintaining older React apps who want to adopt current practice
- Students, teachers, lecturers and IT professionals who want to raise their React skills
Prerequisites
- Confident HTML, CSS and modern JavaScript
- React with function components and basic hooks such as useState and useEffect
- Some experience with React Router and calling REST APIs from React
- No prior TypeScript knowledge is required
- A laptop that can run the Node.js LTS release and VS Code
Curriculum
Course Details
This course is the 2026 edition of Advanced React JS. It runs for 3 days, 6 hours per day (18 hours in total, 09:00-16:00), as lectures with labs. Advanced level, building on Basic React.js. This edition uses React 19 with TypeScript on Vite, enables the React Compiler, uses Tailwind CSS 4 as the main styling approach while showing how to read existing
styled-components code, replaces classic Redux with Redux Toolkit, and adds TanStack Query, the React Router data router, React 19 form actions and testing with Vitest. It keeps the original core of TypeScript, Tailwind CSS, a Strapi headless CMS, CRUD over a REST API, Redux, JWT authentication, Firebase and deployment. Learners take home a lab guide and the source code of a blog app with login.
Day 1 React 19 with TypeScript and Advanced Components
Section 1: Lab: A React 19 Project with TypeScript
- Create a project with the Vite react-ts template and explore its files
- Strict tsconfig, ESLint and path aliases
- Feature-based folders for large apps
- Enable the React Compiler and what it does for you
- Lab: migrate an existing JavaScript project to TypeScript
Section 2: Lab: TypeScript with Props and State
- Type props, children and event handlers
- Type inference and union types with useState
- Discriminated unions for loading, success and error states
- Generic components such as List<T> that work with many data types
- Lab: a generic data table that sorts and filters
Section 3: Lab: Advanced Hooks and Custom Hooks
- useReducer for state with several steps
- Typed context and separate providers
- useRef, useEffectEvent and keeping effects to a minimum
- Clearly typed, reusable custom hooks
- Lab: a data-fetching hook and a shopping cart hook
Section 4: Lab: Styling with Tailwind CSS 4
- Install through @tailwindcss/vite and set the theme with @theme
- Responsive and state variants and dark mode
- Components with several variants using clsx and tailwind-merge
- Read and migrate existing styled-components code
- Lab: a dashboard template built with Tailwind CSS
Section 5: Component Patterns and React 19 Features
- Composition and compound components
- Suspense and reading promises with use()
- Error boundaries for parts that may fail
- Activity for hiding screens while keeping their state
- Lab: compound Tabs and Modal components
Day 2 Routing, State, Forms and Back End
Section 6: Lab: Advanced Routing with React Router
- createBrowserRouter and RouterProvider in data mode
- Loaders that load data before a page renders and actions for forms
- Nested layouts, lazy routes and per-route error pages
- Pending states during navigation with useNavigation
- Lab: a multi-page article manager built on the data router
Section 7: Lab: Server State with TanStack Query
- How server state differs from client state
- useQuery, query keys and caching
- useMutation and invalidateQueries after saving data
- Optimistic updates with rollback on failure
- Lab: an article list that updates instantly after edits
Section 8: Lab: Global State with Redux Toolkit
- The Redux flow and when to use it
- configureStore, createSlice and typed hooks with withTypes
- Asynchronous work with createAsyncThunk
- Inspect state with Redux DevTools and compare with context
- Lab: stores for the user, cart and app settings
Section 9: Lab: Advanced Forms
- React 19 form actions with useActionState and useFormStatus
- useOptimistic to show results before the server replies
- React Hook Form with Zod for forms with many fields
- Image upload with a preview before sending
- Lab: a create-article form validated on both sides
Section 10: Lab: CRUD with a Headless CMS
- Install Strapi 5 and create content types
- Set access permissions and enable the REST API
- Read, create, update and delete data from React
- Show back-end errors in a way users understand
- Lab: a blog whose content is managed through Strapi
Day 3 Authentication, Quality and Deployment
Section 11: Lab: Authentication with JWT
- An auth service for register, login and loading the user
- Store tokens carefully: httpOnly cookies or memory
- Attach tokens to requests and handle expired tokens
- Protected routes and role-based pages
- Lab: login, register and profile pages
Section 12: Lab: Firebase Authentication and Firestore
- Create a Firebase project and install the modular SDK
- Sign in with Google and track state with onAuthStateChanged
- CRUD with Firestore and realtime updates with onSnapshot
- Security rules that restrict data per user
- Lab: a realtime user management app
Section 13: React App Performance
- The React Compiler and when useMemo and useCallback are still needed
- Find slow spots with the Profiler in React Developer Tools
- Code splitting with lazy and Suspense
- Render long lists with virtualisation
- Lab: measure and speed up a dashboard page
Section 14: Lab: Testing React Apps
- Set up Vitest and React Testing Library
- Test from the user's point of view with user-event
- Mock APIs with Mock Service Worker
- Test custom hooks and Redux slices
- Lab: tests for the login form and article list
Section 15: Workshop: Build, CI and Deployment
- Vite environment variables and per-environment settings
- Production builds and checking bundle size
- Run tests automatically with GitHub Actions
- Deploy to Vercel, Netlify or Firebase Hosting
- Workshop: a working blog app with login
Schedule & training options
For individuals — public rounds
No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770
For organisations — in-house / private
- Tailor the content to your team’s tools and projects
- Your dates, at your office or live online
- Quotation with tax ID for procurement
Instructors
Frequently asked questions
How does TypeScript help with React, and how do you type props?
TypeScript catches mistakes while you write code, such as passing the wrong prop type or forgetting a required value, and gives your editor accurate suggestions. To type props, declare a type or interface and use it as the parameter type of the function component, marking optional values with ?. For state, TypeScript usually infers the type from the initial value, and you use union types when a value can take several forms.
How does Redux work, and how should it be used alongside TanStack Query?
Redux keeps app-wide state in a single store. Components dispatch actions, and reducers calculate the new state. Today you should write Redux with Redux Toolkit, whose createSlice cuts boilerplate and works well with TypeScript. A common approach is to let TanStack Query manage server data such as product lists and caching, and use Redux Toolkit for client state shared across pages, such as a cart or settings.
What are the steps to build JWT login in React?
Build a login form that posts to an API, which checks the password and returns a JWT. Store the token carefully: having the server set an httpOnly cookie, or keeping it in memory, is safer than localStorage. Then attach the token to every request, handle expired tokens, guard pages with protected routes and show menus by user role, always checking permissions again on the server.
What is the React Compiler, and do I still need useMemo and useCallback?
The React Compiler analyses your code at build time and memoises values and functions automatically, reducing re-renders without writing useMemo, useCallback or React.memo yourself in most new code. Both hooks still work when you need precise control, for example for a value used as an effect dependency. In existing code that already memoises, keep it or test carefully before removing it.
Who is the Advanced React course for, and what should I know beforehand?
It suits frontend developers who know React basics and want to work at real project level, graduates of Basic React.js, teams maintaining older React apps, and students, teachers, lecturers and IT professionals. You should be able to write function components with basic hooks and have used React Router and called APIs. No prior TypeScript knowledge is needed.
What can I do after completing Advanced React?
You can write React 19 apps with TypeScript confidently, design reusable components with Tailwind CSS 4, choose the right state management tool, connect a headless CMS and Firebase, build login with JWT or Firebase, write tests, tune performance and deploy with CI yourself. You are also ready to move on to Next.js for work that needs server-side rendering.