Following React - The Complete Guide (incl Hooks, React Router, Redux) created by Maximilian Schwarzmüller.
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-
📂 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
- ReactJS
- JavaScript
- HTML
- CSS