The MERN technology stack is one of the most popular. It stands for MongoDB, ExpressJS, ReactJS, and NodeJS. As you can imagine, it takes a lot of dedicated learning and persistence to learn that many technologies and frameworks just to develop a full-stack app! In this MERN stack roadmap, I’m going to show you how to master the MERN stack and become a full-stack web developer. Let’s get started!
Contents
Introduction to the MERN Stack
What is a Tech Stack?
A tech stack is the set of technologies (frameworks, libraries, etc.) that your application uses to function. On the back end of your app, this could include programming languages like Python or PHP, web frameworks like Django and Laravel, and databases like MySQL or Postgres. On the front end, you will often have a UI framework that could be as simple as Bootstrap or Svelte or as complex as Angular and React. Almost all front-end frameworks use JavaScript as their programming language, but the release of PyScript has begun to change that. Very simple apps may use plain HTML, CSS, and JavaScript, but this approach is very inefficient for larger apps.
How Do I Create a MERN Stack?
On the front end, a MERN stack uses ReactJS, a JavaScript-based framework for developing an application’s UI. A React app is about 99% JavaScript/JSX and 1% HTML, so for those of us who hate the dumb simplicity of HTML (no offense), you will love React. (Okay, to be fair JSX is in a sense still HTML, just modified to co-exist with JavaScript code.)
On the back end of a MERN stack, we use the following technologies:
- JavaScript as the programming language – yes, that means you have the same language on the front end and the back end!
- MongoDB as the database
- ExpressJS as the web framework
- Mongoose as the ODM to interact with the database
Let’s go over each of these technologies one by one.
Learning MongoDB
MongoDB is a very versatile database, and one that is ideal for JavaScript apps. When it comes to learning MongoDB, there are several things you should understand.
SQL vs. no-SQL Databases
There are two major types of databases: SQL and no-SQL. Another name for a SQL database is a relational database, and they organize data into tables of rows and columns. No-SQL databases can take many forms, from following a document storage model to more unique paradigms like GraphQL.
MongoDB is a no-SQL or non-relational database. It uses a document storage model, in which each record of data is inserted as a separate document (which is really just a JSON object, as we’ll see below). This means that MongoDB lacks certain advantages that SQL databases have. But it also means that MongoDB is extremely versatile, as you can store data however you like.
BSON data format
BSON is short for Binary JSON, and it is identical to JSON except in the way it works under the hood. There is no need to understand it on that level, but it is important to be familiar with JSON syntax. Each document in MongoDB is a BSON object, and you will need to input these directly if you use the Mongo Shell.
The Mongo Shell
The Mongo Shell is a command-line program used to directly interact with a MongoDB database. It is extremely important to learn the commands used in the Mongo Shell, as there will be times you’ll need to directly enter queries. Database management is an important part of full-stack development, so your time will not be wasted.
Learning ExpressJS
What is Express?
One of the most important stops in a MERN stack roadmap is ExpressJS. ExpressJS is the web framework you need to learn to create web servers with JavaScript/Node. It is a minimalistic, unopinionated framework that you can use to easily set up a web server with a minimal amount of code.
Express works by providing you with a set of functions used to set up routes for different HTTP verbs (like GET or POST). For example, to handle GET requests on the root route of your app, the code would look something like this: get('/', (req, res) => res.send('Request received!')). That line will send the words ‘Request received!’ to the browser whenever you make a GET request the root route.
Express Parameters, Query Strings, and the Request Body
As stated above, Express is used to send responses for various routes on your app. But things get more complicated when you have routes that aren’t hard-coded – for example, a user ID or post ID. These typically take the form of path parameters and are important to understand.
Also important is learning how to receive query string with Express. This will allow you to set up search forms and the like.
Finally, and perhaps most vital, is the request body, which is what carries the data in a POST request. You will need to know how to get data out of the request body in Express, in order to create things like registration forms or any other kind of form that sends data instead of getting it.
REST (Representational State Transfer) APIs
REST is a concept that sounds intimidating, but is actually simple when you start to work with it. It is nothing but a set of guidelines for how you should set up your API routes (the Express routes we learned about earlier). Following these rules helps to organize your application’s routes in a way that makes sense.
It also helps to learn about REST APIs because most third-party APIs follow the REST architecture.
GeeksForGeeks has a great guide on REST APIs that you can read for more information.
Express Middleware
Middleware is really the key to learning Express. A middleware is a bit of code that runs somewhere in between where a request begins and where it ends. Middleware are used for countless situations, but a common example is a private page that requires a password in the query string. A middleware will make sure the correct password is in the query string, then allow you through to the page.
Technically, Express applications are nothing but a large group of different middleware working together.
Learning ReactJS
ReactJS is an unavoidable checkpoint on the MERN stack roadmap. ReactJS is a relatively simple front-end framework for developing and designing web applications. It supports declarative code, which makes it a real joy to use over regular, imperative JavaScript. The following topics are all necessary to become competent in React.
React is actually my area of specialty. You can find great React tutorials on my YouTube channel, as well as articles on this website. Start with my introduction to React!
JSX and Components
To create the UI of your app, React uses a hybrid markup language called JSX (JavaScript XML). It is very similar to HTML, but there are still some important differences between JSX and HTML.
The core concept of React is that of components, which are reusable pieces of the UI. Every part of your UI is going to be its own component.
State & Props
State is the data used by your application, such as user-inputted form data or information from the database.
Props are pieces of data passed down from a parent component to its children. Data flow in React can get a little crazy, and props are central to the discussion.
Hooks
Hooks are functions that simplify certain features of React: state, for example. It is important to have a thorough understanding of all the major hooks: useState, useEffect, useMemo, and useContext.
The React docs have a great guide to hooks if you want more information.
React Router and Redux
React apps are by default SPAs – single-page applications. Any routing is done on the client side with React Router. React Router will render different React components depending on the current route.
You may be wondering why I was talking about Express routing when all React apps only have one page! The answer is that API routes and client-side routes are very different in a MERN stack. The API routes are used to interact with resources in the database; client-side routes are used to visit different pages on your app.
The Redux library solves the problem of complexity in an application’s data flow. It manages your app’s state in a central store, where any component can access it. Redux is vital for any medium to large-size React application.
Learning NodeJS
Originally, JavaScript was a front-end-only language, limited to creating animations, etc. But with the release of NodeJS, it became possible to run JavaScript code on the server. This means you only need to learn one programming language to develop both ends of your applications, saving developers huge amounts of time.
Bash (the terminal)
An important prerequisite to learning Node is to learn Bash. Bash (along with variants such as ZShell) is the “language” of the terminal, which is used to run Node along with a slew of other programs. You will be using Bash all the time when developing a full-stack application: to install dependencies, run your development server, and push commits to Git (or any other source control).
I made a list of the 11 most important Bash commands that you can use as a cheat sheet!
NPM, import/export syntax
NPM is the Node Package Manager and typically comes bundled in with Node when you install it. It is used to install packages into your application and to update/remove them. You will be using NPM to install everything from Express and Mongoose to React and Redux.
It is also important to be familiar with the ES6 import and export syntax. You will use this syntax to import packages such as Express, and also to import and export components in React.
Mongoose
In order to communicate with a document storage database like MongoDB, you need to use a package called Mongoose. Mongoose is an ODM: an Object-Document Mapper. As the name suggests, it maps documents from a MongoDB database to JavaScript objects so that they can be manipulated by the script. Mongoose is primarily used in combination with Express, because Express handles the API routes used to interact with MongoDB.
Nodemon
This last package isn’t strictly necessary, it’s just a tool that will make your development experience easier. Nodemon (a mix between Node and demon0 is an NPM package which, once given a script to run, will re-run it whenever the file updates.
When developing a Node server, one annoyance is the need to stop and restart the server every time you update one of the files. Nodemon will watch the file for changes, and automatically restart the server whenever there are any changes.
Conclusion
There you have it – a full MERN stack roadmap to success! The list may seem overwhelming, but it really should not take you long to become proficient in every one of these technologies. My biggest tip for you is to just start the process. Instead of worrying about how long it will take you to learn all of these things, just get started and you’ll be making progress in no time. You can’t finish something if you never start!
