Code snapshots and materials for our "React - The Complete Guide" course

Overview

Course Code & Materials

This repository contains the course source code and other extra materials like slides.

How to use

The code snapshots are organized in multiple branches where every branch represents a course section.

For example, the branch 01-getting-started holds all code snapshots and extra materials for section 1 of the course ("Getting Started").

You can switch branches via the branch dropdown above the directory explorer.

Click on the branch dropdown and then select the appropriate branch for the course section you're looking for

In most branches, you'll find multiple folders which organize the section-specific content further:

  • Often, you'll find a /code subfolder which contains any relevent code snapshots for the given course section
  • You also often find /slides folders which - guess what - contain the slides for the module
  • /extra-files typically contains extra files like .css files that might be attached to individual lectures in that course module

The folder names should generally be self-explanatory but also feel free to simply click around and see which materials are available.

Using code snapshots

Code snapshots (which you find in /code) are there for you to compare your code to mine and find + fix errors you might have in your code.

You can either view my code directly here on Github (you can open + view code files without issues here) or you download the snapshots.

The subfolders in the /code folder are named such that mapping them to the course lectures is straightforward.

Downloading code snapshots

You can download all the content of a branch via the "Code" button here on Github. You can then either clone the repository or simply download the selected branch content as a ZIP file.

Important: You always download the entire branch content!

You can then dive into the interesting folders (e.g. the individual code snapshots) locally on your hard drive.

Running the attached code

You can use the attached code simply to compare it to yours. But you can also run it.

To run my code, navigate into a specific code snapshot folder via the cd command in your command prompt or terminal first.

Then run npm install to install all required dependencies (this will create a /node_modules folder).

Important: If you're using the code for a module that requires API keys or a backend (e.g. the module about sending Http requests), you'll have to use your backend URLs or API keys. Mine won't work (I disabled my projects).

Issues
  • 11 practice food order app

    11 practice food order app

    merge for download

    opened by yogeshsalunke15 3
  • React guide

    React guide

    Screenshot 2021-05-05 104713 please check my code error and help to clear.

    opened by mahenth 2
  • Zz reactjs summary

    Zz reactjs summary

    learning react

    opened by harishshankar 1
  • Add comment about forking to readme file

    Add comment about forking to readme file

    The option to fork the repo instead of cloning or downloading the code as zip file was missing. It is a viable solution if one wants to keep track of the changes made by oneself for later reference.

    opened by metters 1
  • 22 - Authentication

    22 - Authentication "CORS" response

    Chapter 22 Authentication - Slide 4 Adding a user

    I have changed the API key so that it is pointing to my firebase. However, when clicking on "Login" I don't get a token response, instead I get a "cors" error. How do I correct this?

    opened by tomus85 1
  • redux toolkit in 001

    redux toolkit in 001

    null

    opened by rylew2 1
  • updated README

    updated README

    opened by birnihigo2020 1
  • Update ErrorModal.module.css

    Update ErrorModal.module.css

    opened by alternativeritam 1
  • just SetUp

    just SetUp

    opened by LinaAbuAlHassan-99 0
  • Total Amount vulnerability

    Total Amount vulnerability

    While adding and removing the meal items in very specific order results in a negative Total Amount.

    opened by AqibNaeem19 0
  • Can not download the the codes.

    Can not download the the codes.

    Download zip contains no codes. Will this be fixed?

    opened by Odisanderson 23
  • 01 getting started

    01 getting started

    null

    opened by imcRAJze8898 1
  • chart is colapsing

    chart is colapsing

    chart is not showing. its showing as horizontal lines. also getting this error Line 15:15: 'startEditingHandler' is assigned a value but never used

    chartissue

    opened by amir3242 0
  • Update ExpenseItem.css

    Update ExpenseItem.css

    null

    opened by jabeerC001 0
  • assignment 1

    assignment 1

    null

    opened by ahmedallanisoftcatalyst 0
  • Removed the / from node_modules for subfolders containing node modules

    Removed the / from node_modules for subfolders containing node modules

    Removed the / from node_modules so that subfolders containing a node_modules folder also get ignored.

    Hi Max! When cloning your repository and working inside one of your ./code/... subfolders inside any of the module's branches, the node_modules don't get ignored. This is a little bit painful even for vscode watching changes from 5000+ files. So it would be nice, if you could merge this little change into your module's branches.

    Best Alex

    opened by Der-Alex 0
  • Can't locate the start up folder

    Can't locate the start up folder

    I cloned several version of the repository in order to be able to follow up with the tutorial but the know react folder wasn't part of the repo, after this, i created react project from the create-react app cli, atleast i could follow u but couldn't get some of the workign files like the css file for MainNavigation

    opened by turawa 3
  • Branch 24 Lesson 06 broken out-of-date dependency

    Branch 24 Lesson 06 broken out-of-date dependency

    The latest version of react-transition-group is v4.4.2 which is incompatible with the lesson code. It produces the following error message:

    TransitionGroupContext.js:2 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext is not a function
        at Object../node_modules/react-transition-group/esm/TransitionGroupContext.js (TransitionGroupContext.js:2)
        at __webpack_require__ (bootstrap cf1190964bbbf02f71fe:669)
        at fn (bootstrap cf1190964bbbf02f71fe:87)
        at Object../node_modules/react-transition-group/esm/Transition.js (Transition.js:1)
        at __webpack_require__ (bootstrap cf1190964bbbf02f71fe:669)
        at fn (bootstrap cf1190964bbbf02f71fe:87)
        at Object../src/App.js (App.css?9a66:26)
        at __webpack_require__ (bootstrap cf1190964bbbf02f71fe:669)
        at fn (bootstrap cf1190964bbbf02f71fe:87)
        at Object../src/index.js (index.css?f255:26)
        at __webpack_require__ (bootstrap cf1190964bbbf02f71fe:669)
        at fn (bootstrap cf1190964bbbf02f71fe:87)
        at Object.0 (registerServiceWorker.js:108)
        at __webpack_require__ (bootstrap cf1190964bbbf02f71fe:669)
        at bootstrap cf1190964bbbf02f71fe:715
        at bundle.js:719
    

    I resolved this by installing v2.2.1 as shown in the solution repo: npm install --upgrade [email protected]

    It may be worthwhile to notify users to use this version when installing :) .

    opened by hellooworld15 0
  • 16 working with forms

    16 working with forms

    null

    opened by PeshrawSarwar 0
  • Zz reactjs summary

    Zz reactjs summary

    Because Mine is Not working I have to Pull

    opened by fred2dera 0
