Book Image

MERN Quick Start Guide

By : Eddy Wilson Iriarte Koroliova

3 (1)

Book Image

MERN Quick Start Guide

3 (1)

By: Eddy Wilson Iriarte Koroliova

Overview of this book

The MERN stack is a collection of great tools—MongoDB, Express.js, React, and Node—that provide a strong base for a developer to build easily maintainable web applications. With each of them a JavaScript or JavaScript-based technology, having a shared programming language means it takes less time to develop web applications. This book focuses on providing key tasks that can help you get started, learn, understand, and build full-stack web applications. It walks you through the process of installing all the requirements and project setup to build client-side React web applications, managing synchronous and asynchronous data flows with Redux, and building real-time web applications with Socket.IO, RESTful APIs, and other concepts. This book gives you practical and clear hands-on experience so you can begin building a full-stack MERN web application. Quick Start Guides are focused, shorter titles that provide a faster paced introduction to a technology. They are for people who don't need all the detail at this point in their learning curve. The presentation has been streamlined to concentrate on the things you really need to know.

Preface

What this book covers

To get the most out of this book

What you need for this book

Free Chapter

Introduction to the MERN Stack

Introduction to the MERN Stack

Technical requirements

The MVC architectural pattern

Installing and configuring MongoDB

Installing Node.js

Installing npm packages

Building a Web server with ExpressJS

Building a Web server with ExpressJS

Technical requirements

Routing in ExpressJS

Modular route handlers

Writing middleware functions

Writing configurable middleware functions

Writing router-level middleware functions

Writing error-handler middleware functions

Using ExpressJS' built-in middleware function for serving static assets

Parsing the HTTP request body

Compressing HTTP responses

Using an HTTP request logger

Managing and creating virtual domains

Securing an ExpressJS web application with Helmet

Using template engines

Debugging your ExpressJS web application

Building a RESTful API

Building a RESTful API

Technical requirements

CRUD operations using ExpressJS' route methods

CRUD operations with Mongoose

Using Mongoose query builders

Defining document instance methods

Defining static model methods

Writing middleware functions for Mongoose

Writing custom validators for Mongoose's schemas

Building a RESTful API to manage users with ExpressJS and Mongoose

Real-Time Communication with Socket.IO and ExpressJS

Real-Time Communication with Socket.IO and ExpressJS

Technical requirements

Understanding Node.js events

Understanding Socket.IO events

Working with Socket.IO namespaces

Defining and joining Socket.IO rooms

Writing middleware for Socket.IO

Integrating Socket.IO with ExpressJS

Using ExpressJS middleware in Socket.IO

Managing State with Redux

Managing State with Redux

Technical requirements

Defining actions and action creators

Defining reducer functions

Creating a Redux store

Binding action creators to the dispatch method

Splitting and combining reducers

Writing Redux store enhancers

Time traveling with Redux

Understanding Redux middleware

Dealing with asynchronous data flow

Building Web Applications with React

Building Web Applications with React

Technical requirements

Understanding React elements and React components

Composing components

Stateful components and life cycle methods

Working with React.PureComponent

React event handlers

Conditional rendering of components

Rendering lists with React

Working with forms and inputs in React

Understanding refs and how to use them

Understanding React portals

Catching errors with error boundary components

Type checking properties with PropTypes

Other Books You May Enjoy

Other Books You May Enjoy

Leave a review - let other readers know what you think

Customer Reviews

3 (1)

5 star

0

4 star

0

3 star

100%

2 star

0

1 star

0

Rendering lists with React

React allows you to pass a collection of React elements or components as children in the form of an array. For instance:

   <ul> 
      {[ 
         <li key={0}>One</li>, 
         <li key={1}>Two</li>, 
      ]} 
   </ul>

Collections of React elements or components must be given a special props property named key. This property lets React know which of the elements in the collection have changed, moved, or been removed in/from the array when an update occurs.

Getting ready

In this recipe, you will build a utility component that will map each item of an array to a component's props and render them as a list. Before you start, create a new package.json file...