Prerequisite for the guide: Knowledge of HTML, CSS, and JS. Some knowledge of web servers.
They say that the best way to learn is to teach, and so for this short series I want to put my skills to the test and I hope to have you along for the ride!
Introduction to the MERN Stack
MongoDB, Express, React, and Node are all used together to build up the MERN stack, where Node and Express create the backend, that then communicates with MongoDB, a non-relational database, and React makes up the frontend which is what the user will then interact with.
All of these technologies are free and open-source, with great community support. Since these are all independent technologies, it’s important to know each technologies different requirements and functionalities, in order to meet the needs of whatever project you are planning.
Node also comes with Node Package Manager – npm – which provides us with a massive library of open-source packages built by the community that we are able to implement into our project.
MongoDB is categorised as a “non-relational” database. Aalso known as NoSQL, these databases are non-tabular, and store data differently than SQL based tables. MongoDB provides us with a flexible, JSON based database (technically JSON-like, but we’ll get into that later on). The advantage here is that we can alter our data in response to the demands of each of our projects.
And finally, the titular technology of this tutorial series. React is a declarative, component-based library specifically designed for user interfaces. Other examples worth looking into would be Angular or Vue. Both good in their own right, Vue excels in building small components rather than larger projects. Angular on the other hand is older, with a robust community but Angular’s learning curve is steeper and may put off developers just at the start of their careers. But don’t take my word for it, continue to experiment and see what fits you best.
What sets React apart from other frameworks is how it efficiently renders new data using a virtual DOM – Document Object Model – instead of how other frameworks render changes via the browsers own DOM.
I hope that this short article helps to explain the components of a MERN stack in simple detail. Now we know what technologies we will be working with, the next step is setting up a working development environment!