Crash Course React Part One: Introduction

Prerequisite for the guide: Knowledge of HTML, CSS, and JS. Some knowledge of web servers.

Whilst there are a great many Front End Frameworks that a developer can work with, React stands out as one of the simplest ways of creating clean and interactive UIs. React is a Javascript library specifically for building great looking frontends, and is perfectly capable of working with many different languages. Various sites use React as part of their applications, including Netflix, Facebook, Reddit and AirBnB. If you have been learning Javascript and wish to take the next steps in your studies, then learning a framework such as React is a great step forward.

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

React can be used alongside a great many different languages for a stack, such as Django or PHP. In fact, React doesn’t care too much so long as you feed it JSON. Laravel is a popular choice that can output JSON. But for the simplicity of this tutorial, I would like to introduce you to the MERN Stack. MERN runs fully on javascript, and employs robust and established technologies of Node, Express, and MongoDB.

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.js

Node.js

Originally built as a runtime environment to use Javascript outside of a browser, Node has an event-driven architecture driven by asynchronous input/output. Compared to synchronous Javascript, where there is an ordered flow of execution, asynchronous code allows other processing to continue before the whole code has ran. In other words, Node executes code in a continuous loop, awaiting further information before operating. In web development, this means we are able to build an application that can handle several requests efficiently.

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.

Node lets us build and run a complete stack via Javascript alone. But Node won’t let us connect a server to a web application alone. That’s when we need to introduce Express.

Express.js

Express.js

Express is a server-side framework that compliments Node nicely. It acts as “middleware” – software that provides common services and capabilities to applications outside of Javascript. For us, Express will provide a means to use HTTP responses within our web application.

In a MERN stack, Express will handle API (Application Programming Interface) routing for the server, be able to serve static content to the end user, provide authentication, handle errors, and whatever we need for our project. A critical component that Express provides is communication with the data storage system. Due to its flexible nature, we are able to connect Express to any kind of database using languages such as MySQL or PostgreSQL. We will be using MongoDB for our database because it uses Javascript and provides us with a way to handle JSON-like data.

MongoDB

MongoDB

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.

Connecting MongoDB with Node and Express allows us to run a stack fully built with Javascript, meaning that if you’ve been learning the basic building blocks of the web so far – HTML CSS JS – then you’ll more comfortably be able to pick up working with databases for the first time with a familiar coding language.

React

React.js

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.

Summary

A MERN stack can be consistent, easy to learn for newcomers, and is widely adopted and supported in the industry. If you’re looking for some other stacks to work with, the classic LAMP (Linux, Apache, MySQL, PHP) stack will always see wide-spread use. For my learning, I wanted to get started with a project that would compliment my existing knowledge of Javascript which could then assist in learning all the various functions of a full-stack application. MERN becomes a perfect tool for this purpose.

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!