Kishan Sheth

Posted on Mar 14, 2021

RoadMap to learn MERN Stack for Beginners

#javascript #node #react #express

MERN Stack consists of four technologies.

M - MongoDB
E - Express
R - React
N - Node

All these technologies are built on JavaScript. To learn JavaScript these are the best resources.

https://www.Javascript.info

Jonas schmedtmann Udemy Course
https://www.udemy.com/course/the-complete-javascript-course/

After you have learnt JS then proceed to learn Node.js

Node.js is a backend language used for highly scalable applications. Many companies have shifted to Node.js for the scalability and performance provided by Node.js

After learning Node, you should learn Express. Express is a framework built on Node.js. It is very lightweight and easy to learn. Simplifies development with Node.js.

After Learning Express the next step is to learn MongoDB and Mongoose. MongoDB is a NOSQL database and Mongoose is a library that can be used with MongoDB.

You can learn Node, Express and MongoDB from these Udemy courses. They are the best till date.

1) Jonas Schmedtmann Udemy Course
https://www.udemy.com/course/nodejs-express-mongodb-bootcamp/

2) Mosh Hamedani Udemy Course
https://www.udemy.com/course/nodejs-master-class/

So, after learning Node, Express and MongoDB you’re already a Backend Developer. All that's left is to learn is the Front End.

Now you should proceed to learn React. React is a frontend library that is developed and maintained by Facebook. It is super lightweight and is very powerful in performance for any web app. To learn React there are many resources available for free on the web. Also, after learning React you should learn Redux. Redux is state management tool used with React Apps. My personal favourite resources for learning React and Redux are the following.

CodeVolution YouTube Playlist
https://www.youtube.com/watch?v=QFaFIcGhPoM&list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3

Official React Docs
https://reactjs.org/docs/getting-started.html

Stephen Grider Udemy Course
https://www.udemy.com/course/react-redux/

Learnt All of these technlogies ? Done. You're A MERN Stack Developer.

Next Step :- Develop some projects to showcase in you portfolio.

Give a like to the post if this helps you out. Also comment down the resources from which you have learned MERN Stack to help others out.

The author of the article is the founder of startup Shashaan Web Solutions. Do check it out. https://www.shashaan.com

Top comments (23)

Shaiju T • Mar 15 '21 • Edited

I think we can learn all these for FREE instead of udemy.

miguelmoramax • Mar 17 '21

off course, fullstackopen.com/ look that

Shaiju T • Mar 19 '21 • Edited

Super Cool , Thanks for making learning free. :) But there is no English version.

Here is another FREE way to learn Full Stack : theodinproject.com/paths/full-stac...?

• • Mar 21 '21 • Edited

at first I also straggled to switch English but there actually is English version at: fullstackopen.com/en 👍

Samir Nayakawadi • Jun 30 '21

Thanks. Its completely free & Awesome. Made My Day.

LifeNavigator • Mar 15 '21

It depends on the individual I guess. I personally paid for courses because it fit with my learning methods, and there was support available on the content creator's discord. It's also nicer that downloaded materials and exercised are given.

Shaiju T • Mar 16 '21

Yes I agree structured approach is required even for FREE course or youtube videos.

Andrew Baisden • Mar 26 '21

Yes its true you can learn many of these for free. However in my experience many Udemy courses have a premium quality to them. And those teachers are exclusively on that platform they don't create courses elsewhere.

Shaiju T • Mar 26 '21 • Edited

😄, Udemy is good i agree, I was just sharing that we can still learn all this for free. I always prefer text based tutorials over video, Because if you are doing hands on along the course you should be wasting time going back and forth the course in the video. Just watching the video course wont help, you have to build something. So below can help:

Get started with any technology using free resources
Build some projects
Go to advance level and to get premium tips , get famous udemy course and watch
Build some more projects with premium tips

Alexander B.K. • Sep 17 '21

Yeah... agree on Text based tutorials over video.
The most reliable resources are the official sites of each of the technologies that provide documentation including APIs. This holds for every techs, not only MERN.
I am sure the instructors from those courses learned from the official sites too.
Most of the official sites provide textual based tutorials from which we can copy paste the code snippet from the examples that we can quickly try and even use them as a starting template for a real project, right after we understand the concepts we are learning. This is something we cannot do with those video tutorials.
That is I always do whenever I want to learn new language, frameworks, libraries :

HTML, CSS, Javascript, Web API, HTTP from MDN
React, React Native, Angular, Vue, Laravel for PHP, Spring for Java, from their official sites
PHP, MySQL, Java tutorial (text based), from their manuals which can be downloaded from their official sites
Node.js, Express and other Node.js frameworks
other stuffs...

Kishan Sheth • Mar 15 '21

Yeah. Learning is FREE and many resources are available for FREE, but I've learnt from these resources so I am just referring these resources that these are good resources to learn from.

erescobar • Mar 14 '21

Node.js is not a backend language.

Kishan Sheth • Mar 14 '21

Thanks for pointing it out. My bad, Node can be used as backend development environment.

Musiliu Samad • Mar 15 '21

It's a JavaScript runtime environment...

Alexander B.K. • Sep 17 '21

Yeah... it is a Javascript runtime platform that can be used for any tasks that needs automation using Javascript language, including for creating a HTTP/Web server.
Due to its low-level, however, frameworks are created so that they can help web developers to quickly develop backend application like Express, Koa, Fastify, NestJs, etc.

Debojyoti Ghosh • May 30 '21

Hello my name is Debojyoti, I want to say that I already learnt React js. Now I want to learn node. But I dont understand how and why to use node, because we can call api and use routes in react. All node js tutorial teaching us how to use node with html css...there we need node for api calling and routing, but in react why we need node? and how to use it. thanks in advance

Kishan Sheth • May 30 '21

React is for Frontend and Node is for Backend. Consider you're working on a website with database access then you'll build you're Frontend with react and for backend you'll be using Node. Now you'll start React on default port 3000 and start node on something like 3001 port. Now Make a api which return some response and call it from react. We just use Node for the backend purpose.

Alexander B.K. • Sep 17 '21

Now, one thing I am thinking is how to do the same approach Laravel has for web development. From Laravel official site/documentation, it is clear we can use Laravel for two different purposes :

A full-stack, stand-alone development, in which React or Vue.js in the frontend is integrated part of the full-stack application. The React/Vue front-end then is considered 1st party app, instead of 3rd party. For this purpose, we write code for routing in the file named web.
A backend app that provides APIs for 3rd party apps written with any supported tools, including React or Vue. For this purpose, we write code for routing in the file named api.

As for MERN stack, from what I have seen the 2nd approach mentioned previously is the most used one. I am trying to find the 1st approach like Laravel provides for this MERN (and also MEAN) stack : a full-stack, standalone application.
We can also agree the "M" in the stack can be MySQL instead of MongoDB, depending on what database we want to use.