We're offering 20% off September Live Online classes! See which courses are applicable.   |   Details >

  
AccountIcon BigDataIcon BlogIcon default_resource_icon CartIcon checkmark_icon cloud_devops_icon computer_network_admin_icon cyber_security_icon gsa_schedule_icon human_resources_icon location_icon phone_icon plus_icon programming_software_icon project_management_icon redhat_linux_icon search_icon sonography_icon sql_database_icon webinar_icon

Search UMBC Training Centers

Programming

React JavaScript Programming

+ View more dates & times
    
    
    
    
                     
  • Overview

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

    Objectives include:
    • Understand the programming model provided by the React framework
    • Define React components
    • Use the React framework to handle events and stateful data
  • Who Should Take This Course

    PREREQUISITES

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

  • Schedule
  • 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
    • Summary

    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
    • Summary

    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)
    • Summary

    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
    • Summary

    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
    • Summary

    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
    • Summary

    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
    • Summary

    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
    • Summary

    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

  • FAQs
    Is there a discount available for current students?

    UMBC students and alumni, as well as students who have previously taken a public training course with UMBC Training Centers are eligible for a 10% discount, capped at $250. Please provide a copy of your UMBC student ID or an unofficial transcript or the name of the UMBC Training Centers course you have completed. Online courses are excluded from this offer.

    What is the cancellation and refund policy?

    Student will receive a refund of paid registration fees only if UMBC Training Centers receives a notice of cancellation at least 10 business days prior to the class start date for classes or the exam date for exams.

Contact Us