REACT ROOTS

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

Sold Out

What do I get?

Sold Out

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
Sold Out

What will I build in this course?

Sold Out

Project Requirements and Examples

Project Requirements

Project Examples

Movies App
Nasa Images and Videos App
Pokemon App
Sold Out

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?