{"id":15798122,"url":"https://github.com/thomascode92/react-complete-guide","last_synced_at":"2026-04-12T15:45:51.568Z","repository":{"id":256261012,"uuid":"854173600","full_name":"ThomasCode92/react-complete-guide","owner":"ThomasCode92","description":"Dive in and learn React.js from scratch! Learn React, Hooks, Redux, React Router, Next.js, Best Practices and way more!🚀📚","archived":false,"fork":false,"pushed_at":"2024-10-15T20:29:58.000Z","size":18163,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-17T07:01:43.165Z","etag":null,"topics":["context-api","learn-react","nextjs","react","react-concepts","react-router","react-topics","redux","tailwindcss","tanstack-query","udemy-course"],"latest_commit_sha":null,"homepage":"https://www.udemy.com/course/react-the-complete-guide-incl-redux","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ThomasCode92.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-08T15:15:11.000Z","updated_at":"2024-10-15T20:30:01.000Z","dependencies_parsed_at":"2024-10-17T02:39:17.319Z","dependency_job_id":null,"html_url":"https://github.com/ThomasCode92/react-complete-guide","commit_stats":{"total_commits":22,"total_committers":1,"mean_commits":22.0,"dds":0.0,"last_synced_commit":"c01197c061f4a2dcff51fbf5bc01c807cccdc643"},"previous_names":["thomascode92/react-complete-guide"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasCode92%2Freact-complete-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasCode92%2Freact-complete-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasCode92%2Freact-complete-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasCode92%2Freact-complete-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ThomasCode92","download_url":"https://codeload.github.com/ThomasCode92/react-complete-guide/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246531975,"owners_count":20792736,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["context-api","learn-react","nextjs","react","react-concepts","react-router","react-topics","redux","tailwindcss","tanstack-query","udemy-course"],"created_at":"2024-10-05T00:23:43.790Z","updated_at":"2026-04-12T15:45:51.528Z","avatar_url":"https://github.com/ThomasCode92.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React - Complete Guide\n\nDive in and learn React.js from scratch! Learn React, Hooks, Redux, React Router, Next.js, Best Practices and way more!🚀📚\n\n## Introduction\n\nLearn React with [this complete guide](https://www.udemy.com/course/react-the-complete-guide-incl-redux) 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.\n\n## How to Use this Repository\n\nThe 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.\n\nTo 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.\n\n**Getting Started**\u003cbr /\u003e\nTo use the projects in this repository, Node.js needs to be installed on the system. Refer to the [official documentation](https://nodejs.org/en) for installation instructions. If [asdf](https://asdf-vm.com/) is being used, Node.js can also be installed via the `.tool-versions` file. More information on this is available [here](https://asdf-vm.com/manage/configuration.html#tool-versions).\n\nOnce Node.js is installed, follow these steps to start an application:\n\n```bash\ngit clone https://github.com/ThomasCode92/react-complete-guide.git\ncd react-complete-guide             # navigate into project folder\n\n## choose a project, e.g.: 'react-essentials`\ncd complete-path/react-essentials   # navigate to project\nnpm install                         # install dependencies\nnpm run dev                         # start development server\n```\n\nA 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.\n\n**Complete list of Core Features**\n\n\u003cdetails\u003e\n\u003csummary\u003eClick of Core Features\u003c/summary\u003e\n\u003cbr\u003e\n\n| Module                                 | Description                                                      | Resources                                                                                                                                                 |\n| -------------------------------------- | ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| React Essentials                       | Basics of Components, JSX \u0026 State                                | [Folder](./complete-path/react-essentials/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/react-essentials)                     |\n| React Essentials - Deep Dive           | Beyond the Basics                                                | [Folder](./complete-path/essentials-deep-dive/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/essentials-deep-dive)             |\n| React Essentials - Practice Project    | Apply Knowledge \u0026 Practice Concepts                              | [Folder](./complete-path/essentials-practice/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/essentials-practice)               |\n| Styling React Apps                     | Static \u0026 Dynamic Styling for Pretty Apps                         | [Folder](./complete-path/styling-components/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/styling-components)                 |\n| Refs \u0026 Portals                         | Advanced DOM Access \u0026 Value Management                           | [Folder](./complete-path/refs-portals/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/refs-portals)                             |\n| Practice Project: Advanced Concepts    | Working with Components, State, Styling, Refs \u0026 Portals          | [Folder](./complete-path/practice-project-1/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/practice-project-1)                 |\n| Advanced State Management              | Beyond Basic Apps \u0026 “Lifting Up State”                           | [Folder](./complete-path/context-api/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/context-api)                               |\n| Dealing with Side Effects              | Keeping the UI Synchronized                                      | [Folder](./complete-path/handling-side-effects/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/handling-side-effects)           |\n| Practice Project: Working with Effects | Working with EffectsPractice \u0026 Dive Deeper                       | [Folder](./complete-path/practice-project-2/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/practice-project-2)                 |\n| Behind The Scenes                      | Understanding \u0026 Optimizing React                                 | [Folder](./complete-path/behind-the-scenes/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/behind-the-scenes)                   |\n| Data Fetching \u0026 HTTP Requests          | Sending \u0026 Receiving Data via HTTP                                | [Folder](./complete-path/data-fetching-custom-hooks/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/data-fetching-custom-hooks) |\n| Custom Hooks                           | Creating \u0026 Using Custom React Hooks                              | [Folder](./complete-path/data-fetching-custom-hooks/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/data-fetching-custom-hooks) |\n| Working with Forms \u0026 User Input        | It’s Trickier Than It Might Seem                                 | [Folder](./complete-path/form-user-input/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/form-user-input)                       |\n| Time To Practice: Food Order App       | Components, State, Context, Effects, HTTP Requests \u0026 More!       | [Folder](./complete-path/practice-project-3/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/practice-project-3)                 |\n| Understanding Redux                    | Managing App-Wide State with Redux                               | [Folder](./complete-path/redux-introduction/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/redux-introduction)                 |\n| Redux Deep Dive                        | Taking a Closer Look                                             | [Folder](./complete-path/redux-advanced/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/redux-advanced)                         |\n| Single-Page Application Routing        | Multiple Pages In Single-Page Apps                               | [Folder](./complete-path/routing-auth/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/routing-auth)                             |\n| Authentication                         | User Signup \u0026 Login                                              | [Folder](./complete-path/routing-auth/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/routing-auth)                             |\n| Data Fetching with Tanstack Query      | Sending HTTP Requests with Ease                                  | [Folder](./complete-path/tanstack-query/) - [Github](https://github.com/ThomasCode92/react-complete-guide/commits/tanstack-query)                         |\n| Animating React Apps                   | Using Framer Motion to Bring Things to Life                      | [Folder](./complete-path/framer-motion/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/framer-motion)                           |\n| Replacing Redux with Context \u0026 Hooks   | A Totally Optional of Reducing Dependencies                      | [Folder](./complete-path/redux-vs-context/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/redux-vs-context)                     |\n| Introduction to Next.js                | Building Up On React                                             | [Folder](./complete-path/nextjs-introduction/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/nextjs-introduction)               |\n| Patterns \u0026 Best Practices              | Exploring Advanced React Patterns \u0026 Repeating Key Best Practices | [Folder](./complete-path/patterns-best-practices/) - [GitHub](https://github.com/ThomasCode92/react-complete-guide/commits/patterns-best-practices)       |\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomascode92%2Freact-complete-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomascode92%2Freact-complete-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomascode92%2Freact-complete-guide/lists"}