Prerequisites
Let's take care of the essentials first, like setting up a development environment, Git and Node.
Because we are going to work firsthand with code across several platforms, we'll first need to get your computer set up with the central tooling first.
You are going to need Node (which includes npm
) and Git installed on your system if you want to follow along with most of the hands-on programming steps. Node is the JavaScript runtime. Git is our version control system. Finally, you'll need a terminal of some kind where you can run Node.
For the remainder of the course, I will assume that you have some working knowledge of the above. If you don't, do take a look at some resources; maybe something below will suit your needs?
In case you are new, the technical level of the course will be "broad" rather than "deep," so you should be able to follow along quite nicely without too much teeth-grinding. Otherwise, feel free to drop a comment here! The approach in this course will mostly be that you receive code samples to insert in your own codebase, so in essence, you wouldn't need to do a lot of undirected coding.
On top of these skills, if you wish to add your personal craftspersonship and flair to the main project, you should ideally have some prior practical experience with React and modern Node.js development.
Integrated Development Environment (IDE)#
Let's begin with the "Integrated Development Environment" (IDE for short).
These come in many forms. Seasoned folks will have a lot of opinions on their choice of IDE, but some good advice, if you're just starting, is to go with one of the common development tools out there.
For this course, I will use Visual Studio Code as my IDE. It's a fantastic tool that is highly customizable and has a big market share. You simply can't go wrong with it. It also works on Linux, Mac, and Windows. Since it's customizable, the specific look with my fonts and color scheme most likely won't be what you're having—but don't sweat those details!
To get VS Code going is simply a matter of downloading the file compiled for your operating system, installing it, and then starting it up.
Certain features are only available by using extensions. These can be downloaded through the Extensions pane. In this course, we won't use any specific extensions, but that will explain why some behaviors may differ from machine to machine.

Optional: Terminal#
You may see me use a regular terminal in certain places. Functionally, it's going to run the same as the VS Code terminal.
This page is a preview of The newline Guide to React Component Design Systems with Figmagic