1-links.md

Links mentioned in each lesson of the React Course:

Lesson 1

• Google Chrome installation instructions: https://github.com/SuperSimpleDev/installation-instructions/blob/main/google-chrome.md
• VSCode (Visual Studio Code) installation instructions: https://github.com/SuperSimpleDev/installation-instructions/blob/main/vscode.md
  
  
• JavaScript Full course: https://youtu.be/EerdGm-ehJQ
• HTML CSS Full course: https://youtu.be/G3e-cpL7ofc
  
  
• Starting code: https://supersimple.dev/react-basics
• External library example: https://unpkg.com/supersimpledev/external-library.js

Lesson 2

• Chatbot project: https://supersimple.dev/projects/chatbot
  
  
• HTML CSS Full course: https://youtu.be/G3e-cpL7ofc
• JavaScript Full course: https://youtu.be/EerdGm-ehJQ
  
  
• Product images for the exercises:
  https://supersimple.dev/images/cotton-socks.png
  https://supersimple.dev/images/tennis-balls.png
  https://supersimple.dev/images/plain-t-shirt.png

Lesson 3

• Chatbot external library: https://unpkg.com/supersimpledev/chatbot.js

Lesson 4

• HTML CSS Full course: https://youtu.be/G3e-cpL7ofc

Lesson 5

How to Install NodeJS

Install the latest version of NodeJS:
https://github.com/SuperSimpleDev/installation-instructions/blob/main/nodejs.md

Note: this course works with NodeJS version 20 or higher.
To check your version of NodeJS, run the command node -v in your command line.
If the version is lower than 20, you'll need to re-install a higher version of NodeJS.

Version of npx create-vite

Here's the version of create-vite we're going to use to set up React:

6.5.0

Here's the full command to set up React:

npx create-vite@6.5.0

Lesson 6

Version of npx create-vite

Click here to get the correct version of npx-vite to use.

Install Git

Click here for instructions on installing Git.

Starting code for Ecommerce Project

Click here to download the starting code.

Version of react-router

Here's the version of react-router we use:

7.8.0

Here's the full command to install react-router:

npm install react-router@7.8.0

react-router documentation

https://reactrouter.com/7.8.0/start/declarative/routing

Lesson 7

Ecommerce Backend: https://github.com/supersimpledev/ecommerce-backend-ai

Ecommerce Backend Documentation: https://github.com/SuperSimpleDev/ecommerce-backend-ai/blob/main/documentation.md

Create the Ecommerce Backend with AI: https://youtu.be/vBprybSmJs8

Version of axios

Here's the version of axios we use:

1.8.4

Here's the full command to install axios:

npm install axios@1.8.4

Version of dayjs

Here's the version of dayjs we use:

1.11.13

Here's the full command to install dayjs:

npm install dayjs@1.11.13

Lesson 8

Ecommerce Backend Documentation: https://github.com/SuperSimpleDev/ecommerce-backend-ai/blob/main/documentation.md

Lesson 9

Version of vitest

Here's the version of vitest we use:

3.1.2

Here's the full command to install vitest:

npm install --save-dev vitest@3.1.2

Install Packages for Integration Tests

npm install --save-dev @testing-library/react@16.3.0 @testing-library/jest-dom@6.6.3 @testing-library/user-event@14.6.1 jsdom@26.1.0

vitest.config.js Code

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './setupTests.js',
  }
});

setupTests.js Code

import '@testing-library/jest-dom';

Lesson 10

Ecommerce Backend (Updated): https://github.com/supersimpledev/ecommerce-backend-ai

Link to AWS: https://aws.amazon.com

AWS Free Tier: https://aws.amazon.com/free

AWS Troubleshooting Guide

Backend Overview: https://youtu.be/XBu54nfzxAQ

Put an HTML Website on the Internet: https://youtu.be/p1QU3kLFPdg

Elastic Beanstalk Instance Types

If you created your account after July 15, 2025 use these instance types:

t3.micro
t3.small

(If you don't see these instance types, just use the default instance types provided by Elastic Beanstalk)

If you created your account before July 15, 2025 use these instance types:

t3.micro
t2.micro

Database Instance Class

Use this instance class when creating the database:

db.t3.micro

Domain Name

Namecheap: https://namecheap.pxf.io/jeDGga
(This is an affiliate link. If you buy a domain using this link, part of your purchase will support SuperSimpleDev. Thank you!)

Lesson 11

Updates in React 19: https://react.dev/blog/2024/12/05/react-19

Set Up React Compiler

1. Make sure the command line is running in ecommerce-project (you may need to cd ecommerce-project). Install the React Compiler npm package:

npm install --save-dev babel-plugin-react-compiler@rc

2. Copy this react config:

react({
  babel: {
    plugins: [['babel-plugin-react-compiler', { target: '19' }]],
  },
})

3. Update the react config in vite.config.js:

export default defineConfig({
  /* Replace the default react config:
  plugins: [react()]
  */

  // With the react config you copied above, like this:
  plugins: [react({
    babel: {
      plugins: [['babel-plugin-react-compiler', { target: '19' }]],
    },
  })],

  ...
})

Check if React Compiler is Working

1. Start the backend using npm run dev.
2. Start the frontend using npm run dev.
3. Install the React DevTools Chrome extension.
4. In your project (open the URL provided by Vite in the browser), open the Console, and open the "Components" tab.
5. If there's a badge beside the components called "Memo ✨" the React Compiler is working.

Version of npx create-vite

Here's the version of create-vite we're going to use to set up TypeScript React:

6.5.0

Here's the full command to set up TypeScript React:

npx create-vite@6.5.0

Other Links

Create GitHub account for GitHub Copilot: https://github.com