ReactJS | IT Training & Certification | Info Trek
Respect Your Dreams
Follow through on your goals with courses

ReactJS

Location

Format What’s this?
  1. 3 Days
  1. All of our private classes are customized to your organization's needs.
  2. Click on the button below to send us your details and you will be contacted shortly.

ReactJS

WHAT YOU WILL LEARN

This course shows how to use Facebook’s ReactJS framework to build fast, modern, scalable single page web applications (SPAs). The course covers the principles of SPA development, and then takes the students through the process of building a ReactJS user interface. The course introduces JSX, the pseudo-HTML used in building ReactJS components, and moves on creating composite components and controller views using props and state. The students will build and validate Web forms and use Facebook’s unidirectional design pattern Flux, combining stores and actions to communicate with Web services and manage state. Students will gain a deeper understanding of JSX, work with form components, implement React styles, and learn how to integrate unit tests for React components.

PREREQUISITES

Before attending this course, students should have general programming experience and knowledge of HTML, CSS and JavaScript.

METHODOLOGY

This program will be conducted with interactive lectures, PowerPoint presentation, discussion and practical exercise.

COURSE OBJECTIVES

• Creating components using JSX

• Building composite components

• Props, state, and controller views

• Working with controlled forms

• Routing with react-router

• Unit Testing ReactJS components

• Implementing the Flux design pattern

• Leveraging stores and actions


Expand All

Modules

Module 1 - Introduction to "Modern (ES5)" JavaScript

• JavaScript Refresher

• Introduction to ES2015 (ES6)
• Basic language features
• Creating variables
• Primitives and wrapper objects in JavaScript
• JavaScript types: Number, String, Boolean, Date
• Functions, functional programming and nesting functions
• Arrays – Ordered sequence of items
• Indexed property access
• Scope and Context
• JavaScript visibility rules
• Global variables
• Object functions and execution
• The this keyword in JavaScript
• JavaScript == and false conditions and Triple Equals ===
• Creating Objects with JavaScript literal syntax and constructor functions
• Typeof and objects
• Special comparisons for objects
• Key JavaScript built-in objects

Module 2 - Introduction to REACT

• What react is and what it is not

• React concepts

• Component composition

• How react works

• How Virtual DOM works

• How react handles data binding

• Advantages & Limitations


Module 3 - Setting up ReactJS Development Environment

• Using Webpack / Babel

• Using npm & package.json file

• Look at an ReactJS application

• Organizing source code

• React browser plugin


Module 4 - Creating a simple React Application

• A simple react component with JSX template

• Component structure

• React render

• Component properties and property passing

• Props validation with data types

• States, initialize states and update states

• Pure components


Module 5 - Introduction to JSX

• Components

• HTML attributes example. Class and Id etc

• Child Components and Namespaced components

• JavaScript expressions in JSX like attribute, boolean or child expression


Module 6 - Forms

• Form components example input, textarea

• Controlled form components

• Uncontrolled form components

• Checkboxes and Radios

• Select box with default selected values

• Form validation


Module 7 - Component Life Cycle

• Mounting Components

• Updating Components

• Setting Properties


Module 8 - Composing Components

• Sibling Components and Key

• Parent and Child Components

• Props and State E. Component Life-Cycle


Module 9 - Conditional Statements in React

• If-else in JSX

• IIFE in JSX for complex logic


Module 10 - Event handling

• React.js Event Handlers

• Synthetic Events

• Keyboard

• Composition

• Focus

• Form

• Mouse

• Clipboard

• Selection

• Touch

• Event Pooling

• Other useful events in React

• Sharing events across the components


Module 11 - React Styles

• CSS and inline styles

• Setting up the react for React bootstrap

• Implementing the react bootstrap components


Module 12 - React Router & Navigation

• Loading the router library

• Router configuration

• Passing and receiving parameters

• React-cookie integration


Module 13 - Introduction to FLUX

• Flux pattern

• Flux Application Architecture

• Rational and MVC comparison

• Data Flow – Action, Dispatcher, Store & View

• Redux

• Reducer / Action / Store


Module 14 - Creating a dynamic UI in React

• React Stateful Components

• Keeping components stateless

• Autobinding

• Event Delegation


Module 15 - Unit Testing

• Tools for Unit Testing

• Jest & Jasmine

• Enzyme

• React Unit Testing

• Testing DOM manipulations

• Testing properties and state

• Simulating Events

• Shallow Rendering


Thayanithy Jegan

Thayanithy Jegan

Has a strong career, spanning over 19 years of Technical & Management experience. Technically sophisticated professional with a pioneering career reflecting strong leadership qualifications coupled with analysing user requirements, conceptualizing capabilities, software development and successful implementation of developed solutions. Clear communication and intuitive thinking have equipped me with skills required to achieve best results. Read More

Course Reviews

No Remarks

0

0 Ratings