If you took the fundamentals class and followed the previous installation guide, you will just need to upgrade a few things and install some Node.js packages.
You will need open your terminal. You can open it by pressing command+space and searching for terminal. Then run the following commands:
brew update
brew upgrade git
brew upgrade node@18
npm install -g npm@latest
npm install -g eslint@latest
npm install -g eslint-plugin-react
npm install -g eslint-plugin-react-hooks
You will also need to install the React Developer Tools. It is available in Google Chrome and Firefox.
This is what you will be installing today:
- Microsoft Teams
- Xcode
- Homebrew
- Git and Github
- Node.js (latest LTS version) and NPM Packages
- Visual Studio Code (Recommended) and Extensions
- Chrome or Firefox and Extensions
Before class began, you should have received emails and training from CanCode Communities about on how to install, setup, and use Microsoft Teams.
You will need to give Teams permissions for Screen Recording, because we ask students to share their screens during class. Here is how you can enable this on macOS
Xcode can be found in the App Store. It will take around 50 minutes to install, so please install ASAP.
Once Xcode is complete, go to your terminal and install the command line tools:
xcode-select --installHomebrew is a package manager for Mac, meaning that it will help make installing and managing a lot of command line software easier. We will be installing Node.js with Homebrew to avoid permission issues.
You will need open your terminal. You can open it by pressing command+space and searching for terminal.
If you already have Homebrew installed or if you are not sure whether you have it installed, type brew -v in your terminal. If you see a response like Homebrew 4.0.19, then you have it installed. Update homebrew with brew update and then you can skip ahead to the next section. If you get a command not found error, you will need to install Homebrew.
To install Homebrew, type this in your terminal:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"Hit enter when the installation prompts you to hit enter. At some point, you may be requested to enter your password. The password is the same password you use to login with your computer.
Once installed, type brew -v to confirm that everything worked. As a safe measure, type brew doctor. You should see Your system is ready to brew.
Type echo $PATH. Make sure that /usr/local/bin is somewhere in the response. If it is not, then type:
export PATH="/usr/local/bin:$PATH"Git is version control software. It is used for sharing code, combining team members' code and managing different versions of your code.
You will need to create a Github account if you do not have one.
If you are not sure whether you have it installed, type git --version in your terminal. If you see output like this - git version 2.40.1 - then congratulations! You already have git installed and you can skip ahead to the next section.
To install git, type this in your terminal:
brew install git
brew tap microsoft/git
brew install --cask git-credential-manager-coreWhen it's finished, type git --version to confirm that it has installed.
Node.js is a JavaScript runtime engine. It allows you to run JavaScript programs outside of Chrome, Safari, Edge or another web browser.
You will need to have the latest LTS version of Node installed as of June 2023 (18.x). If you already have Node.js installed, type node -v in your terminal. If you do not have the latest version, you can do one of the following to things:
- Upgrade Node.js with whatever you originally installed Node.js with. If you have Node.js projects on your computer and you wish to maintain them, this could break your existing projects.
- Install multiple version of Node.js on your computer with NVM. See the Node Version Manager (NVM) section of the Linux Installation Guide.
If you do not have Node.js installed, type this is your terminal:
brew install node@18When it’s finished, type node -v to confirm that it is now installed.
You should also update NPM. You can update it with:
npm install -g npm@latestESLint is a linter, meaning that it will point out potential errors in real-time while you are typing in a code editor like Visual Studio Code.
To install ESLint and its React plugins, type:
npm install -g eslint
npm install -g eslint-plugin-react
npm install -g eslint-plugin-react-hooksWhen it’s finished, type eslint -v in your terminal to confirm it is now installed.
Visual Studio Code is an IDE, which is an intelligent code editor. We will be teaching with Visual Studio Code and highly recommend that you use it too. If you are experienced with programming and the command line, and you believe that you can translate whatever we teach you in Visual Studio Code to your editor of choice, you may opt for another editor, but we will not be able to help you if problems arise.
To install, go to https://code.visualstudio.com and click on the Download Mac Universal dropdown and select the Stable version.
When it finishes downloading, double click on the downloaded ZIP file and move Visual Studio Code from your Downloads folder to your Applications folder. You many need to enter your password.
Open Visual Studio Code.
If you see this security warning at any time during our class, click on Open.
You should configure your computer so that you can open Visual Studio Code via the terminal. Press command+shift+p, search for shell command and click on Shell Command: Install 'code' command in PATH.
You should have a terminal open in the bottom panel of the screen like this. (If you do not, press control+ ~ to open it).
Click on it and enter the following:
git config --global core.editor "code --wait"
git config --global -eRestart Visual Studio Code.
Open the Extensions tab on the left, search for ESLint and install ESLint.
Once its installed, the Install button may have transformed into a Reload button. If you see Reload, click on it.
Prettier automatically formats your code and you can configure it to format your code whenever you save a file. Using this is optional for now but we will require it for group projects.
If you would like to use prettier, search for Prettier in the Extensions tab on the left and install Prettier - Code formatter. Once its installed, click on Reload if necessary.
You can now adjust Visual Studio's settings so that it will format on save and will play nicely with Prettier's defaults. Press command+shift+p, search for settings and click on Preferences: Open Settings (JSON)).
Paste the following into the JSON file. Do not overwrite any settings that you already have.
{
// ...
"editor.formatOnSave": true,
"editor.insertSpaces": true,
"editor.tabSize": 2
// ..
}You are required to use Chrome or Firefox because the React and Redux extensions for debugging your code are only available for these browsers. We recommend Chrome because we will be demonstrating Chrome's tools in class, but you are free to download any of following:
We will also ask you install the React Developer Tools extension as well. See the links above.