React Roots series by

Welcome to React Roots! The first stop on your journey as a React and TypeScript developer. This course is a great starting point for any Web Developer that wishes to dive into the world of React and TypeScript. Taught by CJ of Coding Garden, this course teaches the basics of building modern single page web applications (SPA) with React and TypeScript. React Roots was originally presented as a LIVE course to an online classroom of paying students in April 2023. In the videos you will see CJ interact with students and answer questions as they come up. The videos and course materials are now available for purchase to watch and learn at your own pace. With the purchase of this course, you will 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 - https://coding.garden/discord NOTE - This course is not for complete beginners. You will need to have experience with the following (these topics are not taught in this course): Experience building web sites with HTML, CSS and JavaScript. Experience accessing and updating the DOM with JavaScript. Experience solving problems with JavaScript. Experience accessing and modifying Objects in JavaScript. Experience with the various kinds of scope in JavaScript (global, function). Experience defining and invoking functions in JavaScript. Experience using higher order methods like map and filter. Experience with asynchronous JavaScript (callbacks, promises). Experience with fetch or Axios to make HTTP requests in JavaScript. Experience running basic commands from the command line.

  • 00 - Course Intro and Materials Download of React Roots by

    In this video I show you: Where to download the course materials Prerequisites that need to be installed on your computer How to run / navigate the course materials Where to find: pre-lesson reading materials, slides, examples, exercises and project requirements How to take / consume each lesson in this course When to start the project and how to start planning How to get help / where to find the discord: https://coding.garden/discord Exercise solutions will be available for download soon.

  • 01 - Intro to Modern Web Development of React Roots by

    By the end of this lesson you will be able to: 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 of React Roots by

    By the end of this lesson, you will be able to: 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 of React Roots by

    By the end of this lesson, you will be able to: 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 of React Roots by

    By the end of this lesson, you will be able to: 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 of React Roots by

    By the end of this lesson, you will be able to: 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 of React Roots by

    By the end of this lesson, you will be able to: 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 of React Roots by

    By the end of this lesson, you will be able to: 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

  • Project Requirements of React Roots by

    This video reviews the requirements for the project including example app ideas. This video also shows some tools that can be used to evaluate a web API and also shows a simple way to deploy a react app.

  • 08 - Overview of the React Ecosystem of React Roots by

    By the end of this lesson, you will be able to: Use React.Component to define components with JS Classes Define CSR, SSG and SSR and differentiate between them List commonly used libraries, tools and frameworks: Build Tools Frameworks / Project Generation 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