Setting Up Environment

In the previous sections, we have learned the basics of React. We now know how to create components, manage them, render information, and implement logic. However, all these tasks were done in CodeSandbox, which is excellent for studying.

But what about real-world projects? Do all developers create projects in CodeSandbox? Of course not. This section is dedicated to helping you start your project on your local machine, guide through the process step by step.

Step 1: Install Node.js and npm

We need to install Node.js and npm on the local machine.

Node.js is an open-source runtime environment that allows us to run JavaScript code on the server side.

npm stands for "Node Package Manager". It is a package manager for Node.js that allows developers to easily install, manage, and share reusable JavaScript code packages or modules.

• Go to the official Node.js website: https://nodejs.org;
• Download the installer for your operating system (Windows, macOS, or Linux). We are interested in the LTS version as it is stable and working;

• Run the installer and follow the installation instructions;
• After the installation, we should have Node.js and npm (Node Package Manager) installed on the machine.

How can we check do we have Node.js and npm installed?

To check if Node.js and npm are installed on the machine, we can open the computer's terminal (command prompt, PowerShell, or terminal emulator) and run the commands. Steps:

1. Open the terminal;

• Windows: Press Win + X and select "Windows PowerShell" from the menu. Alternatively, search for "PowerShell" in the Start menu;
• macOS: Go to "Applications" > "Utilities" > "Terminal". Another option is to use the "Spotlight" search by pressing Cmd + Space and typing "Terminal";
• Linux: The shortcut Ctrl + Alt + T is commonly used to open the terminal on many Linux distributions. However, depending on the specific distribution, there might be other methods such as searching for "Terminal" in the applications menu or using a different keyboard shortcut.

Note

If none of these methods work, it is recommended to refer to the documentation or support resources for the operating system to find the appropriate way to open the terminal. Or we can always google.

2. Check Node.js version;

In the terminal run the following command.

This command will display the version of Node.js installed on the machine. If Node.js is installed, we see the version number.

3. Check npm version.

In the terminal run the following command.

This command will display the version of npm installed on the machine. If npm is installed, we see the version number.

If both commands return the version numbers, Node.js and npm are successfully installed and available on the machine. If the commands are not recognized or return an error, it means that Node.js and/or npm are not installed, or their installation paths are not correctly configured. In that case, we may need to revisit the installation steps for Node.js and ensure the installation was completed successfully. Sometimes it is recommended to restart the machine.

Note

What version we get doesn't matter for now.