TRAINING MERN STACK

MERN10
Durée : 10 jours
Tarif : 5200 € HT

93%

Taux de satisfaction clients
(sur 1033 évaluations du 19/05/21 au 18/01/23)

Voir les avis

Objectifs

– Understand and set up a MERN stack- Know the alternative solutions

– Design an optimized architecture- Anticipation of maintenances / évolutions

– Master an end-to-end web application- Popularization and transmission of concepts around you

– Progress towards application and functional design

Prérequis

knowledge of Javascript, HTML/CSS, SQL

Public

Developer

Formation(s) associée(s)

Dernière mise à jour

Programme mis à jour le 07 avril 2022

Cette formation vous intéresse ? Contactez-nous

Bon à savoir

Evaluez votre niveau

Pour vous aider à bien choisir votre formation, nous vous proposons soit un entretien avec le formateur soit un test d’évaluation via notre centre d’examen. Cela vous assurera que vous disposez des connaissances nécessaires pour suivre la formation dans des conditions optimales.

Notre formateur

La formation est animée par un professionnel de l’informatique et de la pédagogie. Il est en veille technologique permanente et possède plusieurs années d’expérience sur les produits, technologies et méthodes enseignés.

Travaux pratiques

Nos formations comprennent de nombreux travaux pratiques pour un meilleur apprentissage (60 % de pratique). Elles peuvent être personnalisées pour répondre à vos besoins (contenu, dates, rythme...).

A distance / Classe virtuelle

En classe virtuelle, vous êtes en totale immersion avec le groupe et participez à la formation dans les mêmes conditions que le présentiel : cours théorique, travaux pratiques, échanges en temps réel avec le formateur et les autres stagiaires…

Un cadre Maîtrisé

3 à 6 participants maximum par session pour respecter les objectifs et résultats attendus et pour permettre la réalisation de tous les ateliers pratiques dans de bonnes conditions.

Télécharger la fiche de cette formation

Les + d'une formation Access it

Des formations d'excellence, éligibles CPF, disponibles en distanciel, et animées par des consultants experts passionnés par leur métier.

Les Modules
de formation

Module 1

REACT OVERVIEW

What is React?

What’s in a Name?

React Component Model

What React Is Not

What You Will Not Find in React

Motivation for Creating React

A React JavaScript Example

One-Way Data Flow

JSX

A JSX Example

The Virtual (Mock) DOM

Only Sub-components that Actually Change are Re-Rendered

React Libraries

Module 2

ES6 IN A NUTSHELL

What is ES6 ?

ES6 Features

Using ES6

Transpiling

Major Syntax Changes

let and const

Variable Scope

Shadowing Variables

Arrow Functions

Arrow Functions As Parameters

Using ‘this’ Within Arrow Functions

Template Literals

Spread Operator

ES6 Classes

Declaring Classes

Declaring Instance Methods

Accessor Methods

Static Methods

Inheritance With Classes

Module 3

BABEL COMMAND-LINE INTERFACE

Babel Transpiler
Usage Options
Presets and Plug-ins
Babel CLI Installation
Babel Configuration
Running Babel Command-Line
A Basic ES6 Development Setup with Babel
Test the Babel Development Setup
Adding React to the Development Setup
Create a Minimal React App – Index.html
Create a Minimal React App – app.js

Module 4

BASIC COMPONENTS AND JSX

What is JSX ?

JSX Transpilation to React Code Example

Running the Transpiled Code Babel

The Babel Runtime JavaScript Library

Script Import Skeleton Code

Playing Around in CodePen

React Components

Ways to Create UI Components

Creating a Functional Component Example

Component Names Must Be Capitalized

Creating a React Class-Based Component in ES5

The render Method

Creating a UI Component Using ES6 Class Notation

Using ES6 Classes with React

Which UI Component Creation Syntax Should I Use ?

Components vs Elements

Elements Are Immutable

Properties

Property Naming Convention

Properties Default to ‘True’

Spread Attributes (an ES6 Feature)

Expressions

Module 5

REACT FUNCTIONAL COMPONENT CONCEPTS

Functional Components

Nesting JSX Elements

Example of JSX Nesting

Comments in JSX Code

Setting CSS Styles Using Classes

Setting CSS Styles Directly

JSX Escapes Values

Working with Lists of Items

Keys in Lists

Example List With Key

Container vs. Presentational Components

State

Types of State Data

State Hierarchy

Lifting State Up

Props vs. State

Pass Down a Function

Immutability

Immutability – Why ?

Virtual DOM and State

Setting state

Updating Input fields

Passing Props to Components

Passing Functions to Components

Event Handling

Event Handler Example

Event Binding – DOs

Event Binding – Don’ts

Passing Parameters to Event Handlers

Component Life-cycle

Life-cycle in Functional Components

App Development Workflow – 1/3

App Development Workflow – 2/3

