dumaaas / react-complete-guide

Following React - The Complete Guide (incl Hooks, React Router, Redux) created by Maximilian Schwarzmüller.

react-complete-guide

Following React - The Complete Guide (incl Hooks, React Router, Redux) created by Maximilian Schwarzmüller.

👨‍💻 How to install ?

This project was bootstrapped with Create React App.

Its required to have NodeJS, NPM installed on your computer.

// go into wished directory, for example:
cd 1_understanding-the-base-features-and-syntax

// installs all necessary modules
npm install

// runs the app in the development mode
npm start

📌 Covered sections

• 📂 Understanding the base features and syntax

  • 📄 Module Introduction
  • 📄 The Build Workflow
  • 📄 Using Create React App
  • 📄 Understanding the Folder Structure
  • 📄 Understanding Component Basics
  • 📄 Understanding JSX
  • 📄 JSX Restrictions
  • 📄 Creating a Functional Component
  • 📄 Working with Components & Re-Using Them
  • 📄 Outputting Dynamic Content
  • 📄 Working with Props
  • 📄 Understanding the Children Property
  • 📄 Understanding & Using State
  • 📄 Handling Events with Methods
  • 📄 Manipulating the State
  • 📄 Using the useState() Hook for State Manipulation
  • 📄 Stateless vs Stateful Components
  • 📄 Passing Method References Between Components
  • 📄 Adding Two Way Binding
  • 📄 Adding Styling with Stylesheets
  • 📄 Working with Inline Styles

• 📂 Working with List and Conditionals

  • 📄 Module Introduction
  • 📄 Rendering Content Conditionally
  • 📄 Handling Dynamic Content The JavaScript Way
  • 📄 Outputting Lists
  • 📄 Lists & State
  • 📄 Updating State Immutably
  • 📄 Lists & Keys
  • 📄 Flexible Lists
  • 📄 Wrap Up

• 📂 Working with List and Conditionals

  • 📄 Module Introduction
  • 📄 Outlining the Problem Set
  • 📄 Setting Styles Dynamically
  • 📄 Setting Class Names Dynamically
  • 📄 Adding and Using Radium
  • 📄 Using Radium for Media Queries
  • 📄 Enabling & Using CSS Modules
  • 📄 Adding Pseudo Selectors
  • 📄 Working with Media Queries

• 📂 Debuggin React Apps

  • 📄 Module Introduction
  • 📄 Understanding Error Messages
  • 📄 Finding Logical Errors by using Dev Tools & Sourcemaps
  • 📄 Working with the React Developer Tools
  • 📄 Using Error Boundaries
  • 📄 Wrap Up

• 📂 Diving Deeper into Components & React Internals

  • 📄 Module Introduction
  • 📄 A Better Project Structure
  • 📄 Splitting an App into Components
  • 📄 Comparing Stateless and Stateful Components
  • 📄 Class-based vs Functional Components
  • 📄 Class Component Lifecycle Overview
  • 📄 Component Creation Lifecycle in Action
  • 📄 Component Update Lifecycle (for props changes)
  • 📄 Component Update Lifecycle (for state changes)
  • 📄 Using useEffect() in Functional Components
  • 📄 Controlling the useEffect() Behavior
  • 📄 Cleaning up with Lifecycle Hooks & useEffect()
  • 📄 Cleanup Work with useEffect() - Ex
  • 📄 Using shouldComponentUpdate for Optimization
  • 📄 Optimizing Functional Components with React.memo()
  • 📄 PureComponents instead of shouldComponentUpdate
  • 📄 How React Updates the DOM
  • 📄 Rendering Adjacent JSX Elements
  • 📄 Using React Fragment

🚀 Tech/framework

• ReactJS
• JavaScript
• HTML
• CSS