What is MERN Stack?

Roadmap to Become a MERN Stack Developer

Becoming a MERN stack developer involves mastering each of the four technologies in the stack. Here’s a roadmap that can guide you through the learning process:

1. Learn JavaScript: JavaScript is the foundation of the MERN stack. Start by learning the basics of JavaScript, including variables, functions, loops, objects, and arrays. Once you have a solid understanding, move on to more advanced concepts like closures, promises, and async/await.
    
2. Master Node.js: Since Node.js allows you to run JavaScript on the server side, learning it is essential. You should understand how to build a basic server, handle HTTP requests, and work with file systems.
    
3. Learn Express.js: Express.js will help you simplify the back-end development process. Learn how to set up routes, middleware, and APIs to interact with the front-end and the database.
    
4. Learn MongoDB: MongoDB is a NoSQL database, so you need to learn how to store and retrieve data from it. Learn how to work with collections, documents, and queries in MongoDB.
    
5. Master React: React is crucial for building the user interface of your web applications. Learn how to create components, manage state, and handle events in React. You'll also need to learn how to integrate React with the back-end using API calls.
    
6. Build Projects: Once you’ve learned all the components of the MERN stack, start building projects. Create simple applications like a to-do list, a blog, or an e-commerce website to practice and showcase your skills.

MERN Stack Components

Let's take a closer look at each component of the MERN stack & understand their roles:

1. MongoDB:

• MongoDB is a popular NoSQL database that stores data in flexible, JSON-like documents.
   
• It provides high scalability, performance, & flexibility for handling unstructured or semi-structured data.
   
• MongoDB's document model allows for easy storage & retrieval of complex data structures.
   
• It supports powerful querying, indexing, & aggregation capabilities.
   
• Example of connecting to MongoDB using Node.js:

const MongoClient = require('mongodb').MongoClient;
const uri = 'mongodb://localhost:27017/mydb';
MongoClient.connect(uri, (err, client) => {
  if (err) {
    console.error('Error connecting to MongoDB:', err);
    return;
  }
  console.log('Connected to MongoDB');
  const db = client.db('mydb');
  // Perform database operations here
  client.close();
});

2. Express.js

• Express.js is a minimal & flexible web application framework for Node.js.
   
• It provides a robust set of features for building web applications & APIs.
   
• Express.js simplifies the process of handling HTTP requests, routing, & middleware integration.
   
• It allows developers to define routes, handle requests & responses, & implement server-side logic.
   
• Example of a basic Express.js server:

const express = require('express');
const app = express();
app.get('/', (req, res) => {
  res.send('Hello, World!');
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

3. React

• React is a JavaScript library for building interactive user interfaces.
   
• It follows a component-based architecture, allowing developers to create reusable UI components.
   
• React efficiently updates the view when data changes, providing a smooth & responsive user experience.
   
• It uses a virtual DOM (Document Object Model) to optimize rendering & minimize unnecessary updates.
   
• Example of a simple React component:

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

4. Node.js

• Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.
   
• It allows developers to run JavaScript on the server-side, enabling full-stack JavaScript development.
   
• Node.js provides an event-driven, non-blocking I/O model, making it efficient & scalable.
   
• It has a vast ecosystem of packages & libraries available through the npm (Node Package Manager) registry.
   
• Example of a Node.js script that reads a file:

const fs = require('fs');
fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) {
    console.error('Error reading file:', err);
    return;
  }
  console.log('File contents:', data);
});

Getting Started with MERN Stack

To start with the MERN stack, you need to have Node.js and MongoDB installed on your system. Let’s look at the basic steps to get started:

1.Install Node.js and npm: Node.js comes with npm (Node Package Manager), which helps you install libraries and frameworks. Download and install Node.js from the official website: Node.js Download.

2.Install MongoDB: MongoDB is available for download on their official website: MongoDB Download. Follow the instructions to install MongoDB on your system.
 

3.Set up the project: Once you have Node.js and MongoDB installed, you can start setting up your MERN stack project by creating a new directory for your project and running the following command to initialize it:

npm init -y

This will create a package.json file in your project folder.

4.Install necessary dependencies: Install the core dependencies required for the MERN stack. For the back-end, you’ll need Express.js and MongoDB’s Node.js driver, and for the front-end, you’ll need React.

npm install express mongoose react react-dom

Setting Up a MERN Stack Project

Let’s now look at how to set up a simple MERN stack project. Here’s how you can create a basic back-end API with Express.js and a simple front-end with React:

1. Setting up the back-end (Express.js + MongoDB)

First, create a new file server.js for the back-end. This will set up a basic Express server and connect to MongoDB.

const express = require('express');
const mongoose = require('mongoose');
const app = express();
const port = 5000;
// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/mernstack', { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.log(err));


// Basic route
app.get('/', (req, res) => {
  res.send('Hello, MERN Stack!');
});


// Start the server
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

To start the back-end server, run the following command:

node server.js

2. Setting up the front-end (React)

In the same project directory, create a new directory called client and initialize a React project:

npx create-react-app client

Once the React app is set up, navigate to the client/src/App.js file and update it to fetch data from the back-end:

import React, { useEffect, useState } from 'react';
function App() {
  const [message, setMessage] = useState('');
 useEffect(() => {
    fetch('/')
      .then(response => response.text())
      .then(data => setMessage(data));
  }, []);


  return (
    <div className="App">
      <h1>{message}</h1>
    </div>
  );
}

export default App;

To start the React development server, run the following command:

npm start

Getting to Know MERN Stack Components

• MongoDB: This is where your application stores data, such as user information or posts. It’s a NoSQL database, meaning it doesn't require a fixed schema.
   
• Express.js: Express.js is the framework you use to build back-end APIs. It handles HTTP requests, routes, and responses.
   
• React: React is used for building dynamic, interactive front-end user interfaces. It allows for reusable components and state management.
   
• Node.js: Node.js is the runtime environment that runs your JavaScript on the server side, allowing you to build both the back-end and front-end in the same language.

Frequently Asked Questions

What is MERN Stack used for? 

MERN Stack is used for building modern web applications using JavaScript. It allows developers to create both the front-end and back-end with a single language (JavaScript).

Do I need to learn all the components of MERN? 

Yes, to become a proficient MERN stack developer, you need to understand all four components: MongoDB, Express.js, React, and Node.js.

Can I use MERN stack for building real-world applications? 

Yes, MERN stack is commonly used for building production-ready, scalable web applications like e-commerce platforms, blogs, social media sites, and more.

Conclusion

In this article, we discussed the MERN stack, how it works, and the roadmap to becoming a MERN stack developer. We also covered how to get started with a MERN stack project and how to use each component effectively. By following the roadmap and working on projects, you’ll be able to master the MERN stack and build powerful web applications.

You can also check out our other blogs on Code360.