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.
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
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
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
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
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
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
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
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.
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