General rundown

Suggested rundown for teaching react.js usage in 2025 onwords.

Suggested flow

The flow is assumed that student is already know about the basic coding concepts about javascript or typescript.

Required knowledge:

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

Better to have:

• Async / Await using
• API Calling with fetch / network
• Typescript

1. Starting a new project with Vite.js

• Download VSC (https://code.visualstudio.com )
• Download Node.js (https://nodejs.org/en )
• Open a project / folder at VSC
• How to open / use the terminal (ls, cd, npm)
• Init a get started project from Vite.js (https://vite.dev/guide/ )
• Type in npm run dev to open a development project
• How to espace the dev server by Ctrl + C
• Type npm run build to build the output

Remindings:

1. Try to ask for your student about their experience about their develop skills.
2. Attempt to slow it down for the first lessons depends on their experiences.
3. IT background student 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 define
• Objects and Array level types
• Bonus: Generics in typescript (function<T> (arg:T):T{})

2. Introduce to React Usage

• Navigating with Get started project folder structure (app, .tsx / .jsx)
• DOM tags usage in react (h1, h2, p, div, br, span)
• What is a Components in react
• Basic inline / class CSS for components
• Create a new Components file (MyComponents.tsx) (Care the naming with Capital letter)
• Clone and play with basic components

Remindings:

1. Try to explain the benefic of Components modularization in web development

3. Play around with import and export with functions / Components

• Brief introduce to import and export for js / ts
• Different of export and export default
• How to write a Components for 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

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

5. Deep drive lifecycle with useState and useEffects

• Introduce to useState for variables rendering
• 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 useState change function as a props to components [Advance knowledge Point]
• Introduce Render cycle for react (didComponentMount, didComponentDismount)
• Introduce to useEffect in Render cycle stages
• Play around the side effects in useEffect ([], [variables])
• Using SetInterval in useEffect
• Clear side effect with SetInterval (Render cycle in useEffect, return () => { clearInterval })
• Bonus: More with useMemo, useCallback and useRef

6. Paging with React Route Dom (RRD)

• Install React Route 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. Trending zustand to replace redux tools kit

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

8. Using CSS framework

• Using a modern CSS framework (Mantine)
• Install Mantine in the project https://mantine.dev/getting-started/ 
• How to config / import the Provider
• General brief of how to view the documents and usage
• How to adapts the build-in components into the projects (Buttons, Container, Grid …)
• How to select sutiable tools / library for your project

9. Deploy with Vercel and Github

• Registe a 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
• Config the vercel.json
• Using public .env at Vite
• Create env for development and productions

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. Advance React technique 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 adaptions
• Using vite-plugin-sitemap for Site map genetations
• Importing gooogle 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. Introduce to Next.js

• What is Next.js and why using items
• Init a project with Next.js
• Introduce to Page routing
• Introduce to CSR, SSR and SSG (Client Time, Runtime Server, Build time)

Reading Materials

Vite.js

https://vitejs.dev/guide/ 

react.dev

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