Unlocking React: Your Path to Mastering Modern Web Development

In this course on JavaScript library React, students will dive into the core principles of React, gaining an understanding of its component model, virtual DOM, state management, routing and important concepts such as React Context and React Hooks.

Students will gain the skills to create interactive and scalable applications. With hands-on projects and emphasis on best practices, this course equips aspiring web developers with the knowledge to build basic React applications and sets the stage for further exploration in front-end development.

Part 1 (Structural concepts and why React matters)

Day 1:

• Introduction to React
  • What is React and what is its history?
  • Advantages of React and its position in the industry
  • React terminology and understanding component-based structure
• Setting up a React Development Environment
  • Initial setup (Node.js, vs code or text editor of your choosing, and NPM) 
  • Initializing create react app
  • Project setup and structure
• Understanding JSX and Functional Components
  • Using JSX and understanding the virtual DOM
  • Understanding the render/hydrating process of React
  • Importing your components and usage
• Hooks, Controlled State and Lifecycle
  • What are React Hooks?
  • What is local state?
  • How does useState work?
  • What is the component lifecycle and how to useEffect

Part 2 (Building a React Application)

Day 2:

• Handling User Interactions
  • Responding to user interactions with event handlers
  • Updating component state based on user input
  • Creating controlled components
• Lists and Conditional Rendering
  • Dynamically render a list of components
  • Using map to iterate over an array and render components
  • Conditionally rendering components based on state or props
• Implementing Routing in React with React Router
  • Implementing client-side routing in a React application
  • Creating routes and rendering components based on URLs
  • Navigating between different pages using links

Part 3 (Data management, and design principles)

Day 3:

• Global State with React Context
  • Why global state is useful, and possible use cases
  • Creating a context
  • Using a context and implementation
• Fetching Data
  • Managing asynchronous data loading and error handling
  • Implement fetching data from an API
  • Using useEffect to refetch data based on condition
  • Creating custom hooks
• Atomic Design Principles
  • What is atomic design?
  • Structuring components from the atomic level
  • Why design principles are important and how they can speed up the development process 
• Styling React Components 
  • CSS frameworks (e.g., Bootstrap, Material-UI)
  • CSS libraries styled-components and tailwind css

Part 4 (Advanced React concepts)

Day 4:

• Legacy Class Components
  • Understanding a legacy class component 
  • Class component lifeCycle 
  • Possible uses with older design patterns (e.g. renderProps, react HOC)
• Testing Frameworks
  • Different testing approaches
  • Testing technology (cypress, react-testing-library, jest)
• Debugging Tools
  • React devtools
  • React profiler
• Deploying a React Application
  • Options for deploying
  • Using environment variables
  • Having a production build
  • Deploying code via service (netlify, vercel)
• Other options for global state management and alternatives to context
  • a. MobX, Recoil, Zustand, and Redux
• Review, Recap, and the Future
  • Review key concepts and possible improvements (lazy loading, etc)
  • Benefits of a framework like Next.JS and what is SSR, and SSG
  • Other useful frameworks Angular, Vue js, Preact, Svelte
  • Additional resources and continued learning opportunities

This course assumes participants have a basic understanding of HTML, CSS, and JavaScript. It is recommended to bring a laptop or access to a computer with a text editor, Node.js, and a web browser installed. Some familiarity with JavaScript ES6 syntax and concepts (such as arrow functions and de-structuring) is beneficial but not required.