Created by useiconic.comfrom the Noun Project

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.