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!
- Introduction to the MERN Stack
- Learning MongoDB
- Learning ExpressJS
- Learning ReactJS
- Learning NodeJS
Introduction to the MERN Stack
What is a Tech Stack?
How Do I Create a MERN Stack?
On the back end of a MERN stack, we use the following technologies:
- 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.
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.
What is Express?
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.
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.
JSX and Components
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.
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.
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.
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.
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!