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

Last update: Jun 19, 2022

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).

GitHub

https://github.com/academind/react-complete-guide-code
Comments
  • 1. 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.

    Reviewed by metters at 2021-06-06 08:58
  • 2. FIX: app crash when opening Modal

    App was crashing when attempting to open the Modal. Fixed by changing ReactDOM imports. Thank you for such a complete and well explained React course.

    Reviewed by andriy-koz at 2022-05-16 01:39
  • 3. Contribution to Button CSS

    Right now, if I use this css file, the button covers the full-width of the card which looks ugly. So I added "display: inline-block" to make the button takes up space of its content-width.

    Reviewed by hahusahin at 2022-02-25 12:49
  • 4. Update Cart.js

    When I tested the application I noticed the item count inside the cart skyrockets after just a few clicks. Found out that the current implementation essentially doubles the item count Here is an edit that adds only 1 item when + is pressed

    Reviewed by MiachMih at 2022-02-25 06:23
  • 5. Found Vulnerability with total amount feature

    Adding and deleting the meal items in very specific order takes the total Amount to negative zero. It's a quick but challenging Fix to deal with this bug. Here's how you can trigger this vulnerability.

    1. Refresh the page.
    2. Add one item to the cart.
    3. Enter another item and increase its amount to 2.
    4. delete an item whose amount is 2. now, its amount should be 1
    5. delete the item which is added the very first time.
    6. then delete the item whose amount was 2, and your totalAmount will be negative zero.

    image

    Replace the code with this one in CartProvider.js where action.type is REMOVE

      if (action.type === 'REMOVE') {
        const existingCartItemIndex = state.items.findIndex(
          (item) => item.id === action.id
        );
        const existingItem = state.items[existingCartItemIndex];
        // Added .toFixed(2) for solving the totalAmount issue.
        const updatedTotalAmount = (state.totalAmount).toFixed(2) - existingItem.price;
        let updatedItems;
        if (existingItem.amount === 1) {
          updatedItems = state.items.filter(item => item.id !== action.id);
        } 
        else {
          const updatedItem = {...existingItem, amount: existingItem.amount - 1 };
          updatedItems = [...state.items];
          updatedItems[existingCartItemIndex] = updatedItem;
        }
        console.log("Amount Dec:" ,updatedTotalAmount);
        return {
          items: updatedItems,
          totalAmount: updatedTotalAmount
        }
      }
    
    Reviewed by AqibNaeem19 at 2021-09-14 12:11
The starter code for the final assessment project for Udacity's React & Redux course

Employee Polls Project This is the starter code for the final assessment project

May 23, 2022
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

Jun 24, 2022
CLI, Local API and Local client for React and Typescript: Build a Portfolio Project course.

?? JBook (CLI, Local API, Local Client) Complete project of React and Typescript: Build a Portfolio Project course. You can find the whole repo at Git

Oct 30, 2021
Basic React+Django application for the game 'Tombola'. The code has been rushed for Christmas eve, you will not find efficient nor optized code.

Tombola Basic React+Django application for the game 'Tombola'. The code has been rushed for Christmas eve, you will not find efficient nor optimized c

Dec 30, 2021
spring springMVC Hadoop HBase React AntUI course manage system

CourseManageService Spring、SpringMVC + Hasdoop HBase Course Manage System Quick Start 1 change your hBase service adress:site.linkway.core.dao.HbaseUt

Nov 6, 2021
This project is my ReactJS course on Udemy.com

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 6, 2022
In this React JS course, create-react-app was used to create the project using typescript as the standard language for development

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 7, 2022
Next course starter

next-course-starter A NextJS starter to get you started creating educational materials using Markdown Get Started Set up Node.js v14+ Clone this repo

Jun 19, 2022
A Next.js boilerplate to be used in a course called React Avançado

This is a Next.js boilerplate to be used in a course called React Avançado. What is inside? This project uses lot of stuff as: TypeScript NextJS Style

Jun 9, 2022
Personal portfolio inspired by VS Code and Github, using React, Context API, html and CSS
Personal portfolio inspired by VS Code and Github, using React, Context API, html and CSS

Personal portfolio inspired by VS Code and Github, using React, Context API, html and CSS

Jun 17, 2022
A complete set up of the React application with Typescript, Webpack 5, Babel v7, SSR, Code Splitting and HMR.

A complete set up of the React application with Typescript, Webpack 5, Babel v7, SSR, Code Splitting and HMR.

Jun 7, 2022
This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.
This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

This project is collection of large projects's source code (codebases), built with Reactjs. Eg: Bestbuy, Postman, Trello, Udacity, Coursera, Skillshare, Invision, Intercom, Pipedrive, ... and more.

Jun 22, 2022
React component for highlighting js and jsx code with copy to clipboard functionallity
React component for highlighting js and jsx code with copy to clipboard functionallity

✨ ??️ React Highlight ✨ ??️ React component for highlighting js and jsx code wit

Mar 29, 2022
Qr-code-styling - JavaScript library for generating QR codes with a logo and styling
Qr-code-styling - JavaScript library for generating QR codes with a logo and styling

QR Code Styling JavaScript library for generating QR codes with a logo and styli

Jun 17, 2022
A CLI tool to clean out boilerplate code created by create-react-app

Clean React Clean React is a CLI tool that removes and modifies some of the boilerplate files and code that are being generated when initiating a new

Jun 14, 2022
A Cool VSCode extension that lets you create react component files/folders instantly with boilerplate code. It also handles imports/exports on its own.
A Cool VSCode extension that lets you create react component files/folders instantly with boilerplate code. It also handles imports/exports on its own.

React Component Generator v1.0.0 A cool VSCode extension that lets you create your component's files/folders instantly with boilerplate code. Also aut

Jun 16, 2022
💥A cross-platform Node.js based CLI that generates boilerplate code for different tailwind web applications.
💥A cross-platform Node.js based CLI that generates boilerplate code for different tailwind web applications.

??A cross-platform Node.js based CLI that generates boilerplate code for different tailwind web applications.

Jun 10, 2022
Simple React-Native boilerplate code in Typescript for getting started with a new project quickly. It has all the essentials that one would require in a project.

react-native-boilerplate-typescript Simple React-Native boilerplate code in Typescript for getting started with a new project quickly. It has all the

Feb 25, 2022
Practice code-typing with top 1000 keywords of the most popular programming languages.
Practice code-typing with top 1000 keywords of the most popular programming languages.

code-type Typing practice for programmers Practice code-typing with top 1000 keywords of the most popular programming languages. Getting Started These

Apr 25, 2022