What Does A React Library Development Environment Look Like?

Get the required tooling installed for developing our library.

For this course, we'll need a few packages installed on our computer.

I use Windows, Powershell, Firefox, and Visual Studio Code for development. All the packages we need can be installed on any operating system, but I'll be showing you how to install them using Windows. Refer to each package's website for information on how to install them on macOS or Linux.

This course will require:

  • NodeJS/npm

  • Yarn

  • Git

  • A web browser (Chrome, Firefox, Edge, etc)

  • A terminal (Bash, Powershell, ZSH, etc)

  • A code editor (VSCode, Vim, Emacs, etc)

NodeJS/npm#

NodeJS is a JavaScript runtime that allows us to execute JavaScript on our computer without a web browser. Out of the box, installing NodeJS will also install npm (Node Package Manager). We'll be using these technologies heavily, so let's get them installed.

Navigate to the NodeJS website, download the latest long-term-support (LTS) installer for your operating system, and follow the installation wizard. If you prefer using a package manager refer to the NodeJS package manager documentation.

Once the installation is complete, open a terminal and run node -v to check if NodeJS is installed.

The terminal showing nodeJS v14.16.0 installed

Yarn#

Yarn is a package and project manager. Think of Yarn as an extension to npm. In this course, we'll use Yarn v1, though much of the same workflows and commands will work in Yarn v2.

To install Yarn, run npm install -g yarn in a terminal. Run yarn -v once the installation is complete. If a version is given then Yarn is successfully installed.

The terminal showing Yarn installed

Git#

Git is a very popular distributed version control system that keeps a history of our code changes. We'll use Git to allow multiple contributors to work on a single codebase, and as a way to communicate with GitHub.

Install Git by navigating to the Git website, and click download.

The terminal showing Git installed

Visual Studio Code (VSCode)#

Visual Studio Code is an Integrated Development Environment (IDE) with a wide range of extensions and helpful autocorrect features.

Install VSCode by navigating to the VSCode website, and clicking download..

A Visual Studio Code window.

Start a new discussion. All notification go to the author.