DEV Community

Cover image for MERN Stack: A Beginner's guide
Anietie Brownson
Anietie Brownson

Posted on

MERN Stack: A Beginner's guide

The MERN stack is a group of JavaScript-based technologies that are used for faster application development by developers worldwide. So therefore, if you have been coding with JavaScript and are quite familiar with JSON(JavaScript Object Notation) then learning and picking up this stack is going to be easier since the underlying language is just one - JavaScript.

Below we are going to examine each of them and you’ll find out what makes them so special and versatile in application development.

PREREQUISITES FOR LEARNING THE MERN STACK

To be able to pick up the stack, it’s imperative that you have a good grasp of the following technologies:

  • HTML

  • CSS

  • JavaScript

Let's now examine each component one by one

MongoDB

MongoDB Logo

The first component in the stack is MongoDB which is a NoSQL database management system. By NoSQL, it means that it is a non-relational database and does not require a fixed schema or the traditional relational table model to store data. MongoDB stores the data using the BSON (Binary JavaScript Object Notation) format instead of rows and columns. This non-relational model for storing data makes for simplicity of design and easy scalability. Some features of MongoDB include:

  • It is document-oriented which means it stores data in document instead of rows and columns like SQL.

  • It provides data replication by creating multiple copies of data on different servers so that data is not lost in the event of a hardware failure.

  • Data retrieval is easier due to it's indexing feature. Every data stored is provided with primary and secondary indices which makes it easy to fetch data.

Express JS

Express JS Logo

Second on the list is Express JS which is a JavaScript server-side framework. It is a light and minimalist Node.js web framework and is used for building RESTful APIs and allows for faster and more scalable server-side web development. Some features of Express.js include:

  • It is easier and faster to build web applications using Express
  • It is easy to set up and is unopinionated.
  • It is single threaded and asynchronous which means it can process multiple tasks simultaneously.

React

React JS Logo

This is the client-side or frontend component of the stack. React is a JavaScript library that allows developers to write reusable pieces of code that makes it easier to build scalable apps. Created by Jordan Walke from Meta Inc, it has grown to be one of the most popular JavaScript libraries in the developer ecosystem and is widely used to build web and mobile apps. Some features include:

  • It adheres to the declarative programming paradigm which means the developer specifies what the program will execute but not how the program will implement the execution.
  • Uses the component based approach which enables you to write reusable pieces of code that can be imported and used anywhere in the program.
  • React components can be written in JSX (JavaScript Syntax Extension) which is a syntax similar to HTML and this makes it quite intuitive to learn.
  • It uses virtual DOM(Document Object Model). React creates a virtual representation of the UI in memory and syncs it with the ‘real’ DOM whenever changes are made and this in turn loads pages faster as it only renders those components that actually changed.
  • Data flow is unidirectional and that means parent components pass down data to child

Node

Node JS Logo

Node is a cross-platform and open-source runtime environment that runs on the V8 JavaScript Engine and enables you to execute JavaScript outside of the browser. Node.js runs on various platforms (Unix, macOS, Windows, Linux etc.) and is one of the most popular tools for web development. Some features of Node.js include:

  • It is enables you write JavaScript outside of the browser

  • It uses asynchronous programming which means that it can start a potentially long-running task while still being responsive to other events without having to wait for the task to finish processing.

  • It is open-source and has a huge community of supporters which makes it easy to find help when need arises.

ADVANTAGES OF USING THE MERN STACK

  • It supports the MVC (Model View Controller) architecture which separates the presentation logic, the business logic and data.

  • It is open-source and has a large community of supporters. So therefore you can be sure of seeing answers to any questions or problems you might have.

  • It is easy to learn because all the web development stages from the front end to the back end uses the JavaScript language.

  • Apps built using the MERN stack are durable and scalable.

Real-life MERN stack examples

Some popular apps built using the MERN stack include Netflix, Uber, Coursera, Instagram, PayPal, Airbnb etc.

So in conclusion, we have been able to look at the different technologies that make up the MERN stack and why they are quite popular with developers.

Thank you for reading.

Top comments (0)