Introduction to React.js
WEB401

Introduction to React.js

The primary purpose of this training is threefold. First, it introduces React.js and enable participants to be able to use React.js autonomously. Second, it provides an understanding of the cutting of the interface as a reusable component (we find this principle in React, Ember, Angular, vue.js). Third, it teaches participants to become proficient in using React and implementing it in other projects.
Through this workshop, the participants will be able to understand the notion of component and how to reuse them subsequently. This concept is shared with other frameworks such as Angular2 and Ember.js. Moreover, this training will be carried out using the ES6 specification of JavaScript which will allow a presentation of the new functionalities of this new specification.
More generally, the advantage of using React is that it is a library and not a fullstack framework such as Angular or Ember.This means that it can be used outside of a single page application context and can easily be used with backend frameworks (Rails, Laravel, Django, etc.) as well as some CMS (Drupal).

This training will not cover: Webpack, Flux architecture.

Syllabus

An Introduction to React

What is React?

Why do we need to create React?

What is virtual DOM? Knowing that React is a library (the V of MVC, a unidirectional action), and not a framework, we need to better understand virtual DOM.

Fast Point ES6

Class

Modules

etc.
Create Your First Component

Introducing JSX.

Definition of a component

Create a component

Make the component in the page

Add exercise
Discovering Props

Create a component and assign a props to it

Defining propsTypes

Define default props

Passing a props function

Passing child props

Add exercise
Discovery of the States

Changing the state of a compoment

Passing a state in props

Defining default states

Adding exercise
Communicate Your Components

Parent communication -> child

Communication child -> parent

Refs

The context

Adding an exercise
Adding Styles to A Component

Example with 'normal' workflow

Example with style-inline

Example with css-modules

Adding an exercise
Putting It into Practice

Implementation through a project with:

CRUD via api

Routing

Styles

Audience

Web developper.

Prerequisites

Having the knowledge of JavaScript databases (POO concept) is required.