Training: React JavaScript

Ref. REACTJS

Download PDF

Duration:

3

days

Exam:

Not certifying

Level:

Fundamental

Funding:

Temptraining

ITTA | Trainings | Development | Programming | React JavaScript

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.