Skip to main content

Installation Guide

In this guide, we will be getting your computer ready for building a React full stack project. We will be installing a few things. Everyone on the team needs to complete this step.

Note that many of you will be able to skip this page, but be sure to take a brief glance to make sure you’re not missing anything

Overview:​

  • Node.js
  • Visual Studio Code (VS Code)
  • Visual Studio Code Extensions

Node.js​

  1. Go to your web browser and search up Node.js (or click the embedded link)
  2. Click on “Download” in the Navbar
  3. Choose the Prebuilt Installer option
  4. Make sure that you’re installing the latest version for the correct operating system
    a. Which version of Node.js should I install?
    1. LTS stands for Long-term Support. Essentially, it’s the latest stable build. We recommend downloading the most recent LTS version.
  5. Follow the installation wizard
    1. There are a few additional setup options, we recommend you do your research before clicking on anything 😬

At this point Node should be installed and you should be ready to move on to the next step.

Caution: If you already had VS Code installed and opened BEFORE your Node.js installation, make sure you fully close and restart VS Code or else it won’t recognize the installation of Node.js.

Visual Studio Code​

  1. Go to your web browser and search up Visual Studio Code (or click the embedded link)
  2. Click on the big blue download button (it should be in respect to your operating system)
  3. Follow the installation wizard
    1. There are a few additional setup options, we recommend you do your research before clicking on anything.

Visual Studio Code Extensions​

In this section, we will open up VS Code and install some quality-of-life extensions. If this is your first time using Visual Studio Code, we highly recommend that you go through the beginner tutorial steps that they have already setup for you.

Once you are ready to install the extensions:

  1. On the sidebar, click on the Extensions icon. We’re now going to be searching and installing a few extensions.
  2. In the search bar type in “prettier”
    1. It should be the one pictured below with 50 million installations.
  3. In the search bar type in “es7+”
    1. There may be a few different options. Make sure it’s ES7+ React/Redux/React-Native snippets as shown below
  4. In the search bar type in “tailwind”
    1. It should be the one pictured below with 7.8 million installations.

Congratulations!​

Awesome job for making it to the end of the setup guide! Reward yourself with a little break. Stretch, stand up, go talk to a nearby hacker, or scroll Instagram reels for 30 minutes 😁

When you’re ready, go to the next page where we’ll guide you in the setup of the React project.