How to learn MERN stack

To learn MERN stack definitely adds value to your skillset. Most people are under the misapprehension that to be a software developer you learn a single programming language and start to code. But in reality, software developers tend to work with a variety of different technologies, all linked together and building on each other to achieve your goals.

The MERN stack is one of the most commonly used sets of technology in a software developer’s arsenal. So let’s dive into how to get started learning all the pieces.

What is a technology stack?

A technology stack is a combination of software, database, and programming language. It’s like a package of elements that come together to make the programmer’s life easier. It’ll usually involve both front-end technologies and back-end systems.

Each part of the stack deals with a different function. For example, you wouldn’t try and create a graph in Microsoft Word, you’d use Excel and then copy the result over to your document once you’d done the calculations in the spreadsheet. It’s the same principle in a technology stack.

What is MERN?

MERN is an open-source stack that helps developers create dynamic websites and applications. It uses JavaScript through all the different technologies. And each letter in the acronym stands for a different technology:

  • MongoDB – This is the database in the back-end. It stores the data the programmer will need. Uniquely, MongoDB stores its entries as documents, rather than a table (which is usually how a database works). This means that it can store data of different kinds in one place.
  • Express.js – This is a web framework. This gives you all the tools you need to host the website and automate tasks. It builds on top of Node.js.
  • React – This is a JavaScript library: a list of common functions you’ll need. It’s used to easily create user interfaces and other components, all in JavaScript. 
  • Node.js – This helps you build JavaScript applications quickly. It runs JavaScript on your machine, without going through your browser so that you can build your applications.

You’ll need to learn JavaScript

All of these components run on JavaScript. So to learn the MERN stack, that’s the language you’ll need to use.

JavaScript is fast, simple, and pretty versatile. But it’s far from perfect. It’s not the most secure language, some older browsers won’t support it and it can be quite hard to debug. Saying that it’s one of the most common languages out there.

You might hear of MEAN stack

There are other stacks that serve similar functions. The MEAN stack is one of these. Be careful not to confuse the two. The main difference is that MEAN uses Angular instead of React as its library, which means that code written using one won’t work with the other.

Step one: Learn JavaScript

Using all these tools needs knowledge of JavaScript. So you’ll first need to learn that. There are loads of resources, from reading key books to using online tutorials.

We recommend starting off with these:

  • Learn JavaScript – Full Course for Beginners – This three-and-a-half-hour video walks you through everything you need to know to learn the basics of JavaScript. Make sure to open the description to skip to the right section. 
  • Codecademy – There are a bunch of different courses on Codecademy that can help you get started. You’ll need to buy a membership for the pro lessons, but there are still plenty of free materials available.
  • JavaScript and JQuery by Jon Duckett – This book leads you through learning JavaScript assuming no prior knowledge and gives you plenty of practical exercises to practice.

Once you’ve got a handle on the language, you can start experimenting with the rest of the tools. But don’t try and jump into MERN without knowing anything, otherwise, a lot of the functionality isn’t going to make sense.

Step two: Familiarize yourself with the tools

Once you know JavaScript – at least well enough to write a couple of simple scripts – you’ll want to explore the different tools and play around with them. Each tool has its own set of documentation that you’ll need to read to get used to the tool.

  • MongoDB guides – The official guides will walk you through how to set up a new database, host it in the cloud and migrate any data across. 
  • Express.js – You’ll need this guide to install, set up, and run your first program. If you need any more advanced information, there are additional guides on the site, too.
  • React – There are tutorials and playgrounds you can jump into to try the libraries out. You can either learn by doing or go through their step by step guide.
  • Node.js – The guides here will take you through setting up and the core concepts.

Step three: Start a simple project

Now that you’ve learned JavaScript and have played around with the tools, the best way to learn them all is to set yourself a simple project. Not only will this be something you can add to your portfolio, later down the line, but it’s also the best way to learn. A simple project, without any guidance, will teach you more than any book, video or lesson.

You could create a simple to-do list, a calculator or another similar web app. The key here is making sure you create something that you can easily code in JavaScript. That way, you can focus on the relationship between the various tools rather than the coding challenge. Come up with a concept that you can host online, create a user interface for and that needs a large database.

Go on a bootcamp

Still want to learn MERN stack? We can help! Find out all about the MERN stack by joining our bootcamp. You’ll learn JavaScript, the different tools, and exactly how they all fit together through practical projects and hands-on experience. Read the full curriculum on our website.

dojo guide

Looking for a Career in Web Development?

Read our quick-start guide to becoming a Developer

  • Includes exclusive insight from a seasoned Web Developer
  • Uncovers the top career misconceptions holding you back
  • Highlights the must-have qualities all employers require
  • 89,615 downloads to date