TypeClassroom Training
REGISTER

Contact Us

Fields marked with an * are required

 

Description

Audience & Prerequisites

Course Outline

Schedule & Fees

Certification

React JS

React is a front-end library developed by Facebook. It is used for handling the view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is currently one of the most popular JavaScript libraries and has a strong foundation and large community behind it.

Intended Audience

This tutorial will help JavaScript developers who look ahead to deal with ReactJS for the first time. We will try to introduce every concept by showing simple code examples that can be easily understood. After finishing all the chapters, you will feel confident working with ReactJS. As a bonus we will introduce additional elements that work well with ReactJS to help you learn the best practices and follow the modern JavaScript trends.

Prerequisites

If you want to work with ReactJS, you need to have solid knowledge of JavaScript, HTML5, and CSS. Even though ReactJS doesn’t use HTML, the JSX is similar so your HTML knowledge will be very helpful. We will explain this more in one of the next chapters. We will also use EcmaScript 2015 syntax so any knowledge in this area can be helpful.

Course Outline                                       Duration: 3 Days

Day-1

  • Background
    • Modern Rich UI Web Based Frameworks v/s Traditional Web Applications
    • Single Page Applications (SPA)
    • Concept of UI Data Binding (One-Way, Two-Way, Three-Way)
    • MV* Design Patterns
  • Introduction
    • What is ReactJS?
    • Who is using ReactJS?
    • Concept of Virtual DOM
    • Concept of React Component and Component Tree
    • Unidirectional Data Flow
  • Environment Setup
    • Running React directly in Browser (Client Side Processing)
    • Rendering using NodeJS, npm packages, babel & webpack
  • Single Component: Creating a basic component (with all possible options)
    • Creating a basic React component with pure React Methods and ES5 syntax
    • Creating a basic React component with pure React Methods and ES6 syntax
    • Creating a basic React component with JSX instead of pure React Methods and ES5 syntax
    • Creating a basic React component with JSX instead of pure React Methods and ES6 syntax
    • Transpiling ES6 and JSX into ES5 using Babel
  • Multiple Components
    • Nesting Components within components
    • Breaking down wireframe into granular components
  • State Management
    • Difference between UI State and Application State (Data)
    • Difference between Props & State
    • Unidirectional Data-Flow from Parent to Child
    • Defining State for a component
    • Passing Props (Data Properties) to Child Component from its Parent component
    • Passing Event Handler (of Parent) to Child Components to handle event raised by Child Component in Parent Component
    • Using the Props (Data Properties) in Child Component
    • Using the Props (Event Handlers) in Child Component
  • Conditional Logic
  • Styling Components
    • Defining CSS ClassName attribute
    • Defining Style attribute and JavaScript Object

Day-2

  • Forms & Input Elements
    • Using the Ref callback attribute
    • Controlled Forms
  • Component Lifecycle
    • Methods invoked while loading a component
    • Methods invoked on re-rendering a component
    • Methods invoked while unloading a component
  • Routing
    • Implementing the concept of SPA using React Router
  • HTTP Communication
    • Using Fetch to achieve HTTP based client-server communication
    • Working with REST API
  • Application Architecture for React
    • Redux
      • Overview of Three Principles of Redux
      • Single Immutable State Tree
      • Avoiding Object Mutation
      • Describing State changes with Actions
      • Reducers
      • Stores Methods
    • Packaging
      • Using Webpack module loader for creating
        • Script Bundles
        • Style Bundles
      • Hands-On Exercises
        • From Sample demos to Multi-functionality application will undertaken to implement the above mentioned concepts
        • 80% hands-on / 20% theory

Day 3

  • Unit Testing using Enzyme and Jest

2 Projects

  • Live weather application

Task manager app

Please write to us at info@itstechschool.com & contact us at +91-9870480053 for the course price & certification cost, schedule & location

Drop Us a Query

For more info kindly contact us.


Reviews