App Development Workflow – 3/3Fragments

Module 6

REACT COMPONENTS WITH ES6 CLASSES

Classes in ES6

Functional Components

Extending React.Component

The render() Method

state

props

defaultProps

propTypes

Component Lifecycle

Component Life-cycle: Overview

Component Life-cycle – Render Phase

Component Life cycle – Commit Phase

Component Life-cycle – Unmounting

constructor() example

componentDidMount() example

setState( newStateValue )

Module 7

REACT ROUTER

Routing and Navigation

react-router

Creating a react-router based project

A Basic Routed Component

Router vs. BrowserRouter

The Route component

Redirect Route

Navigating with <Link>

Navigating with <NavLink>

Route Parameters

Retrieving Route Parameters

QueryString Parameters

Using Router with Redux

Module 8

STATE MANAGEMENT FOR REACT

React State Basics – Props and State

Props

State in Class Based Components

Managing State with Hooks in Functional Components

The Problem with Props and State

Redux State Library

Redux Advantages

Redux Disadvantages

Basic Rules for State Management

Types of State

Data State

Communication State

Control State

Session State

Location State

Location State Side Effects

Module 9

USING REACT HOOKS

Functional Component Shortcomings

Hooks Overview

Hook Rules

React Linter Example

Functional Component Props

The useState Hook

Functional Component using the useState hook

useState with Multiple Variables

useState can also be used with Objects

The useEffect Hook

useEffect Hook Example

Using useEffect Hook to Load Data

Restricting when useEffect is Called

The useContext Hook

Additional Hooks

The useReducer Hook

An Example Reducer Function

Calling and Using useReducer

The useMemo Hook

useMemo Example

The useCallback Hook

useCallback Example

The useRef Hook

Using useRef to Hold Values

The useImperativeHandle Hook

useImperativeHandle Hook Example

The useLayoutEffect Hook

Module 10

UNIT TESTING REACT WITH REACT TESTING LIBRARY

React Testing Framework

Features

Snapshot Testing

Code Coverage

Interactive Mode

Projects created with create-react-app

Default App Component Test

Unit Tests

Anatomy of a Unit Test

Common Matchers

Combining Tests

Running Tests

Testing Promise based async code with ‘done’

Setup and Teardown

react-testing-library

A Simple Component Test

A Simple Snapshot Test

Running and Updating SnapShot Tests

Building Component Tests

Calling Render

Render Properties

Simulating Events

Testing Results

Using Query Functions

Text Matching

Counter Component

counter-test.js

Module 11

INTRODUCTION TO MONGODB

MongoDB

MongoDB Features

MongoDB on the Web

Positioning of MongoDB

MongoDB Applications

MongoDB Data Model

MongoDB Limitations

MongoDB Use Cases

MongoDB Query Language (QL)

The CRUD Operations

The find Method

The findOne Method

A MongoDB Query Language (QL) Example

Inserts

MongoDB vs Apache CouchDB

Module 12

WORKING WITH DATA IN MONGODB

Reading Data in MongoDB

The Query Interface

Query Syntax is Driver-Specific

Projections

Query and Projection Operators

MongoDB Query to SQL Select Comparison

Cursors

Cursor Expiration

Writing Data in MongoDB

An Insert Operation Example

The Update Operation

Update Operation Options

An Update Operation Example

A Remove Operation Example

Limiting Return Data

Data Sorting

Aggregating Data

Aggregation Stages

Accumulators

An Example of an Aggregation Pipe-line

Map-Reduce

Data Backup

Module 13

INTRODUCTION TO NODE.JS

What Is Node.js ?

Applications of Node.js

Installing Node.js and NPM

« Hello, Node World ! »

How It Works

Node.js is built on JavaScript : Benefits

Traditional Server-Side I/O Model

Disadvantages of the Traditional Approach

Event-Driven, Non-Blocking I/O

Concurrency

Using Node Package Manager (NPM)

The Express Server Framework

Module 14

BASIC WEB APPLICATION DEVELOPMENT

Introduction to the HTTP Module

The Request Handler Callback Function

The Server Object

Example Use of Server Object

The Request Object

The Response Object

Parsing Request Body

Serving Static Files

The HTTP Client API

Making POST/PUT/etc. Requests

Where To go from Here ?

Module 15

INTRODUCTION TO EXPRESS

Introduction to Express

Basic Routing Example

Defining Routing Rules

Route Path

The Response Object

Supplying URL Parameters

Ordering of Routes

Defining Catch All Route

Full Example Web Service

Module 16

EXPRESS MIDDLEWARE

Introduction to Express Middleware

Writing a Middleware Function

Binding to a Path

Order of Execution

Raising Error

Handling Error

Serving Static Files

Handling POST Request Body

Enable Response Compression

Module 17

ACCESSING MONGODB FROM NODE.JS

Getting Started

