webdev basics

JAVASCRIPT: FROM ZERO TO HERO

Last updated on

JavaScript: Part 6 - The Ecosystem & Next Steps

Welcome to the finale!

You now know the JavaScript language. But if you walk into a software company today, you won’t just see .js files. You’ll hear terms like “npm,” “Node,” “Git,” and “React.”

This part isn’t about writing more loops or functions. It’s about the tools that surround the language.

Module 20: Node.js and npm (The Powerhouse)

For a long time, JavaScript only lived inside the browser. Node.js changed that.

20.1 What is Node.js?

Node.js allows you to run JavaScript outside of the browser—on your computer or a server. This means you can use JavaScript to build backends (servers), desktop apps, and even robots.

  • Do you need to learn it now? You just need to install it. We mostly use it to run the tools that build our modern frontend websites.

20.2 What is npm?

When you install Node, you get npm (Node Package Manager). Think of npm as the “App Store” for code.

Instead of writing a complex date formatting function yourself, you can download a package (library) that someone else wrote.

Common Commands:

  • npm init: Sets up a new project (creates a package.json file).
  • npm install [package-name]: Downloads a library (e.g., npm install axios).
  • npm start or npm run dev: Runs your project.

Module 21: Version Control (Git)

This is non-negotiable. Every developer must know Git.

21.1 What is Git?

Git is a Time Machine for your code. Imagine you work on a project for 3 days, and then you accidentally delete a crucial file. Without Git, you are doomed. With Git, you just “rewind” to the version from 3 days ago.

21.2 Git vs. GitHub

  • Git: The software on your computer that tracks changes.
  • GitHub: The website where you upload those changes to share with others or back them up.

The Basic Workflow:

  1. git init: Start tracking this folder.
  2. git add .: “Stage” your changes (prepare them to be saved).
  3. git commit -m "Message": Save a snapshot (Check point).
  4. git push: Upload your code to GitHub.

Module 22: Frameworks (Where to go next?)

Once you are comfortable with “Vanilla” (plain) JavaScript, you will move on to a Framework.

Why do we need Frameworks?

Building complex apps (like Instagram or Uber) with plain JS is hard. You have to manually select elements and update text every time data changes. Frameworks handle the boring stuff (updating the DOM) automatically, so you can focus on logic.

The Big Three

  1. React.js (The King): Created by Facebook. It’s the most popular job requirement in 2025. It uses “Components” to build UIs.
  2. Vue.js (The Friendly One): Easier to learn than React, very popular in Asia and among freelancers.
  3. Angular (The Enterprise): Created by Google. It’s a full-blown platform, often used by banks and large corporations.

My Advice: Start with React. It has the most jobs and tutorials.

The Final Project: A “Real” Modern App

To graduate from this course, try to build something that uses an external library.

Project: “Cryptocurrency Tracker” Goal: Use the axios library (installed via npm) to fetch data instead of the default fetch.

Steps:

  1. Install Node.js.
  2. Create a folder and run npm init -y.
  3. Install axios: npm install axios.
  4. Create index.js and use axios to get Bitcoin prices.
// index.js
// Note: In Node, we use 'require' instead of 'import' (unless configured otherwise)
const axios = require('axios');

async function getBitcoinPrice() {
  try {
    const response = await axios.get('https://api.coindesk.com/v1/bpi/currentprice.json');
    console.log("Current Bitcoin Price: $" + response.data.bpi.USD.rate);
  } catch (error) {
    console.error(error);
  }
}

getBitcoinPrice();
  1. Run it in your terminal: node index.js.

Conclusion: You Are A Developer

Congratulations! You have journeyed through:

  • Part 1-2: The Basics & DOM.
  • Part 3-4: Modern Syntax & Async.
  • Part 5-6: Advanced Concepts & The Ecosystem.

What should you do tomorrow? Build things. Don’t watch more tutorials. Build a calculator. Build a weather app. Build a clone of the Google homepage. You will get stuck, and that is where the real learning happens.

- End of Series -