REACT ROOTS
Learn the basics of building modern single page web applications (SPA) with React and TypeScript. Taught by CJ of Coding Garden.
- React Roots was originally presented as a LIVE course to an online classroom of paying students in April 2023.
- The videos and course materials are now available for purchase to watch and learn at your own pace.
-
What do I get?
-
Who is this course for?
-
What will I learn in this course?
-
What will I build in this course?
-
Project Requirements and Examples
-
Frequently Asked Questions
What do I get?
- 8 lessons, with about 16 hours of video instruction
- 6 sets of pre-lesson reading materials
- 6 sets of post-lesson exercises
- Each exercise set includes between 1 and 4 separate exercises
- 1 set of project requirements
- Apply everything you learn in the first 7 lessons to build a single page application with React and TypeScript
- Example project descriptions are included to help you decide what to build
- Access to a public discord to get help from community members and volunteers
Who is this course for?
- This course is for developers familiar with HTML, CSS and JavaScript
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):
- Building web sites with HTML, CSS and JavaScript.
- Accessing and updating the DOM with JavaScript.
- Solving problems with JavaScript.
- Accessing and modifying Objects in JavaScript.
Working with the various kinds of scope in JavaScript (global, function).
- Defining and invoking functions in JavaScript.
- Using higher order methods like map and filter.
- Using asynchronous JavaScript (callbacks, promises).
- Using fetch or Axios to make HTTP requests in JavaScript.
- Running basic commands from the command line.
What will I learn in this course?
- This course has actionable and measurable learning objectives to clearly define the outcomes of each lesson.
- You can find the learning objects for each lesson below.
- If it is listed in the learning objectives, this course will cover it.
- If it is NOT listed in the learning objectives, this course will NOT cover it.
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
What will I build in this course?
- Whatever you want! But here are some example project descriptions that satisfy the final project requirements.
- This course is not a code along.
- You are expected to take notes during the video lessons, but not copy the code exactly.
- All example code from the lessons is available for you to review / reference while working on exercises and projects.
- The post-lesson exercises allow you to practice the covered concepts so you can solidify your understanding.
- The final project allows you to apply the knowledge you’ve gained to build a project that fits within the project constraints and requirements.
Project Requirements and Examples
Project Requirements
- Your final project will be a SPA (Single Page Application) built with:
- Vite, React, TypeScript, React Router, React Context API
- The application should:
- Have at least 4 routes defined with React Router
- Make API requests to a freely available Web API
- There should be at least 2 API requests in response to a user action
- Use types and interfaces to define component props, API responses and any other type needed
- Share data within the application using the Context API
- Use a custom styling solution or a component library
Project Examples
- These examples can be built with the knowledge you gain in this course.
- Advanced project ideas that would require a BaaS or custom backend are included in the course materials.
Movies App
- Web API
- Pages
- Home Page - List all popular movies
- Search Page - Search for movies by name
- Single Movie Page - List all details for a specific movie
- Watch List - Users can add movies to their watch list (uses local storage)
- API + User Interaction
- Users can search for movies with a query
- Users can click on a movie to see more details
- Context API
- Movies from any page can be added to the “Watch List”
Nasa Images and Videos App
- Web API
- Pages
- Home Page - Show the Astronomy Image of the Day
- Search Page - Search for images and videos available from the NASA Image and Video Library
- Single Image / Video Page - Show more details about a specific image or video
- History Page - List the terms a user has searched for and the images / videos a user has clicked on (uses local storage).
- API + User Interaction
- Users can search for images or videos
- Users can click an image or video to see more details
- Context API
- Search terms and visited images / videos are added available on the “History Page”
Pokemon App
- Web API
- Pages
- Home Page - Choose a pokedex to view
- Pokedex Page - View each page of pokemon for a given pokedex
- Pokemon Details Page - View the full details of a given pokemon
- Caught Pokemon Page - View a list of all the pokemon a user has caught (uses local storage)
- API + User Interaction
- Users can click a pokedex to view the pokemon in it
- Users can click forward and backwards on a pokedex page to view the previous and next pages
- Users can click on a pokemon to view details
- Context API
- Caught pokemon are added and available from the “Caught Pokemon Page”
Frequently asked questions
How long will I have access once I purchase a ticket?
- Indefinitely! Once you purchase a ticket, the course is yours to keep.
How do I know if I will like CJ’s teaching style?
- You can view other lessons CJ has given that are similar but not exactly the same as the lessons given in the course:
Will you offer the LIVE course again?
- Maybe!
- I hope to get feedback from participants and decide if this is something I want to do again
- Join the mailing list for course announcements and updates: https://list.coding.garden
What if I need help while taking the course?
- The Coding Garden discord is a public discord where community members and volunteers give code help and advice.
- Join the server here.
Why React?
- It is everywhere
- It is popular
- Many companies are hiring for it
- JSX / TSX is used in other frameworks like Stencil, Solid.js and Qwik
The new React docs are really good. Why would I even need this course?
- TypeScript
- Personal Instruction from CJ
- CJ thinks his lesson order / scaffolding is better for React learners
Will this course make me a React and TypeScript expert?
- No
- This course is designed as a way to get you up to speed on the basics of React and TypeScript
- The only way you’ll become an expert is with consistent and deliberate practice using what you learned in this course to build React applications
Will this course get me a job?
- Maybe
- You can take what you learn in this course and apply it to building React applications to include in your portfolio when applying for jobs
Does this course teach Next.js or Remix?
- This is a front-end only React course with a focus on Single Page Applications
- You can’t really use Next.js or Remix without knowing the basics of React
- Everything you learn about React will be applicable to Next.js or Remix
- The last lesson of the course showcases Next.js and Remix and talks about what they provide on top of React