Before we start building React applications, there are two key tools we need to set up on your computer: Node.js and npm . These tools will help you create and manage your React projects. Don’t worry if these terms sound a bit confusing at first; I’ll break them down and explain why we need them.
Node.js is like a helper that allows you to run JavaScript on your computer, outside of the browser. Normally, JavaScript is used to make websites interactive, but it runs inside a web browser like Chrome or Firefox. However, when you start working with tools like React, you’ll need JavaScript to run on your computer itself, and that’s what Node.js allows you to do.
Think of it this way: If you want to build a treehouse, you’ll need tools like a hammer and nails. In the world of JavaScript, Node.js is one of those essential tools. It allows us to build and run JavaScript-based projects like React.
Now, along with Node.js, we also need something called npm , which stands for Node Package Manager . In simple terms, npm is a tool that helps you install and manage software packages (pieces of code) that you’ll use in your React project.
Let’s go back to the treehouse example. Imagine you’re building your treehouse, but you don’t want to make every part from scratch. You might buy ready-made parts, like pre-cut wooden boards or ladders. npm is like a giant store that contains thousands of ready-made pieces of code (called packages ) that you can use in your projects, so you don’t have to build everything yourself.
Together, Node.js and npm will make your life much easier as a React developer by helping you run your project and use all the great tools that others have already created.
Now that you know what Node.js and npm are, let’s go ahead and install them on your computer. The good news is that npm comes bundled with Node.js, so by installing Node.js, you’ll automatically get npm too. Here’s how to do it:
First, open your web browser and go to the official Node.js website: https://www.nodejs.org/.
When you get there, you’ll see two versions of Node.js available for download. One is labeled as LTS (Long Term Support), and the other is the Current version. For beginners, it’s best to go with the LTS version, as it’s more stable and reliable.
Click the green button that says "LTS" to start downloading Node.js.
Once the download is complete, open the file to begin the installation process. This will open a setup wizard that will guide you through the installation. Here’s what to do:
When the installation finishes, click "Finish" to close the setup. Congratulations, you’ve just installed Node.js and npm on your computer!
After installing Node.js, it’s a good idea to make sure everything was installed correctly. To do this, you’ll need to use your computer’scommand line (also known as Terminal on Mac or Command Prompt on Windows). Don’t worry if you’ve never used the command line before—we’ll guide you through it step by step.
This command asks your computer to tell you what version of Node.js is installed. If everything worked correctly, you’ll see a version number pop up, like `v16.x.x` (the numbers might be different depending on the version you installed).
Next, we’ll check if npm was installed correctly. In the same command line, type the following and press Enter:npm -v
Just like with Node.js, this will show the version of npm that’s installed on your computer. You should see a number like `8.x.x` (again, the numbers might be different based on your installation).
If you see version numbers for both Node.js and npm, you’re good to go! Everything is installed correctly.
Now that Node.js and npm are installed, you’re ready to move forward and start creating React projects. In the next lesson, we’ll set up a code editor (I recommend Visual Studio Code) and create your first React project using a tool called Create React App . Stay tuned!