Learn the basics of building modern single page web applications (SPA) with React and TypeScript. Taught by CJ of Coding Garden.

Buy for $35

What do I get?

Buy for $35

Who is this course for?

To get the most out of this course, you will need to have experience with the following (these topics are NOT taught in this course):

What will I learn in this course?

01 - Intro to Modern Web Development
  • Describe the modern web development ecosystem using words like Node.js, npm, Transpiler, and Bundler
  • Use the features of modern JavaScript to build front-end applications
  • Use ES Modules to separate functionality into separate files
  • Compare and contrast Global, Function, Module and Block scope in JavaScript
  • Use let and const to define JavaScript variables with block scope
  • Use arrow functions to define anonymous functions with lexical scope
  • Use destructuring to extract object properties and array values
  • Use Node.js and npm to manage application dependencies
02 - Intro to TypeScript
  • Describe what TypeScript is and it’s relation to JavaScript
  • Describe the TypeScript build cycle
  • Setup and configure a project with TypeScript
  • Use Types to annotate variables and functions
  • Use Types and Interfaces to describe Objects
  • Read and recognize common TypeScript error messages
  • Determine when to ignore TypeScript
  • Determine when to use the any type
  • Find packages and type definitions on npm and Definitely Typed
  • Generate Typescript Interfaces from JSON / API Responses
03 - Intro to React and Component Hierarchies
  • Explain what React is
  • Describe how react works using words like Virtual DOM, Render and State
  • Use vite to generate react applications
  • Explain the purpose of each file in a generated react app
  • Use JSX/TSX to build react components
  • List the ways JSX/TSX is different from plain HTML
  • Use useState to manage component state
  • Use array map to iterate over data in React
  • Handle DOM events on react elements
  • Use React to break down a user interface into clearly defined components
  • Use React to construct component hierarchies
  • Manage component and application state
  • Create React components that communicate with each other using state and props
04 - Lesson Review and React Form Basics
  • Export multiple named items on a single line
  • Capitalize Type and Interface Names
  • Define Interface and Type properties as optional
  • Use Pick and Omit to customize existing Types
  • Prefix component names to avoid naming conflicts
  • Differentiate between exporting a function declaration and a function definition
  • Visually Break down a UI into separate components
  • Setup a vite project with prettier for consistent formatting
  • Use a consistent and predicable folder structure to organize code
  • Use fragments in React components to allow multiple top level elements
  • Manage form state with react
  • Handle form submission with react
  • Pass functions and objects as props to components
  • Lift state to the top of the application
05 - Component Lifecycle, Hooks and API Requests
  • Describe the React component lifecycle
  • Use modern features of react like useState and useEffect
  • Make an API request in a react app
  • Extract useEffect and useState code into a re-usable hook
06 - React Router and the Context API
  • Define Single Page Application
  • Create multi page React apps with React Router
  • Share state with nested components using the Context API
  • Render nested components with React children
  • Define an enum or object to share commonly used strings
  • Access the current location with useLocation
  • Programmatically navigate with useNavigate
  • Define and access route params with useParams
  • Create nested routes using the Outlet component from React Router
07 - React Styling Solutions and Component Libraries
  • Style React components with Global CSS
  • Style React components with Inline Styles
  • Style React components with CSS Modules
  • Use classname Utilities to simplify applying classes to React components
  • Style React components with CSS in JS
  • Style React components with TailwindCSS
  • Use a React Component library like Material UI, Chakra UI or React Bootstrap
  • Use a React+Tailwind Component library like flowbite-react or react-daisyUI
08 - Overview of the React Ecosystem
  • Use React.Component to define components with JS Classes
  • List commonly used libraries, tools and frameworks:
    • Build Tools
    • Frameworks / Project Generation
      • Define CSR, SSG and SSR and differentiate between them
    • A11y Tools and Resources
    • Testing Tools and Frameworks
    • Component Testing / Design System Tools
    • Immutable State Libraries
    • State Management Libraries
    • Asynchronous State Management Libraries
    • Routing Libraries
    • Form Validation Libraries
    • Hook Libraries
  • List Useful TypeScript Resources
  • List App Ideas you can use to practice building with React

Buy for $35

What will I build in this course?

Buy for $35

Project Requirements and Examples

Project Requirements

Project Examples

Movies App
Nasa Images and Videos App
Pokemon App

Buy for $35

Frequently asked questions

How long will I have access once I purchase a ticket?

How do I know if I will like CJ’s teaching style?

Will you offer the LIVE course again?

What if I need help while taking the course?

Why React?

The new React docs are really good. Why would I even need this course?

Will this course make me a React and TypeScript expert?

Will this course get me a job?

Does this course teach Next.js or Remix?