Any web application is shaped using numerous technologies. The fusion of these technologies is said to be “stack”, also called as LAMP stack(Linux, Apache, MySQL, PHP Stack). This acquired a progress in front-end frameworks, as sufficient of the work was done on the client side. At approximately the same time, though completely unrelated, NoSQL databases also started gaining popularity.
MERN is acronym for (MongoDB, Express.js, React, and Node.js).
Ideally, MERN is suited for web applications/portals that have a huge amount of interactivity built into the front-end.
Following are the main components , libraries and tools of MERN stack we have used to create our web portal.
React is a component that holds the MERN stack.
It is maintained by Facebook.
React is not a framework. It is a library.
React views are declarative.
As a programmer, you don’t have to worry about managing the effect of changes in the view’s state or the data.
A React component insist how the view looks like, given the data. You just don’t do anything! The React library examine how the new view looks like, and just affix the changes between the old view and the new view.
React makes the views rational, predictable and simple to maintain and easier to understand.
React is Component-Based i.e it maintains its own state and restores itself.
React does not depend on templates.
React is Isomorphic which means it can be run on both server as well as browser.
Modules act like libraries in Node.JS.
Node.js has non-blocking input/output model, as opposed to using threads to achieve multi-tasking.
Event driven programming is natural to Node.js due to the underlying language constructs such as closures.
Node.js achieves multi-tasking using an event loop. This is nothing but a queue of events that need to be processed, and callbacks to be run on those events.
Node.js requires some learning and practice.
Node.JS applications fast that are utilized to synchronize multi-threaded events.
In simple words, Express simplifies the task of writing server code.
The Express is a web server framework meant for Node.js.
Express helps us define routes, specifies what to do when a HTTP request matching a certain pattern arrives.
Express parses request URL, headers and parameters for us.
Express has about all functionalities required by web applications. Such as, setting response codes, setting cookies, sending custom headers, we can write Express middleware, custom pieces of code that can be inserted in any request / response processing path to achieve common functionality such as logging, authentication etc.
Express does not have a template engine built in, but it supports any template engine of your choice such as pug, mustache etc.
MongoDB is basically the database used in the MERN stack.
MongoDB is a NoSQL document-oriented database, with a flexible schema and a JSON based query language.
Lets consider a few things that MongoDB is and is not.
NoSQL here means “non-relational”. It’s not quite a typical database where you have tables and columns, called relational databases.
In comparison to relational databases where data is stored in the form of relations or tables, MongoDB is a document-oriented database.
The unit of storage is a document or an object, and multiple documents are stored in collections.
Every document in a collection has a unique identifier from using which it can be accessed.
The identifier is automatically indexed.
A prescribed schema is not really to be followed while storing an object in a MongoDB database.
All documents in a collection are not require to have the same set of fields.
This means, during first stages of development, you don’t need to add or rename columns in the schema.
You can immediately add fields in your application code without having a fear of database migration scripts.
In relational databases, we used a query language called SQL. In MongoDB, the query language used is based on JSON: you can create, can search for, can make changes,can delete documents by specifying the operation in a JSON object.
Data is likewise interchanged in JSON format. In fact, the data is naturally stored in a variation of JSON called BSON (B for Binary) in order to utilize space.
A JSON object is returned when retrieving a document from a collection.
React allows us only the View rendering capability and helps govern interactions in a single component.
This very ability of managing the URLs and history is called routing.
React-Router also manages the browser’s Back button functionality so that we can transition between what looks like pages without loading the entire page from the server.
React-Router is a very easy and simple library that manages this for us.
Bootstrap is the most known CSS framework, it has also been adapted to React and the project is therefore called as React-Bootstrap.
React-Bootstrap library gives us most of the Bootstrap functionality.
The components and widgets provided by this library facilitate us with huge amount of information on how to design our very own widgets and components.
Material-UI, MUI, Elemental UI, react-select, react-treeview and react-date-picker are some other component/CSS libraries build for React.
React-Bootstrap is by far the most comprehensive single library with the familiarity of Bootstrap.