Training: React JavaScript

Ref. REACTJS
Duration:
3
 days
Exam:
Not certifying
Level:
Fundamental

Description

React is a view library to develop single page applications in Javascript. It is the most popular library backed by Facebook. With React library, you can develop dynamic frontend applications which come with great features like component architecture, data binding, declarative views, universal apps.
This will make you familiar with the beginner to intermediate concepts of React library to build SPA applications that will help your business achieve faster ROI due to lesser development and maintenance cost, and faster accessibility.

Participant profiles

  • Javascript developpers and architects

Objectives

  • Code using new ES6 language features
  • Develop an application from scratch using React 16
  • Understand the benefits of unidirectional data flow
  • Understand and use React, React Router, Redux, Redux Saga
  • Use styled-components to create presentational components (CSS in JS)
  • Taking the advantage of React and Redux dev tools for better debugging
  • Taking the advantage of immutable.js library to follow the immutable state principle
  • Unit test React components, redux using Jest, Enzyme and sinon

Prerequisites

  • Substantial prior experience developing with JavaScript
  • It is recommended to have attended to the following course: Introduction to JavaScript

Course content

Module 1: ES6 Primer

  • Lesson 1: History of Javascript
  • Lesson 2: What is ES6
  • Lesson 3: A word on bable
  • Lesson 4: Block scope, let & const
  • Lesson 5: Template literals
  • Lesson 6: Arrow functions
  • Lesson 7: Spread and Rest operators
  • Lesson 8: Object literal improvements
  • Lesson 9: Destructuring
  • Lesson 10: Classes
  • Lesson 11: Inheritance
  • Lesson 12: Static properties and methods
  • Lesson 13: Promises
  • Lesson 14: Iterators and Iterables
  • Lesson 15: Generators
  • Lesson 16: Modules
  • Lesson 17: Set and Map

Module 2: Introduction to React

  • Lesson 1: What is React?
  • Lesson 2: Why React?
  • Lesson 3: React version history
  • Lesson 4: React 16 vs React 15
  • Lesson 5: Just React – Hello World
  • Lesson 6: Using create-react-app
  • Lesson 7: Anatomy of react project
  • Lesson 8: Running the app
  • Lesson 9: Debugging first react app

Module 3: Templating using JSX

  • Lesson 1: Working with React.createElement
  • Lesson 2: Expressions
  • Lesson 3: Using logical operators
  • Lesson 4: Specifying attributes
  • Lesson 5: Specifying children

Module 4: It’s all about components

  • Lesson 1: Significance of component architecture
  • Lesson 2: Types of components
  • Lesson 3: Functional
  • Lesson 4: Class based
  • Lesson 5: Pure
  • Lesson 6: Component Composition

Module 5: Working with state and props

  • Lesson 1: What is state and it significance
  • Lesson 2: Read state and set state
  • Lesson 3: Passing data to component using props
  • Lesson 4: Validating props using propTypes
  • Lesson 5: Supplying default values to props using defaultProps

Module 6: Rendering lists

  • Lesson 1: Using React key prop
  • Lesson 2: Using map function to iterate on arrays to generate elements

Module 7: Event handling in React

  • Lesson 1: Understanding React event system
  • Lesson 2: Understanding Synthetic event
  • Lesson 3: Passing arguments to event handlers

Module 8: Understand component lifecycle

  • Lesson 1: Understand component lifecycle

Module 9: Working with forms

  • Lesson 1: Controlled components
  • Lesson 2: Uncontrolled components
  • Lesson 3: Understand the significance to defaultValue prop
  • Lesson 4: Using react ref prop to get access to DOM element

Module 10: Routing with react router

  • Lesson 1:Setting up react router
  • Lesson 2: Understand routing in single page applications
  • Lesson 3: Working with BrowserRouter and HashRouter components
  • Lesson 4: Configuring route with Route component
  • Lesson 5: Using Switch component to define routing rules
  • Lesson 6: Making routes dynamic using route params
  • Lesson 7: Working with nested routes
  • Lesson 8: Navigating to pages using Link and NavLink component
  • Lesson 9: Redirect routes using RedirectComponent
  • Lesson 10: Using Prompt component to get consent of user for navigation
  • Lesson 11: Path less Route to handle failed matches

Module 11: Just Redux

  • Lesson 1: What is redux
  • Lesson 2: Why redux
  • Lesson 3: Redux principles
  • Lesson 4: Install and setup redux
  • Lesson 5: Creating actions, reducer and store

Module 12: Immutable.js for immutable datastructures

  • Lesson 1: What is Immutable.js?
  • Lesson 2: Immutable collections
  • Lesson 3: Lists
  • Lesson 4: Maps
  • Lesson 5: Sets

Module 13: React Redux

  • Lesson 1: What is React Redux
  • Lesson 2: Why React Redux
  • Lesson 3: Install and setup
  • Lesson 4: Presentational vs Container components
  • Lesson 5: Understand high order component
  • Lesson 6: Understanding mapStateToProps and mapDispatchtToProps usage

Module 14: Unit testing in react

  • Lesson 1: Understand the significance of unit testing
  • Lesson 2: Understand unit testing jargon and tools

Documentation

  • Digital courseware included

Lab / Exercises

  • Lab 1: ES6 Primer
  • Lab 2: Introduction to React
  • Lab 3: Templating using JSX
  • Lab 4: It’s all about components
  • Lab 5: Working with state and props
  • Lab 6: Rendering lists
  • Lab 7: Event handling in React
  • Lab 8: Understand component lifecycle
  • Lab 9: Working with forms
  • Lab 10: Routing with react router
  • Lab 11: Just Redux
  • Lab 12: Immutable.js for immutable datastructures
  • Lab 13: React Redux
  • Lab 14: Unit testing in react

Complementary courses

Temptraining funding

ITTA is a partner of Temptraining, the continuing education fund for temporary workers. This training fund can subsidize continuing education for anyone who works for an employer subject to the Collective Work Agreement (CCT) Rental of services.
Prix de l'inscription
CHF 2'150.-

Session scheduled on demand, please contact us to open a session

Horaires d’ouverture

Du lundi au vendredi, de 8:30 à 18:00.

Contactez-nous

Votre demande

Opening hours

Monday to Friday, from 8:30 am to 06:00 pm.

Contact us

Your request

X
X
X
X