Tools and Setup
This lesson will walk you through the tools and setup required to work with React comfortably.
We'll cover the following...
To work with React comfortably and without interruptions, a few conditions should be met. Installing these tools is not entirely necessary, but it does make our development workflow much easier. It is suggested to install all these tools in order to work with React comfortably.
Node.js and npm
Most of you will know Node.js as server-side JavaScript; however, this is only partly true. Node.js is a JavaScript Runtime Environment that is well-suited to write network applications, such as a server. Node.js also comes with a package management tool, commonly known as npm. The npm tool enables us to easily install new JavaScript libraries on our own machines, as well as write and run our own command-line scripts.
Instead of installing Node directly, we suggest using nvm for Mac or Linux, and nvm-windows for Windows. One of nvm’s advantages is that it does not require root privileges to install packages globally. Moreover, we can update your installed node version with a simple command-line expression (nvm install [version]). If we want to see the list of all available versions, we can run nvm ls-remote (Max/Linux) or nvm list available (Windows). For the remainder of this course, we suggest that you use the LTS version because it’s stable and will receive updates for years to come.
Yarn
While Node and npm already offer an excellent package manager, Yarn takes it a little bit further and offers simpler commands and better caching — and thus better performance.
Similar to React, Yarn was created at Facebook to make working with React a little bit easier. Although React works seamlessly with npm, we still suggest installing Yarn instead.
Yarn is gaining popularity, particularly in the React ecosystem due to its ease of use and better performance than npm. Once Node and npm have been installed, Yarn can be added as a global package via npm:
npm install --global yarn
Or in short:
npm i -g