Web Development Crash Course

Hosted by Rubberdøk

Preparation

Following these steps prepares you to join the interactive React demo of the crash course. This is not mandatory, but I recommend everyone to do it to maximize their learning.

1. Download and install Node.js from https://nodejs.org/en/
   • Select the "Recommended For Most Users" option
2. Find the terminal on your computer
   • Mac: Terminal
   • Windows: Powershell / Command Prompt / Windows Terminal
3. Open the terminal, and check that Node was installed correctly by typing npm --version
   • If npm is not recognized, try restarting your computer. If it still does not work, try following these steps for Windows, or these for Mac.
4. Type npx create-react-app react-demo in the terminal
   • npx this time, not npm!
   • If prompted to install create-react-app, type y.
   • This creates a React app called react-demo.
   • If you're on a Mac, you may be prompted to install Command Line Developer Tools. Do it!
5. Type cd react-demo to move to the new react-demo subfolder
6. Type npm start
   • After some setup, this should open a browser tab with your app! Now you're all set for the interactive demo.

In addition, I recommend everyone to install VSCode as your code editor:

1. Download and install from https://code.visualstudio.com/
2. Launch it
3. Go to File -> Open Folder
4. Find the react-demo folder, and double-click it. If you made it from a fresh terminal window earlier, it should be located in:
   • Mac: /Users/[your username]/react-demo (press Command + Shift + H and you should see it)
   • Windows: C:\Users\[your username]\react-demo
5. Now you should see your React app files on the left in VSCode. Next time you open VSCode, you'll enter right into this folder and be ready to join the demo!

If you have any trouble with the preparation, please file an issue.

Repo Contents

• react-demo contains a simple React todo list app used for the interactive demo.
• basicbackend contains a simple example backend todo app, written in Go.
• basicfrontend contains a re-implementation of the todo list app from react-demo, but this time using the API from basicbackend to save todos.
• slides.pdf contains the slides from the crash course presentation.
• slide_examples contains the files used for the code examples in the crash course slides.