Search our courses
Training

This React JavaScript Programming training class introduces the React JavaScript framework, sometimes referred to as ReactJS or React.JS.  React is a popular component-based JavaScript framework used for easy creation of powerful, interactive UIs.

This React class will provide an introduction to the benefits of the React JavaScript framework, so course participants can start to develop applications quickly using the framework.

This React class has 12 hands-on labs that are outlined at the bottom of this page. The labs allow you to practice the following skills:

Lab 1 – Setting Up the Lab Environment

In this short lab, you will set up your lab environment and learn how to start, use and stop the nginx (pronounced “engine x”) web server (http://nginx.org) that we will be using in this course’s labs.

Lab 2 – Getting Started with React

In this lab, you will create a simple “vanilla” JavaScript React application that is, quite appropriately, named “Hello React!” While, most commonly, the greeting should include a comma after Hello, and the whole phrase should be written as “Hello, React!”, we will purposely drop the comma to remove this unneeded for code comprehension information bit.

Lab 3 – DOM Updates in React

In this lab we will work with a React app designed to help you understand the DOM update efficiencies exercised by React. You will remember that React compares (diffs) its own cached “virtual / mock ” DOM structure with the native DOM of the web page and only renders the necessary updates on the page’s DOM.

Lab 4 – JSX Expressions

In this lab, you will familiarize yourself with JSX by working on a React app that uses JSX expressions. JSX is a powerful mechanism to bring in templating support to React and it is positioned as one of the stronger selling points of React.

Lab 5 – Using the On-line Babel REPL

In this lab, you will work with a React app that uses a functional (JavaScript functionbased) component with JSX-encoded elements. You will learn the steps needed to integrate your app with the rest of your web page.

Lab 6 – Using Composite Components

In this lab, you will be working with composite React components which act as re-usable building UI blocks. We will also take a look at how to pass complex parameter objects to components.

Lab 7 – Working with Lists in JSX

In this lab, you will learn how to properly use lists (arrays) in JSX-based React applications.

Lab 8 – A Class-Based React Component

In this lab, you will be working with a class-based React component that uses JSX extensions. We will be using Babel JavaScript compiler to convert JSX code into functionally equivalent React code and create a JSX-enabled React app.

Lab 9 – Using ES6 for Creating React Components

In this lab, you will learn how to create and work with React components written in ES6. You will learn how a React app can maintain its state and how changes to the state cause components to re-render themselves.

Lab 10 – Event Handlers in React

In this lab, you will learn how to attach event handlers to React UI components.

Lab 11 – Installing Babel Command-Line Interface

While the on-line Babel REPL (https://babeljs.io/repl) is a great tool for quick prototyping and learning, in practice, you will probably need to install Babel locally in your Dev environment and plug the Babel compilation step into the build process and continuous integration workflow.

Lab 12 – Using Babel Command-Line Interface

In this lab, we will work through the essential steps required to compile a JSX-enabled React app using Babel CLI, and integrate the transpiled code with a web page.

 

Objectives

In this React class, attendees will learn how to:

  •     Understand the programming model provided by the React framework
  •     Define React components
  •     Use the React framework to handle events and stateful data

React JavaScript Programming

Course Code

GTIT39

Duration

2 Days

Course Fee

POA

Accreditation

N/A

Target Audience

  • Web Developers

Attendee Requirements

  • Attendees should have some prior understanding of web development, HTML, AJAX, and JavaScript.

Expand all

Course Description

This React JavaScript Programming training class introduces the React JavaScript framework, sometimes referred to as ReactJS or React.JS.  React is a popular component-based JavaScript framework used for easy creation of powerful, interactive UIs.

This React class will provide an introduction to the benefits of the React JavaScript framework, so course participants can start to develop applications quickly using the framework.

This React class has 12 hands-on labs that are outlined at the bottom of this page. The labs allow you to practice the following skills:

Lab 1 – Setting Up the Lab Environment

In this short lab, you will set up your lab environment and learn how to start, use and stop the nginx (pronounced “engine x”) web server (http://nginx.org) that we will be using in this course’s labs.

Lab 2 – Getting Started with React

In this lab, you will create a simple “vanilla” JavaScript React application that is, quite appropriately, named “Hello React!” While, most commonly, the greeting should include a comma after Hello, and the whole phrase should be written as “Hello, React!”, we will purposely drop the comma to remove this unneeded for code comprehension information bit.

Lab 3 – DOM Updates in React

In this lab we will work with a React app designed to help you understand the DOM update efficiencies exercised by React. You will remember that React compares (diffs) its own cached “virtual / mock ” DOM structure with the native DOM of the web page and only renders the necessary updates on the page’s DOM.

Lab 4 – JSX Expressions

In this lab, you will familiarize yourself with JSX by working on a React app that uses JSX expressions. JSX is a powerful mechanism to bring in templating support to React and it is positioned as one of the stronger selling points of React.

Lab 5 – Using the On-line Babel REPL

In this lab, you will work with a React app that uses a functional (JavaScript functionbased) component with JSX-encoded elements. You will learn the steps needed to integrate your app with the rest of your web page.

Lab 6 – Using Composite Components

In this lab, you will be working with composite React components which act as re-usable building UI blocks. We will also take a look at how to pass complex parameter objects to components.

Lab 7 – Working with Lists in JSX

In this lab, you will learn how to properly use lists (arrays) in JSX-based React applications.

Lab 8 – A Class-Based React Component

In this lab, you will be working with a class-based React component that uses JSX extensions. We will be using Babel JavaScript compiler to convert JSX code into functionally equivalent React code and create a JSX-enabled React app.

Lab 9 – Using ES6 for Creating React Components

In this lab, you will learn how to create and work with React components written in ES6. You will learn how a React app can maintain its state and how changes to the state cause components to re-render themselves.

Lab 10 – Event Handlers in React

In this lab, you will learn how to attach event handlers to React UI components.

Lab 11 – Installing Babel Command-Line Interface

While the on-line Babel REPL (https://babeljs.io/repl) is a great tool for quick prototyping and learning, in practice, you will probably need to install Babel locally in your Dev environment and plug the Babel compilation step into the build process and continuous integration workflow.

Lab 12 – Using Babel Command-Line Interface

In this lab, we will work through the essential steps required to compile a JSX-enabled React app using Babel CLI, and integrate the transpiled code with a web page.

 

Objectives

In this React class, attendees will learn how to:

  •     Understand the programming model provided by the React framework
  •     Define React components
  •     Use the React framework to handle events and stateful data
Course Outline

Chapter 1. Advanced Objects and Functionality in JavaScript

  •     Basic Objects
  •     Constructor Function
  •     More on the Constructor Function
  •     Object Properties
  •     Deleting a Property
  •     The instanceof Operator
  •     Object Properties
  •     Constructor and Instance Objects
  •     Constructor Level Properties
  •     Namespace
  •     Functions Are First-Class Objects
  •     Closures
  •     Closure Examples
  •     Private Variables with Closures
  •     Immediately Invoked Function Expression (IIFE)
  •     The Module Pattern
  •     Module Pattern Example
  •     Prototype
  •     Inheritance in JavaScript
  •     The Prototype Chain
  •     Traversing Prototype Property Hierarchy
  •     Prototype Chain
  •     Inheritance Using Prototype
  •     Extending Inherited Behavior
  •     Enhancing Constructors
  •     Improving Constructor Performance
  •     Inheritance with Object.create
  •     The hasOwnProperty Method

Chapter 2. React Overview

  •     What is React?
  •     What’s in a Name?
  •     React Component Model
  •     What React Is Not
  •     What You Will Not Find in React
  •     Motivation for Creating React
  •     A React JavaScript Example
  •     One-Way Data Flow
  •     JSX
  •     A JSX Example
  •     The Virtual (Mock) DOM
  •     Only Sub-components that Actually Change are Re-Rendered
  •     React Libraries
  •     React Installation

Chapter 3. Programming with React API

  •     React Programming Options
  •     Components vs Elements
  •     Three Ways to Create a React UI Component
  •     React API On-Line Documentation
  •     Setting Up the Libraries
  •     The ReactDOM Object
  •     The ReactDOM Object (Cont’d)
  •     The React Object
  •     The React.createElement Method
  •     The ReactElement Object
  •     The ReactElement Structure
  •     The React.DOM Object
  •     The React.PropTypes Object
  •     The React.Children Object
  •     The propTypes Object
  •     Lifecycle Methods (Applied only to ES6 Classes)

Chapter 4. JSX

  •     What is JSX?
  •     JSX Transpilation to React Code Example
  •     Running the Transpiled Code
  •     Babel
  •     Babel JavaScript Library
  •     Script Import Skeleton Code
  •     Playing Around in CodePen
  •     React Components and Properties (Props)
  •     Ways to Create UI Components
  •     Creating a Functional Component Example
  •     Component Names Must Be Capitalized
  •     Creating a UI Component with React.createClass()
  •     The render Method Object
  •     Creating a UI Component Using ES6 Class Notation
  •     Using ES6 Classes with React
  •     Which UI Component Creation Syntax Should I Use?
  •     Components vs Elements
  •     Elements Are Immutable
  •     Properties
  •     Property Naming Convention
  •     Properties Default to ‘True’
  •     Spread Attributes (an ES6 Feature)
  •     Expressions
  •     Hands-on Exercises
  •     Nesting JSX Elements
  •     Example of JSX Nesting
  •     JSX is Safe to Use
  •     Hands-on Exercise
  •     State and Lifecycle Events
  •     Event Handling
  •     Event Handler Example
  •     Working with Lists of Items
  •     List Keys
  •     Hands-on Exercises

Chapter 5. Introduction to Node.js

  •     What Is Node.js?
  •     Application of Node.js
  •     Installing Node.js and NPM
  •     “Hello, Node World!”
  •     How It Works
  •     Built on JavaScript: Benefits
  •     Traditional Server-Side I/O Model
  •     Disadvantages of the Traditional Approach
  •     Event-Driven, Non-Blocking I/O
  •     Concurrency
  •     Using Node Package Manager (NPM)
  •     Express

Chapter 6. Babel Command-Line Interface

  •     Babel Transpiler
  •     Usage Options
  •     Presets and Plug-ins
  •     Babel CLI Installation
  •     Installing the Required Presets
  •     The .babelrc Configuration File
  •     Running Babel Command-Line

Chapter 7. ES6 in a Nutshell

  •     What is ES6?
  •     ES6 Features
  •     Using ES6
  •     Transpiling
  •     Major Syntax Changes
  •     let and const
  •     Variable Scope
  •     Shadowing Variables
  •     Arrow Functions
  •     Arrow Functions As Parameters
  •     Using ‘this’ Within Arrow Functions
  •     Template Literals
  •     Spread Operator
  •     ES6 Classes
  •     Declaring Classes
  •     Declaring Instance Methods
  •     Accessor Methods
  •     Static Methods
  •     Inheritance With Classes

Chapter 8. Extending React

  •     The Need to Extend React
  •     Redux
  •     Redux Design Ideas
  •     React Router
  •     React Router Code Examples
  •     Issues With Manual Module Management
  •     Webpack
  •     Testing React Apps: ReactTestUtils
  •     Testing React Apps: Jest
  •     Testing with Jest and Enzyme

Lab Exercises

Lab 1. Setting Up the Lab Environment
Lab 2. Getting Started with React
Lab 3. DOM Updates in React
Lab 4. JSX Expressions
Lab 5. Using the On-line Babel REPL
Lab 6. Using Composite Components
Lab 7. Working with Lists in JSX
Lab 8. A Class-Based React Component
Lab 9. Using ES6 for Creating React Components
Lab 10. Event Handlers in React
Lab 11. Installing Babel Command-Line Interface
Lab 12. Using Babel Command-Line Interface

Learning Path
Ways to Attend
  • Attend a public course, if there is one available. Please check our Schedule, or Register Your Interest in joining a course in your area.
  • Private onsite Team training also available, please Contact Us to discuss. We can customise this course to suit your business requirements.

Private Team Training is available for this course

We deliver this course either on or off-site in various regions around the world, and can customise your delivery to suit your exact business needs. Talk to us about how we can fine-tune a course to suit your team's current skillset and ultimate learning objectives.

Private Team Training | Contact us

Technical ICT learning & mentoring services

Private Team Training

Our instructors are specialist consultants with vast real world experience and expertise allowing them to design and deliver client-focused courses for your organisation.

Learn more about our Private Team Training

What Our Clients Say

“Given the breadth of the course, I think it was very well structured and organised, I got a lot
out of it.”     

 

JVM Tuning - Bespoke Course

Live Online - May 2020

 

“This was an excellent course and was lots of fun to attend. Instructor started with basic intro to
containerization, then explained Kubernetes and the different components (Container
engine, orchestrator, control plane) which all made sense because of the containerization
intro. The parts of the course layered on top of one another to give a good understanding of
Kubernetes.”

 

Kubernetes for App Developers - GTLFKAD

Live Online - Nov 2020

 

“Really enjoyed the course, it has been an eye opener on opportunities to steer how we approach the cloud from a IT Service Management perspective.”

 

Professional Cloud Service Manager - GTC13

Live Online May 2020

 

''Fantastic course, looking forward to applying this in my work and home life. Excellent, practical approach, very motivational. I think the entire company should attend training.''

 

Being Agile in Business - GTBAB

Sept 2019

“The instructor was great! I didn't expect such a good level of teaching with what some may
consider a dry subject. This was simply great!”  

 

Linux LPIC-1 - GTU8

Live Online - August 2020

 

"Intelligence is the ability to avoid doing work, yet
getting the work done"

Linus Torvalds, creator of Linux and GIT

Technical ICT learning & mentoring services

About GuruTeam

GuruTeam is a high-level ICT Learning, Mentoring and Consultancy services company. We specialise in delivering instructor-led on and off-site training in Blockchain, Linux, Cloud, Big Data, DevOps, Kubernetes, Agile, Software & Web Development technologies. View our Testimonials

Download our eBrochure
Our Accreditation Partners
  •  
  •  
  •  

 

Upcoming Courses

Kubernetes Administration

31 May - 4 June 2021

Live Online

This Kubernetes Administration Certification training course is suitable for anyone who wants to learn the skills necessary to build and administer a Kubernetes cluster

Learn More

LPIC-1 PART 1

22 - 25 June 2021 

Live Online

This Linux certification training course teaches in-depth skills in the basics of Linux Administration.
 

Learn More

DEVOPS FOUNDATION TRAINING

14 - 15 June 2021

Live Online

The purpose of the certification and its associated course is to impart, test and validate knowledge of DevOps basic vocabulary, principles and practices.

Learn More

 INTRO TO PYTHON 3

May 18 – 20 2021

Live Online        

A comprehensive introduction to the core syntax and functions provided by Python, including coverage of its object-oriented and functional programming features.

Learn More

Newsletter

Stay up to date, receive updates on scheduled dates, new courses, offers, and events.

Subscribe to our Newsletter