Dive in and learn React.js from scratch! Learn React, Hooks, Redux, React Router, Next.js, Best Practices and way more!🚀📚
Learn React with this complete guide by starting from the basics and advancing to advanced concepts, including building multiple demo apps. Develop a fullstack application with NextJS and gain a deep understanding of React Hooks, Components, and efficient State Management using Context API and Redux. Learn how to create standalone React apps as well as those connected to a backend via HTTP. Dive into routing with React Router, implement User Authentication, and explore additional concepts like Styling, Animations, Form Handling, TypeScript, and more along the way.
The repository is divided into two main sections: Summary and Core Features. The Summary section features a demo application showcasing key aspects of React, including Components, State Management, Routing, and HTTP requests. The Core Features section consists of several smaller demo projects, each focusing on a specific topic such as Styling, Effects, Forms, and even Redux and Next.js.
To explore the Summary project, check the core-features folder. For the other examples, visit complete-path. The complete list of projects can be find below.
Getting Started
To use the projects in this repository, Node.js needs to be installed on the system. Refer to the official documentation for installation instructions. If asdf is being used, Node.js can also be installed via the .tool-versions file. More information on this is available here.
Once Node.js is installed, follow these steps to start an application:
git clone https://github.com/ThomasCode92/react-complete-guide.git
cd react-complete-guide # navigate into project folder
## choose a project, e.g.: 'react-essentials`
cd complete-path/react-essentials # navigate to project
npm install # install dependencies
npm run dev # start development serverA lot of node_modules folders are likely to be created. To remove them, run the npm run cleanup command, which recursively deletes all node_modules folders.
Complete list of Core Features
Click of Core Features
| Module | Description | Resources |
|---|---|---|
| React Essentials | Basics of Components, JSX & State | Folder - GitHub |
| React Essentials - Deep Dive | Beyond the Basics | Folder - GitHub |
| React Essentials - Practice Project | Apply Knowledge & Practice Concepts | Folder - GitHub |
| Styling React Apps | Static & Dynamic Styling for Pretty Apps | Folder - GitHub |
| Refs & Portals | Advanced DOM Access & Value Management | Folder - GitHub |
| Practice Project: Advanced Concepts | Working with Components, State, Styling, Refs & Portals | Folder - GitHub |
| Advanced State Management | Beyond Basic Apps & “Lifting Up State” | Folder - GitHub |
| Dealing with Side Effects | Keeping the UI Synchronized | Folder - GitHub |
| Practice Project: Working with Effects | Working with EffectsPractice & Dive Deeper | Folder - GitHub |
| Behind The Scenes | Understanding & Optimizing React | Folder - GitHub |
| Data Fetching & HTTP Requests | Sending & Receiving Data via HTTP | Folder - GitHub |
| Custom Hooks | Creating & Using Custom React Hooks | Folder - GitHub |
| Working with Forms & User Input | It’s Trickier Than It Might Seem | Folder - GitHub |
| Time To Practice: Food Order App | Components, State, Context, Effects, HTTP Requests & More! | Folder - GitHub |
| Understanding Redux | Managing App-Wide State with Redux | Folder - GitHub |
| Redux Deep Dive | Taking a Closer Look | Folder - GitHub |
| Single-Page Application Routing | Multiple Pages In Single-Page Apps | Folder - GitHub |
| Authentication | User Signup & Login | Folder - GitHub |
| Data Fetching with Tanstack Query | Sending HTTP Requests with Ease | Folder - Github |
| Animating React Apps | Using Framer Motion to Bring Things to Life | Folder - GitHub |
| Replacing Redux with Context & Hooks | A Totally Optional of Reducing Dependencies | Folder - GitHub |
| Introduction to Next.js | Building Up On React | Folder - GitHub |
| Patterns & Best Practices | Exploring Advanced React Patterns & Repeating Key Best Practices | Folder - GitHub |