Owner
Academind
Official Academind GmbH Repository
Academind
Build a simple React / Web3 Dapp that replicates a small portion of the Uniswap v2 interface

Today we're going to build a simple React / Web3 Dapp that replicates a small portion of the Uniswap v2 interface - specifically, we are building the

Jacob Edward Dawson 38 Sep 24, 2021
Startup-Landing - Collection of free top of the line startup landing templates built using react/nextjs/gatsby

Collection of free top of the line startup landing templates built using react/nextjs/gatsby. Free to download, simply edit and deploy! Updated weekly!

Startup Landing 287 Sep 21, 2021
React Hooks + MobX Boilerplate Project

React + MobX Boilerplate ^_^ Plug And Play(clone and code) The most updated React + MobX(2021) Boilerplate With the latest Tech Stack Demo Why you sho

Georgy Glezer 14 Aug 28, 2021
winwiz1 107 Sep 19, 2021
This is a very simple boilerplate made with CRA, React Router, Styled Components and Storybook.

This is a Create React App boilerplate with some configurations from React Avançado Course. What is inside? This project uses lot of stuff as: Create

React Avançado 14 Jul 21, 2021
A simple demo to show the boilerplate-cra from React Avançado

This is a Create React App boilerplate with some configurations from React Avançado Course. What is inside? This project uses lot of stuff as: Create

Willian Justen 7 Aug 17, 2021
👷‍♂️ Simple set of CLIs to scaffold and build React Native libraries for different targets

??‍♂️ Simple set of CLIs to scaffold and build React Native libraries for different targets

Callstack 1.2k Sep 15, 2021
React Dashboard made with Material UI’s components. Our pro template contains features like TypeScript version, authentication system with Firebase and Auth0 plus many other

Material Kit - React Free React Admin Dashboard made with Material UI's components, React and of course create-react-app to boost your app development

Devias 3.3k Sep 22, 2021
Step-by-step guide to setting up and launching a TypeScript/React web app querying Ethereum blockchain data in standard querying language (GraphQL)

Your first Web3 dApp: React app reading real Ethereum blockchain database Step-by-step guide to setting up and launching a TypeScript/React web app qu

null 23 Sep 7, 2021
Notus React: Free Tailwind CSS UI Kit and Admin

Notus React A beautiful UI Kit and Admin for Tailwind CSS and React. Start your development with a Free Tailwind CSS and React UI Kit and Admin. Let N

Creative Tim 397 Sep 19, 2021
A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform

React Redux Universal Hot Example About This is a starter boilerplate app I've put together using the following technologies: Isomorphic Universal ren

Erik Rasmussen 12.1k Sep 20, 2021
🔮 Sofia React Template - Admin Dashboard Template built with React

?? Sofia React Template - Admin Dashboard Template built with React

Flatlogic 62 Sep 14, 2021
Yeoman generator for ReactJS and Webpack

generator-react-webpack Yeoman generator for ReactJS - lets you quickly set up a project including karma test runner and Webpack module system. About

null 2.9k Sep 11, 2021
An opinionated CLI for building redux/react apps quicker

______ _ _____ _ _____ | ___ \ | | / __ \| | |_ _| | |_/ /___ __| |_ ___ ________| / \/

Spencer Dixon 893 Sep 13, 2021
React/Redux stack (not a boilerplate kit)

Reactuate Reactuate is an opinionated stack for building React/Redux-based frontend applications with a focus on DDD (Domain-Driven Design). The ratio

null 491 Jun 21, 2021
React version of Argon Dashboard

Argon Dashboard React Start your development with a Dashboard for Bootstrap 4, React and Reactstrap, made with create-react-app. It is open source, fr

Creative Tim 318 Sep 19, 2021
Soft UI Dashboard React - Free Dashboard using React and Material UI

Soft UI Dashboard React - Free Dashboard using React and Material UI

Creative Tim 11 Sep 21, 2021
Volt React is a free and open source admin dashboard template built in React.js and based on the latest version of the Bootstrap 5

Volt React is a free and open source admin dashboard template built in React.js and based on the latest version of the Bootstrap 5 CSS framework. It features over 100 UI elements, plugins, and example based built with React components.

Themesberg 420 Sep 24, 2021
Now UI Kit React - Free Bootstrap 4, React, React Hooks and Reactstrap UI Kit

Now UI Kit React is a free Bootstrap 4, React, React Hooks and Reactstrap UI Kit provided for free by Invision and Creative Tim. It is a beautiful cross-platform UI kit featuring over 50 elements and 3 templates.

Creative Tim 107 Sep 6, 2021