The Connection URL

Obtaining a Collection

Inserting Documents

Updating a Document

Querying for Documents

Deleting a Document

Connection Pooling

Module 18

BUILDING REACT APPS WITH REDUX

Redux

Redux Terminology

Redux Principles

Redux: Actions

Redux Action Types

Action Creators

Dispatching Actions

Data Flow Basics

Redux Reducers

Pure Functions

Reducer Example

Returning Default State

Creating a Development Environment with create-react-app

Using Redux with React

Initializing the Store

Immutability

Benefits of Immutable State

Mutability of Standard types

Copying Objects in JavaScript

Copying Arrays in JavaScript

One Store – Multiple Reducers

Combining Reducers

Components and Redux

The React-Redux Package

Wrapping App with Provider

mapStateToProps

mapDispatchToProps

Using Mapped Properties and Methods

Wrapping Components with Connect

Configure Store

Programming Advice – MultiTab Console

Module 19

INDEXES IN MONGODB

Indexes in MongoDB

Creating an Index

Listing Existing Indexes

The Sort Order

Using the Explain() Method

Main Index Types

The _id Field

Single and Compound Indexes

Multikey Indexes

Other Index Types

Index Properties

Examples of Creating Indexes with Index Properties

Module 20

EVENTS IN NODE JS

Event Driven Programming

Event Driven Programming (Contd.)

Event Emitter

EventEmitter Class

EventEmitter Class – Inheritance

The Event Loop and Event Handler

Phases Overview

Event Handlers

Example (Using EventEmitter as an Object)

Example (Inheriting from EventEmitter)

EventEmitter Functions

Issue with ‘this’ Keyword in Callback Functions

Handling this Problem

Controlling Event Callbacks in the Event Loop

Module 21

ASYNCHRONOUS PROGRAMMING WITH CALLBACKS

Callbacks

Creating a Callback Function

Calling The Callback Function

Callback – Another Example

Issue with ‘this’ Keyword in Callback Functions

Handling this Problem

Handling this Problem – Method 1 (Storing in Another Variable)

Handling this Problem – Method 2 (Using Bind Function)

Handling this Problem – Method 3 (Using ES6 Arrow Functions)

Error Handling without Callback

Error Handling with Callback

Asynchronous Callback

setImmediate() and nextTick()

API Example

Module 22

ASYNCHRONOUS PROGRAMMING WITH PROMISES

Synchronous and Asynchronous

The Problems with Callbacks

Introduction to Promises

Requirements for Using Promises

Creating Promises Manually

Calling the Promise-based Function

Making APIs that support both callbacks and promises

Using APIs that support both callbacks and promises

Chaining then Method / Returning a Value or a Promise from then

Method

Promisifying Callbacks with Bluebird

Using Bluebird

Bluebird – List of Useful Functions

Benefit of using Bluebird over ES6 for Promisification

Error Handling in Promise-based asynchronous functions

Module 23

USER API ROUTES & JWT AUTHENTICATION

Creating The User Model

Request & Body Validation

User Registration

Implementing JWT

Custom Auth Middleware & JWT Verify

User Authentication / Login Route

Module 24

DEPLOYMENT TO SERVER AND MONITORING

Les prochaines
sessions de formation

Sur demande

Vous souhaitez organiser cette formation à une date spécifique ? Contactez-nous en remplissant le formulaire ci-dessous

06 mars 2023

09 mai 2023

10 juillet 2023

04 septembre 2023

Cette formation vous intéresse ? Contactez-nous !

Nom*

Prénom*

Entreprise (facultatif)

Téléphone

E-mail*

Votre message*

Les données personnelles collectées sont destinées à Access IT Company et utilisées pour traiter votre demande et, lorsque vous ne vous y êtes pas opposé, vous communiquer nos offres commerciales. Les données obligatoires vous sont signalées sur le formulaire par un astérisque. L’accès aux données est strictement limité par Access IT Company aux collaborateurs en charge du traitement de votre demande. Conformément au Règlement européen n°2016/679/UE du 27 avril 2016 sur la protection des données personnelles et à la loi « informatique et libertés » du 6 janvier 1978 modifiée, vous bénéficiez d’un droit d’accès, de rectification, d’effacement, de portabilité et de limitation du traitement des donnés vous concernant ainsi que du droit de communiquer des directives sur le sort de vos données après votre mort. Vous avez également la possibilité de vous opposer au traitement des données vous concernant. Vous pouvez exercer vos droits en contactant le DPO à l’adresse suivante : [email protected] ou à l’adresse postale suivante 2, Allée Lavoisier, 59650 Villeneuve d’Ascq. Pour plus d’informations sur le traitement de vos données personnelles par Access IT Company, veuillez consulter notre politique de confidentialité disponible sur notre site internet à l’adresse suivante : https://www.access-it.fr/politique-de-confidentialite/