Introduction to ReactJs - Part 2: Node Modules

By zooboole

**Before we dive deep into the various build tools for ReactJs, let's have one last stop on Node.js** to explore how it works and its concept of modules.

We are used to JavaScript in the browser. Because of that some of us don't even know or grasp the concept of the JavaScript runtime(engine). In the browser all you have to do to get the engine to run your JavaScript is to link it to your HTML document as shown bellow:

<!DOCTYPE html>
<html>
    <head>
        <title>Running JavaScript</title>
    </head>
    <body>
        <p>This page has some JavaScript for the JS runtime</p>
    </body>
    <script>
            alert("The JS Engine says 2 + 3 = " + 2+3 )
    </script>
</html>

Whenever you open this page on your browser, the little piece JavaScript code will be passed to the JavaScript engine that will run it and browser will alert the output: The JS Engine says 2 + 2 = 23.

Note that this JS code in the HTML can be written in various ways: inlined, embedded, externalized, etc.

Notice how it shows 23 instead of 5. Yeah, it's correct. It's a JavaScript thing. In this situation it's like I am joining strings together.

JavaScript Beyond the Browser: Node.js

Node.js is different. It doesn't exist in the browser. We need to get it installed separately on our machine. While JavaScript traditionally ran only in the browser, Node.js is a JavaScript runtime built on Chrome's V8 engine, enabling developers to run JavaScript code outside the browser.

So, before we continue, head over here to download the latest Node.js runtime for yourself. Follow the installation guide and you are set.

To confirm that you have it installed, open your terminal or command prompt and type in: node -v. ou should get something similar to this. Your version number might be different, that's fine for our goal.

λ node -v
v20.9.0

Now that we all have Node.js installed, let's submit some JavaScript to it and see how it runs it. Find a location on your machine, it might be your Documents folder. Then create a file and name it main.js or any name you want. Place the following code in it:

console.log("The Node Engine says 2 + 3 = " + 2 + 3)

Then open up your terminal again and run the following:

node main.js

Note: Move to the folder where the file is using cd. In my case, the file is located in C:\laragon\www\learning\node\tutorials. So you will do cd C:\laragon\www\learning\node\tutorials before running the command above. Otherwise, you could also use the full path of the file by doing node C:\laragon\www\learning\node\tutorials\main.js

If you got it right, you should see something similar to this:

λ node main.js
The Node Engine says 2 + 3 = 23

Node_modules folder

Congratulations! You can run your JavaScript code using Node.js runtime.

Now imagine what you can achieve with such possibility. You could an entire application and run it with Node.js without the intervention of the browser. That's exactly what the community of software developers around the world have done with Node.js. They went on to so many programs, and anyone can go and get them. They called such programs node packages. In fact there is a dedicated website that hosts all these packages allowing anyone to come and get them and use them in their own code. Because of this, whenever you install Node.js, it also installs another tool called Node Package Manager or npm. Let's check it out.

Go to your terminal again and type npm -v, you should get something similar to this:

λ npm -v 10.1.0

Remember, you never installed it.

To use it you move to your project folder in your terminal and run:

npm install packageName

For example, there this package called ant-design/colors. To installed in our project, let's cd to where our main.js file is located. Then run npm install @ant-design/colors

You should get something like:

λ npm install @ant-design/colors
added 4 packages in 8s

This shows that this person's code was added to your project. You can confirm it by going to your project folder. Over there you will see some folder(node_modules) and files appeared. Node_modules folder After that you can go into our main.js to make use of that package we just acquired. We will not explore this in this tutorial, it's beyond its scope.

Node Modules

Now let's touch on something essential to how node works. One of the core features of Node.js is its module system, which allows you to organize and reuse your code effectively.

Basically, you can make parts or an entire file of you code reused by other codes, just like the way we imported the ant-design/colors. This is very important to reduce the code base. Node sees every file as a module. A part of a file can be exported as a module and that part can be imported by another file(module)

What Are Modules?

In Node.js, every file is treated as a module. You can:

Export parts of a file as a module.
Import that module in another file to reuse its functionality.

Exporting and Importing Modules

Exporting a Module Let me show you how we can do that. Create a file named math.js with the following code:

    function add(a, b) {
        return a + b;
    }
    module.exports = { add };

In this code, we made the add function a module and exported it. A way of making it available for other modules to import it. This mean we can have part of the same file that are not exported.

Importing a Module Now let's see how to import and use some module. Create another file named app.js in the same directory and write:

    const math = require('./math');
    console.log(math.add(2, 3)); // Outputs: 5

Now go ahead and run you app file: node app.js. our output should look like this:

λ node app.js  
5

Congratulations! As simple as this principle looks, it's a powerful concept that changes a lot about writing and reusing code in JavaScript.

Why Are Node.js Modules Important?

Node.js modules are the foundation of modern JavaScript tools. They enable developers to:

Break Down Applications: Code is organized into smaller, reusable pieces.
Reuse Code: Modules promote efficiency by allowing the same code to be reused across different projects.
Power Modern Tools: Tools like Babel, Webpack, and Vite depend on Node.js modules to process and bundle JavaScript for React applications.

Summary

JavaScript is no longer confined to the browser; Node.js brings it to the server side.
Node.js modules allow developers to organize, export, and reuse their code.
NPM provides access to a vast ecosystem of packages that can enhance your project.

In the next lesson, we’ll explore how these concepts are leveraged by build tools like Babel and Webpack to create efficient workflows for building modern React applications.

Last updated 2025-01-17 UTC