React for Web Development

Register for this course to learn React with JavaScript from scratch. Enhance user experience and front end development workflow with the help of React.

Request a quote Review training schedules

Learn more about the course below.

Training Options in Washington DC

Customized trainings available in Washington DC contact us at sales@greycampus.com

REACT PROGRAMMING TRAINING PROGRAM OVERVIEW

In this course, you will learn and understand the various components of React which helps you to create the other components for your application using HTML with JavaScript. This course enables the learner to create their own websites using these programming languages and also loading CSS into their applications. By the end of this course, the user will be able to build applications and websites using React.

Overview

Skills

 Build fully functional and beautifully styled websites.

Overview

Alignment

This comprehensive React course content is aligned to help you learn the concepts of HTML, JavaScript, React, and CSS.

Overview

Outcome

By the end of this course, you will be able to build and deploy websites and text applications.

What’s included in the REACT training course?

The instructor-led live-online the course comes with:

  • 1 month of hands-on live online training classes.
  • Assignments at the end of modules to implement your learnings.
  • Projects and reference material
  • 24 PMI-PDUs if you are a PMI credential holder.

The registration process

Once you have completed our simplified enrolment process, you’ll receive an email confirmation with your payment receipt in your registered email ID. You can then access the entire content of the online student portal immediately by logging in to your account on our site. Should you require any assistance please reach out to us via email (support@greycampus.com) or via our online chat system.

The course curriculum

The following is a list of broad topics covered

  • New features in ES6 [those which will be heavily used in React)
  • JavaScript Transpilation (ES6 into ES5 using Babel Transpiler)
  • Module Bundlers for JavaScript
  • NodeJS & npm package ecosystem
  • CSS Preprocessors (Meaning of Preprocessors, Less, Sass)
  • JS Lint
  • Working with es6
  • Introduction to jsx
  • 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
  • What is ReactJS?
  • Who is using ReactJS?
  • Concept of Virtual DOM
  • Concept of React Component and Component Tree
  • Unidirectional Data Flow
  • Running React directly in Browser (Client Side Processing)
  • Server Side Rendering using NodeJS, npm packages, babel & webpack
  • 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
  • Nesting Components within components
  • Breaking down wireframe into granular components
  • 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
  • Concept of “Lifting State Up”
  • Showing / Hiding Child Components based on condition
  • Adding / Removing Child Components based on condition
  • Repeating multiple Child Components
  • Defining CSS ClassName attribute
  • Defining Style attribute and JavaScript Object
  • Applying conditional formatting using Style attribute
  • Using Sass with React Components
  • Using the Ref callback attribute
  • Uncontrolled Forms
  • Controlled Forms
  • Methods invoked while loading a component
  • Methods invoked on re-rendering a component
  • Methods invoked while unloading a component
  • Defining CSS ClassName attribute
  • Implementing the concept of SPA using React Router
  • Using Fetch to achieve HTTP based client-server communication
  • Working with REST API
  • Defining CSS ClassName attribute
  • What Is Bootstrap?
  • Bootstrap File Structure
  • Basic HTML Template
  • Global Styles
  • Default Grid System
  • Fluid Grid System
  • What is Sass?
  • Install Sass on PC and Mac
  • Variables
  • Variable Default
  • Variable Interpolation
  • Data Types
  • Comments
  • Using Sass to style React
  • Redux
  • Overview of Three Principles of Redux
  • Single Immutable State Tree
  • Pure v/s Impure Functions
  • Avoiding Object Mutation
  • Describing State changes with Actions
  • Reducers
  • Stores Methods
  • Redux v/s Flux
  • Working with Middleware
  • Realtime Rest API connection
  • Working with Realtime graphs
  • Using Webpack module loader for creating
  • Script Bundles
  • Style Bundles
  • Deploying app to production
  • Using JS Lint for code review
  • Working with jest and enzyme
  • From Sample demos to Multi-functionality application will undertaken to implement the above mentioned concepts
  • 80% hands-on / 20% theory
  • React v/s Angular 1
  • React v/s Angular 2
  • React with NodeJS

Key facts you should review before signing up

Once you have completed the simple enrolment process, you’ll receive an email confirmation. You can then access the entire content of the online student portal immediately. If you require any further assistance please do not hesitate, you can drop an email to support@greycampus.com and we will be happy to help.

who-should-apply

Who should take up this course?

This course is perfectly suitable for 

  • People who are aware of basic programming and have knowledge of JavaScript

  • Anyone who is looking for a technology switch

  • Basic knowledge of Document Object Model (DOM).


Training Requirements

  • A high-speed internet connection, that will not hinder your learning during the classes.
  • A laptop/ personal computer that will aid your practical learning
pre-requisites

Money-Back Guarantee

If you are not happy with the training or any aspects of it, you can drop an email to support@greycampus.com within 2 classes of the training. We will ensure that you get back your money.

 
middle_image