Like many others, I began my development journey with HTML, CSS, and JavaScript. After gaining a decent understanding of these, I found myself asking, "What next?" I then started watching videos and reading articles, encountering a slew of jargon like PHP, Django, Spring Boot, React, and more. Among these, MERN stood out and felt overwhelming due to its hype—every prominent developer seemed to mention it. Out of curiosity, I explored some project source codes and tutorials, which initially scared me away from learning them so I moved on to other technologies. However, after building a few solid projects using the MERN stack, I now wish I had started earlier...
In this article, I'll break down what MERN is in an intuitive way to help you get started comfortably. Trust me, learning these technologies will make your life easier, and it's only challenging until you understand what exactly happens.
WTF is MongoDB
Like every other database, MongoDB is used to store data. However, unlike most traditional databases that store data in tables, MongoDB stores data in documents (similar to objects in JavaScript) grouped in collections. The main advantage is that the schema is optional, allowing you to add extra fields to a document as needed, which is very complicated in a relational database. MongoDB is flexible which makes the learning curve easy. But remember, most business information is structured with prominent relationships.
WTF is Express.js
Suppose you're working in a pizza shop that is always running and you keep getting orders from several clients. Here your task is to take the order, prepare the items that the client has ordered, and then serve him. You are not bothered about what the client does with it right. In the same way, Express is a JavaScript backend framework that is used to take requests that are ideally sent by the front end (React), do some computation as per the request, and then return a response. In technical terms, Express.js is a middleware framework for handling different routings of a webpage with a request and response cycle. Express provides a lot of benefits like easy connection with the database, serving static files like HTML and other resources, etc
WTF is React
You've seen HTML and JavaScript. In React, you can build user interfaces using HTML-like elements powered by JavaScript functionalities (JSX). React allows you to create user interfaces from individual pieces called reusable components. For example, if you're building a YouTube clone and need to list all the videos one below the other, the UI for each video stays the same, only the thumbnail and title change. You can create a single video component and map each video's data to it, making it reusable. Another reason React is a good choice is its optimized rendering performance by minimizing DOM updates (reconciliation).
WTF is Node.js
Node.js is a JavaScript runtime environment that runs JavaScript code outside of a browser (server-side). It coordinates communication between front-end and back-end components. To build applications using the MERN stack, you only need to install Node.js on your system. The rest of the requirements are available through a special community built by Node.js called npm (node package manager). Npm provides packages that make the development process faster and more efficient.
This is a simplified explanation of what MERN is. As you start practicing, you'll discover many features each technology offers, which will amaze you even more. I suggest beginners start by building APIs using Express and testing them with tools like Postman. Then, integrate a database using MongoDB, and finally, create the UI using React. Share your thoughts about this article in the comments. Soon, I'll write about how to get started with MERN.