What Does A React Library Development Environment Look Like?

Get the required tooling installed for developing our library.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Creating React Libraries from Scratch course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Creating React Libraries from Scratch, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Creating React Libraries from Scratch

  • [00:00 - 00:09] For this course, we'll need a few packages and tools installed on our computer. Throughout this course, I'll be using Windows, PowerShell, Firefox, and Visual Studio Code for development.

    [00:10 - 00:21] 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 Mac OS or Linux.

    [00:22 - 00:36] For this course, we will need Node.js and npm, which get installed together. Yarn, git, a web browser like Chrome, Firefox, Edge, any modern web browser will work, a terminal like Bash or PowerShell, and a code editor.

    [00:37 - 00:45] Visual Studio Code, Vim, Emacs, whatever you prefer. Node.js is a JavaScript runtime that allows us to execute JavaScript on a computer without a web browser.

    [00:46 - 00:54] Out of the box, installing Node.js will also install npm, or the Node package manager. We'll be using these technologies heavily, so let's get them installed.

    [00:55 - 01:07] Navigate to the Node.js website and download the latest long-term supporter LTS installer for your operating system. If you prefer using a package manager, refer to Node.js's package manager documentation.

    [01:08 - 01:19] Once installed, open a terminal and run Node -V to check if Node is installed. This tells us the version of Node, and in my case, I'm using 14.16.0.

    [01:20 - 01:25] Yarn is a package manager and a project manager. Think of Yarn as an extension to npm.

    [01:26 - 01:41] In this course, we'll be using Yarn version 1, though much of the same work flows and commands will work in Yarn version 2. To install Yarn, run npm install -g yarn.

    [01:42 - 01:50] Once everything is installed, run yarn -V to check your current version. I'll be using 1.22.10.

    [01:51 - 02:00] Git is a very popular distributed version control system. We'll be using Git to allow multiple contributors to work on a codebase and has a way to communicate with GitHub.

    [02:01 - 02:12] To install Git, navigate to the Git website and click download for your chosen operating system. We can check the version, running git -version.

    [02:13 - 02:19] Visual Studio Code has a lot of great extensions and auto-completion features. We'll be using it as our editor in this course.

    [02:20 - 02:24] To download Visual Studio Code, go to the Visual Studio website and download it .