Beginning MERN Stack: Build and Deploy a Full Stack MongoDB, Express, React, Node.js App

136 Pages·2021·14.867 MB·English

by  Greg Lim

Beginning
MERN Stack
(MongoDB, Express,
React, Node.js)
Greg Lim
Copyright © 2021 Greg Lim
All rights reserved.
C © 2021 G L
OPYRIGHT BY REG IM
A .
LL RIGHTS RESERVED
N
O PART OF THIS BOOK MAY BE REPRODUCED IN ANY FORM

OR BY ANY ELECTRONIC OR MECHANICAL MEANS INCLUDING
,
INFORMATION STORAGE AND RETRIEVAL SYSTEMS WITHOUT
. T
PERMISSION IN WRITING FROM THE AUTHOR HE ONLY
,
EXCEPTION IS BY A REVIEWER WHO MAY QUOTE SHORT
.
EXCERPTS IN A REVIEW
F E : J 2021
IRST DITION UNE
Table of Contents
P
REFACE
C 1: I
HAPTER NTRODUCTION
C 2: M DB O
HAPTER ONGO VERVIEW
C 3: S U M DB A C D
HAPTER ETTING P ONGO TLAS LOUD ATABASE
C 4: A S D
HAPTER DDING AMPLE ATA
C 5: S U O N . , E B
HAPTER ETTING P UR ODE JS XPRESS ACKEND
C 6: C O B S
HAPTER REATING UR ACKEND ERVER
C 7: C M D A O
HAPTER REATING THE OVIES ATA CCESS BJECT
C 8: C M C
HAPTER REATING THE OVIES ONTROLLER
C 9: T O B API
HAPTER ESTING UR ACKEND
C 10: L M R
HAPTER EAVING OVIE EVIEWS
C 11: T R API
HAPTER ESTING THE EVIEWS
C 12: R G S M I R
HAPTER OUTE TO ET A INGLE OVIE AND TS ATINGS
R F
EACT RONTEND
C 13: I R
HAPTER NTRODUCTION TO EACT
C 14: C N H B
HAPTER REATE AVIGATION EADER AR
C 15: D O R
HAPTER EFINING UR OUTES
C 16: M D S : C B
HAPTER OVIE ATA ERVICE ONNECTING TO THE ACKEND
C 17: M L C
HAPTER OVIES IST OMPONENT
C 18: M C
HAPTER OVIE OMPONENT
C 19: L R
HAPTER ISTING EVIEWS
C 21: A E R
HAPTER DDING AND DITING EVIEWS
C 22: D R
HAPTER ELETING A EVIEW
C 23: G N P ’ R
HAPTER ET EXT AGE S ESULTS
C 24: G N P ’ R – S B T
HAPTER ET EXT AGE S ESULTS EARCH Y ITLE AND
R
ATING
C 25: D B H
HAPTER EPLOYING ACKEND ON EROKU
C 26: H D R F
HAPTER OSTING AND EPLOYING OUR EACT RONTEND
A A
BOUT THE UTHOR
P
REFACE
About this book
In this book, we take you on a fun, hands-on and pragmatic journey to
learning MERN stack development. You'll start building your first MERN
stack app within minutes. Every chapter is written in a bite-sized manner and
straight to the point as I don’t want to waste your time (and most certainly
mine) on the content you don't need. In the end, you will have the skills to
create a Movies review app and deploy it to the Internet.
In the course of this book, we will cover:
- Chapter 1: Introduction
- Chapter 2: MongoDB Overview
- Chapter 3: Setting Up MongoDB Atlas Cloud Database
- Chapter 4: Adding Sample Data
- Chapter 5: Setting Up Our Node.js, Express Backend
- Chapter 6: Creating Our Backend Server
- Chapter 7: Creating The Movies Data Access Object
- Chapter 8: Creating The Movies Controller
- Chapter 9: Testing Our Backend API
- Chapter 10: Leaving Movie Reviews
- Chapter 11: Testing The Reviews API
- Chapter 12: Route To Get A Single Movie And Its Ratings
- Chapter 13: Introduction To React
- Chapter 14: Create Navigation Header Bar
- Chapter 15: Defining Our Routes
- Chapter 16: MovieDataService: Connecting To The Backend
- Chapter 17: MoviesList Component
- Chapter 18: Movie Component
- Chapter 19: Listing Reviews
- Chapter 21: Adding And Editing Reviews
- Chapter 22: Deleting A Review
- Chapter 23: Get Next Page’s Results
- Chapter 24: Get Next Page’s Results – Search By Title And Rating
- Chapter 25: Deploying Backend On Heroku
- Chapter 26: Hosting And Deploying Our React Frontend
The goal of this book is to teach you MERN stack development in a
manageable way without overwhelming you. We focus only on the essentials
and cover the material in a hands-on practice manner for you to code along.
Working Through This Book
This book is purposely broken down into short chapters where the
development process of each chapter will center on different essential topics.
The book takes a practical hands on approach to learning through practice.
You learn best when you code along with the examples in the book.
Requirements
No previous knowledge on Node.js or React development is required, but you
should have basic programming knowledge. It will be a helpful advantage if
you could read through my Node, Express book and React book first which
will provide you will better insight and deeper knowledge into the various
technologies. But even if you have not done so, you should still be able to
follow along.
Getting Book Updates
To receive updated versions of the book, subscribe to our mailing list by
sending a mail to [email protected]. I try to update my books to use the
latest version of software, libraries and will update the codes/content in this
book. So, do subscribe to my list to receive updated copies!
Code Examples
You can obtain the source code of the completed project at
www.greglim.co/p/mern.
C 1: I
HAPTER NTRODUCTION
Welcome to Beginning MERN Stack! This book focuses on the key tasks and
concepts to get you started to learn and build MERN stack applications in a
faster pace. It is designed for readers who don ’ t need all the details about
MERN at this point in the learning curve but concentrate on what you really
need to know.
So what ’ s the MERN stack? The MERN stack is a popular stack of
technologies for building a modern Single Page Application. MERN stands
for MongoDB, Express, React and Node.js:
- Node.js is one of the most popular server-side frameworks that allow

us to execute JavaScript code in a web server.
- Express is a web application framework for Node.js which makes

application development in Node easier and faster. Node and Express
together form the middle-tier web server of the stack.
- MongoDB is a NoSQL database which stores data persistently in the

form of collections and documents.
- React is a JavaScript frontend library to build user interfaces.

MERN is derived from the popular MEAN stack (MongoDB, Express,
Angular, Node) where instead of using the Angular frontend framework, we
use React. Another popular variant is the MEVN where we use Vue as the
frontend. These frontends make up Single Page Applications (SPAs) which
avoid reloading the page entirely and just fetches relevant portions of the
page from the server to display new content.
The App We Will Be Building
We will build a Movie reviews app which lets users view and search for
movies. They can also log in and post reviews on the movies (fig. 1a, 1b, 1c).