General Run-down

Suggested run-down for teaching React.js usage in 2025 onwards.

Suggested flow

The flow assumes the student already knows the basic coding concepts of JavaScript or TypeScript.

Required knowledge:

• Variables
• Conditions
• Basic HTML & CSS
• Basic DOM Control

Better to have:

• Async / await usage
• API calling with fetch / network
• TypeScript

1. Starting a new project with Vite.js

• Download VS Code (https://code.visualstudio.com )
• Download Node.js (https://nodejs.org/en )
• Open a project / folder in VS Code
• How to open / use the terminal (ls, cd, npm)
• Initialize a starter project with Vite.js (https://vite.dev/guide/ )
• Type in npm run dev to open a development project
• How to stop the dev server with Ctrl + C
• Type npm run build to build the output

Reminders:

1. Ask your student about their prior development experience.
2. Slow it down for the first lessons depending on their experience level.
3. Students with an IT background are recommended to use TypeScript instead of JavaScript.

1.1 Starting with TypeScript (Bonus)

• Types for JavaScript (number, boolean, string, array, null)
• Types with functions
• type and interface definitions
• Objects and Array level types
• Bonus: Generics in TypeScript (function<T>(arg: T): T {})

2. Introduction to React

• Navigating the Get started project folder structure (app, .tsx / .jsx)
• DOM tag usage in React (h1, h2, p, div, br, span)
• What is a component in React
• Basic inline / class CSS for components
• Create a new component file (MyComponents.tsx) (Pay attention to the capital letter)
• Clone and play with basic components

Reminders:

1. Explain the benefit of component modularization in web development.

3. Play around with import and export for functions / components

• Briefly introduce import and export for JS / TS
• Difference between export and export default
• How to write a component with export / import
• How to write a function for export / import
• Function with params
• Arrow functions for React
• Suggested folder structure for React (Utils, Pages, Store, Components, Types…)

4 Playing with props

• Passing general props to a component (number, string, boolean, null)
• Define props types for a component with TypeScript (interface)
• Define optional / default props
• Playing with conditional rendering (if, true ? "A" : "B";, {})
• Render a list by looping (for vs .map() vs .forEach())
• Pure thinking: How to split / design a component
• React Fragment <></>
• Passing a callback function as a prop
• Passing components as props

5. Deep dive lifecycle with useState and useEffect

• Introduce useState for rendering variables
• Basic DOM interactions (onClick, onChange, onInput)
• Playing with useState for content changes / interactions
• Callback vs Passing self in useState (setCounter( v => v + 1 ) vs setCounter(counter + 1))
• Using the useState update function as a prop to components [Advanced knowledge point]
• Introduce the render cycle for React (didComponentMount, didComponentDismount)
• Introduce useEffect in render cycle stages
• Play around the side effects in useEffect ([], [variables])
• Using setInterval in useEffect
• Clear side effects with setInterval (render cycle in useEffect, return () => { clearInterval })
• Bonus: More with useMemo, useCallback and useRef

6. Paging with React Router DOM (RRD)

• Install React Router DOM (RRD)
• Introduce paging in React with RRD
• Writing a simple useRoute config file with BrowserRouter
• Navigate in RRD (<Link> or useRoute)
• Params and Query passing in RRD
• Overlay in RRD (React.Children)
• Bonus: Using React.lazy to increase UX

7. Using zustand to replace the Redux toolkit

• Global variables with RTK replacement (zustand)
• Install zustand in the project https://github.com/pmndrs/zustand 
• Configure a single useStore in the store folder (Functions and Variables)
• Use the store file in components
• Introduce the plugins in zustand (localstore, devtools)
• You may not need zustand; introduce it when and how you decide to use this method

8. Using a CSS framework

• Using a modern CSS framework (Mantine)
• Install Mantine in the project https://mantine.dev/getting-started/ 
• How to configure / import the Provider
• A brief overview of the documentation and usage
• How to adapt the built-in components into the project (Buttons, Container, Grid …)
• How to select suitable tools / libraries for your project

9. Deploy with Vercel and Github

• Register an account for Github and Vercel
• Download git and Github Desktop
• Create a project repo
• Push the file to repo
• Register a Vercel account
• Operate with Vercel UI
• Deploy with Github
• View and debug the Github deployment
• Configure the vercel.json
• Using public .env at Vite
• Create env for development and production

9.1 Mini-project - Todo List

• A UI view for a todo list
• View the todo list
• Create records for todo
• Delete records for todo
• Edit records for todo
• Delete all records
• Bonus - Mark as important / read todo
• Bonus - Record the create time
• Bonus - Search the todo items
• Bonus - Record in local-storage

10. Advanced React techniques for UX / UI (Bonus)

• Using react-helmet-async for SEO
• Using react-error-boundary for Avoid Error UI failed
• Using react-hot-toast for notifications feedback
• Using @vite-pwa/pwa for PWA adaptations
• Using vite-plugin-sitemap for sitemap generation
• Importing Google Search Console for search analysis
• Using Vite defineConfig conditions and esbuild drop console
• Using react-infinite-scroller for data lazy loading
• Using react-lazy-load-image-component for images lazy loading

11. Introduction to Next.js

• What is Next.js and why use it
• Initialize a project with Next.js
• Introduce Page routing
• Introduce CSR, SSR, and SSG (Client time, server runtime, build time)

Reading Materials

Vite.js

https://vitejs.dev/guide/ 

react.dev

https://react.dev/learn/rendering-lists