Programming languages, platforms and libraries like React, Node, MongoDB etc. are today’s hot keys, and are in a huge demand by some of the top tech companies like Discord, Facebook, Instagram, Tesla and Netflix.
Incase you are not familiar with MERN stack or are willing to start, this post is for you! Let’s discuss the perfect roadmap for MERN stack web development..
Wait! You have been using the word MERN continuously! What exactly is MERN?
It is basically a cross platform document oriented database program. Unlike MySQL, MongoDB is a no-SQL database that stores JSON like objects along with Schema. The data is not stored in the form of tables and that’s how it differs from other database programs.
This is how the data stored in MongoDB looks like:
There are many reasons why MongoDB is excellent in so many aspects. Some of these are:
- High performance through indexing
- Dynamic schemas for models.
- Ability to store geospatial data through GeoJSON.
- High scalability through distributing data on multiple servers.
- Auto replication
In order to use MongoDB in our MERN application, we generally use a npm package called mongoose.
Express is a flexible and clean Node.js web application framework that provides a robust set of features to develop web and mobile applications. It facilitates the rapid development of Node based Web applications.
Express is the most popular web application framework which uses NodeJS. In MERN stack applications, Express’s role is to manage our backend API server, the one from which we will be fetching data from a database via our React frontend.
Code written is Express is very clean and easy to understand. In express there are things you should learn-
- Setting up your express server and listening on the port that you want it to.
- Establishment of routes/endpoints for data CRUD operations with the help of GET, POST, PUT, and DELETE.
- Reading the JSON form data sent from frontend via express.json() middleware.
- Setting up mongoose (or any other ODM) with Express.
The prime reason why react is used, is for Single Page Applications(SPA). SPA means rendering the entire website on one page rather than different pages of the websites like we normally do. For the routing part an npm package called react-router-dom is used.
Some important topic to learn in order to start with ReactJS-
- Learn to create states and props.
- Learn to write both class based and functional based components.
- Understand basic React Hooks like useState() and useEffect().
- Learn how to initialize and manage states using useState().
- Understand Conditional Rendering (very important.
- Learn how to fetch API (using fetch or axios) and use it will the help of useEffect() hook.
- Making form inputs controlled and handling form submits
After this you can learn advanced methods like Context APIs, Redux and styled components.
This is something very familiar to MEAN stack development and the only difference is MEAN stack uses Angular as the frontend framework, where MERN stack uses React for the frontend development.
Basic points to get started with Node-
- Learn how to initialize npm package.
- Learn how to use npm or yarn.
- Understand package.json file.
- Learn how to import and export modules
But why MERN stack? What are the benefits?
There are certain benefits and pros of MERN stack that makes it more popular than any other development stacks
- It comes with prebuilt testing tools.
- It facilitates the Model-View-Controller (MVC) model that ensures the smooth working of the website.
- MERN is considered a cost-effective stack as with open-source support, accessible set-up and reduced learning time, it may have the lowest development cost.
Okay that is fine, but how to integrate all of these!
Let’s try to understand the integration using a simple example of a banking system that helps you transfer some amount from one customer to another.
- What all things are required? First is an interface that includes a homepage, a view customer page where you can see the customers and a transfer page where u enter amount and select the receiver. This is for the front end.
- You need a server and API that helps you access the customers data like amount, ID, name etc. and manipulate the data depending on what the user is willing to do. You will use Node and Express for this.
- Lastly you require a database to store all the information that has to be fetched.
- So in react you create the basic interface using components. Initialize various states like users, current user, amount etc. Using ContextAPI you access the value of state where ever required in the page.
- All set! But how to get the initial values of state! They can’t be static right? Here is where the express is used. In express app you create various API routes that will access the database and pull the required data like users information and store it as the value of state “user”. This fetching can be done using axios.
- In database (MongoDB here) we create a cluster and put the connection key into the express app, so that they are connected. Now after connection we make a schema in express that will define how our collection will look like. For example our user scheme looks like-
7. The data is fetched from DB and changed in the React app whenever certain action is performed using useEffect(). The data is then displayed on the front end to the user.
This is the simple example of how MERN stack involves the usage of all 4 technologies to create a single web app.
The roadmap is basically understanding the components that make up the stack and try to learn in depth about how to play with it. Learn how to deploy the final MERN app, because it is pointless to create a website and keeping it to yourself
In today’s world nothing is easy and free, you have to put in efforts in order to achieve certain skills. There are many new advanced technologies and frameworks coming up and you have to maintain your pace accordingly! Don’t be afraid of picking up new technology thinking that you would fail. Learn it and make mistakes, we all learn from it. Perhaps one day you would be proud of yourself for having taken this decision at that time. Good Luck!
- Samarth Nehe