03 20 61 95 00

TRAINING MERN STACK


  • MERN10
  • Durée : 10 jours
  • Tarif : 4200 € HT

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
enveloppe Cette formation vous intéresse ? Contactez-nous

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…

Notre formateur

La formation est animée par un professionnel de l’informatique et de la pédagogie, dont les compétences techniques, professionnelles et pédagogiques ont été validées par des certifications et/ou testées et approuvées par les éditeurs et/ou notre équipe pédagogique. Il est en veille technologique permanente et possède plusieurs années d’expérience sur les produits, technologies et méthodes enseignés. Il est présent auprès des stagiaires pendant toute la durée de la formation.

Présentiel

Formations intra ou interentreprises, cours officiels ou création de contenu spécifique, nos formations sauront répondre à vos attentes.
illustration-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.
En savoir plus
modules

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
<Switch>
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

Cette formation vous intéresse ? Contactez-nous !

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 : dpo@access-it.fr ou à l’adresse postale suivante 2, Allée Lavoisier, 59650 Villeneuve d’Acscq. 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/