Need Help? Call us at (281) 541-2807 Visit our Facebook Page Follow us on Twitter Subscribe to our RSS Feeds

ReactJS Web Application Development

presented by Hands-On Technology Transfer
View the Hands-On Technology Transfer Profile and Course Listings

Bring a trainer to your location to deliver this class for groups of 10 or more.

Summary

This hands-on course introduces students to the React JavaScript library and covers essentials such as using Create React App, defining components, writing and styling JSX elements, passing props, using state and registering event handlers

Workshop Description/Agenda

React (a.k.a. ReactJS or React.js) is a JavaScript library for developing user interfaces. This hands-on course introduces students to the React JavaScript library and covers essentials such as using Create React App, defining components, writing and styling JSX elements, passing props, using state and registering event handlers. Students will also learn how to use React Hooks, the Context API, Lifecycle Methods and how to implement global state using the Redux JavaScript library.

Comprehensive hands on exercises are integrated throughout to reinforce learning and develop real competency.

What You Will Learn

  • Rendering React Components
  • Styling Components with CSS and Bootstrap
  • Using
    Create React App
  • Fetching External Data with Fetch API
  • Leveraging JSX for UI Design
  • Creating Functional and Class-based Components
  • Working with Forms
  • Using React Hooks
  • Single Page Applications with React Router
  • Validating Props with PropTypes
  • Using Lifecycle Methods
  • Maintaining Component and Global State
  • Registering Event Handlers
  • Animating React Components

Workshop Prerequisites

Knowledge of HTML5, CSS, and JavaScript equivalent to attending the Website Development with HTML5, CSS and Bootstrap and JavaScript Programming courses.

Workshop Overview


React Fundamentals
  • Overview of React
  • Components
  • React Tree Reconciliation
  • Uni-directional Data Flow
  • React and ReactDOM
React Development Environment
  • Environment Setup
    • NodeJS
    • VS Code
    • VS Code Extensions for React
    • Installing React
    • Create React App
  • Overview of Babel and Webpack
  • Using Create React App
ES6 Features in React
  • ES Modules
  • Declaring variables with let and const
  • Arrow functions
  • Template Literals
  • Rest Parameters and Spread Operator
  • Array/Object Destructuring
  • ES6 Classes
  • Callbacks
  • Promises
  • Async/Await
JSX
  • Role of JSX
  • Rendering JSX Elements
  • Writing JSX Expressions
  • Comments in JSX
  • React Fragments
Responding to User Events
  • Defining Event Handlers
  • Issues with Events
  • Meaning of this
  • SyntheticEvent
  • Accessing Event Properties
  • Event Pooling
Working with Forms
  • Using Interactive Properties
    • value
    • defaultValue
    • checked
    • selected
  • Controlled inputs
  • Uncontrolled inputs
  • Capturing Component Updates with onChange
  • Intercepting Form Submission
Styling JSX
  • How to style JSX Elements
  • Applying CSS Classes to JSX
  • Defining Style Objects
  • Styling with Bootstrap and other CSS Frameworks
  • Animating React Components
Working with State
  • What is State?
  • Setting Initial State
  • Mutating State with setState()
  • Problems with State
Fetching External Data
  • Using the Fetch API
  • Async/Await
  • Using Promises
  • Communicating with External APIs
  • Using axios for fetching data
Defining Components
  • What are Components?
  • Presentational vs Container Components
  • Rules for Defining Components
  • Creating Functional Components
  • Limitations of Functional Components
  • Creating Class-based Components
  • Defining a constructor() Method
Lifecycle Methods
  • What are Lifecycle Methods?
  • Mounting
    • constructor
    • componentWillMount
    • render
    • componentDidMount
  • Rendering
    • componentWillReceiveProps
    • shouldComponentUpdate
    • componentWillUpdate
    • render
    • componentDidUpdate
  • Unmounting
    • componentWillUnmount
  • Dealing with State and Prop Changes
  • Error Handling
    • componentDidCatch
Using React Router
  • Creating Single Page Applications in React
  • What is React Router?
  • Fundamentals of React Router
  • Defining Routers
  • Route and Switch components
  • React-router objects
    • Match
    • History
    • Location
  • Authenticating Routes
  • Route Parameters
Using the Context API
  • Why use Context?
  • Creating a Context Object
  • Defining Providers and Consumers
  • Using the Render props pattern
Using React Hooks
  • What are Hooks?
  • Adding state to functional components with useState
  • useEffect
  • useContext
  • useReducer
Passing Data with Props
  • What are Props?
  • Passing Props to Components
  • Receiving Props
  • Handling Children
  • Validating props with PropTypes
    • Data Type Validation
    • Making Properties Required
  • "Prop drilling" Explained
  • Simplifying Prop drilling with the spread operator
  • Communicating with Parent Components
Deploying a React Application
  • Using npm run build
  • Using npm run deploy
  • Configuring Client-side Routing
  • Deploying to GitHub Pages

Who Should Attend

Web App developers moving to ReactJS

Additional Information

Training Provider: Hands-On Technology Transfer

Course Topics: Computers / IT Training > Web Application Development

Training Course Summary: This hands-on course introduces students to the React JavaScript library and covers essentials such as using Create React App, defining components, writing and styling JSX elements, passing props, using state and registering event handlers

Live Webinar Dates

Live Seminar Dates/Locations

MAR 8-7    IN  DENVER, CO
MAR 8-7    IN  BOISE, ID
MAR 8-7    IN  PORTLAND, OR
MAR 8-7    IN  SALT LAKE CITY, UT
MAR 8-7    IN  SEATTLE, WA
MAR 8-7    IN  SPOKANE, WA
MAR 15-14    IN  BAKERSFIELD, CA
MAR 15-14    IN  FRESNO, CA
MAR 15-14    IN  MODESTO, CA
MAR 15-14    IN  OAKLAND, CA
MAR 15-14    IN  SACRAMENTO, CA
MAR 15-14    IN  SAN FRANCISCO, CA
MAR 15-14    IN  SAN JOSE, CA
MAR 22-21    IN  PHOENIX, AZ
MAR 22-21    IN  TUCSON, AZ
MAR 22-21    IN  BAKERSFIELD, CA
MAR 22-21    IN  FRESNO, CA
MAR 22-21    IN  IRVINE, CA
MAR 22-21    IN  LOS ANGELES, CA
MAR 22-21    IN  MODESTO, CA
MAR 22-21    IN  OAKLAND, CA
MAR 22-21    IN  RIVERSIDE, CA
MAR 22-21    IN  SACRAMENTO, CA
MAR 22-21    IN  SAN BERNARDINO, CA
MAR 22-21    IN  SAN DIEGO, CA
MAR 22-21    IN  SAN FRANCISCO, CA
MAR 22-21    IN  SAN JOSE, CA
MAR 22-21    IN  SANTA CLARITA, CA
MAR 22-21    IN  SANTA MONICA, CA
MAR 22-21    IN  TEMECULA, CA
MAR 22-21    IN  ALBUQUERQUE, NM
MAR 22-21    IN  LAS CRUCES, NM
MAR 22-21    IN  LAS VEGAS, NV
MAR 22-21    IN  EL PASO, TX
MAR 29-28    IN  LITTLE ROCK, AR
MAR 29-28    IN  WICHITA, KS
MAR 29-28    IN  SHREVEPORT, LA
MAR 29-28    IN  OKLAHOMA CITY, OK
MAR 29-28    IN  TULSA, OK
MAR 29-28    IN  AUSTIN, TX
MAR 29-28    IN  CORPUS CHRISTI, TX
MAR 29-28    IN  DALLAS, TX
MAR 29-28    IN  HOUSTON, TX
MAR 29-28    IN  SAN ANTONIO, TX
MAR 29-28    IN  FT WORTH, TX
APR 5-4    IN  FT LAUDERDALE, FL
APR 5-4    IN  HUNTSVILLE, AL
APR 5-4    IN  JACKSONVILLE, FL
APR 5-4    IN  MIAMI, FL
APR 5-4    IN  ORLANDO, FL
APR 5-4    IN  PENSACOLA, FL
APR 5-4    IN  SARASOTA, FL
APR 5-4    IN  TAMPA, FL
APR 5-4    IN  WEST PALM BEACH, FL
APR 5-4    IN  ATLANTA, GA
APR 5-4    IN  SAVANNAH, GA
APR 5-4    IN  CHARLESTON, SC
APR 12-11    IN  WASHINGTON, DC
APR 12-11    IN  BALTIMORE, MD
APR 12-11    IN  COLUMBIA, MD
APR 12-11    IN  CHARLOTTE, NC
APR 12-11    IN  RALEIGH-DURHAM, NC
APR 12-11    IN  WINSTON-SALEM, NC
APR 12-11    IN  JERSEY CITY, NJ
APR 12-11    IN  NEWARK, NJ
APR 12-11    IN  PRINCETON, NJ
APR 12-11    IN  MANHATTAN, NY
APR 12-11    IN  HARRISBURG, PA
APR 12-11    IN  PHILADELPHIA, PA
APR 12-11    IN  ALEXANDRIA, VA
APR 12-11    IN  FAIRFAX, VA
APR 12-11    IN  NORFOLK, VA
APR 12-11    IN  RICHMOND, VA
APR 12-11    IN  WILLIAMSBURG, VA
APR 19-18    IN  HARTFORD, CT
APR 19-18    IN  NEW HAVEN, CT
APR 19-18    IN  STAMFORD, CT
APR 19-18    IN  MANCHESTER, NH
APR 19-18    IN  NASHUA, NH
APR 19-18    IN  ALBANY, NY
APR 19-18    IN  PROVIDENCE, RI
APR 26-25    IN  LOUISVILLE, KY
APR 26-25    IN  BINGHAMTON, NY
APR 26-25    IN  BUFFALO, NY
APR 26-25    IN  ITHACA, NY
APR 26-25    IN  ROCHESTER, NY
APR 26-25    IN  SYRACUSE, NY
APR 26-25    IN  CINCINNATI, OH
APR 26-25    IN  CLEVELAND, OH
APR 26-25    IN  COLUMBUS, OH
APR 26-25    IN  DAYTON, OH
APR 26-25    IN  PITTSBURGH, PA
APR 26-25    IN  MEMPHIS, TN
APR 26-25    IN  NASHVILLE, TN
MAY 3-2    IN  CEDAR RAPIDS, IA
MAY 3-2    IN  DES MOINES, IA
MAY 3-2    IN  CHICAGO, IL
MAY 3-2    IN  SCHAUMBURG, IL
MAY 3-2    IN  SPRINGFIELD, IL
MAY 3-2    IN  INDIANAPOLIS, IN
MAY 3-2    IN  DETROIT, MI
MAY 3-2    IN  LANSING, MI
MAY 3-2    IN  MINNEAPOLIS, MN
MAY 3-2    IN  KANSAS CITY, MO
MAY 3-2    IN  SPRINGFIELD, MO
MAY 3-2    IN  OMAHA, NE
MAY 3-2    IN  MILWAUKEE, WI
MAY 3-2    IN  ST CHARLES, MO
MAY 10-9    IN  DENVER, CO
MAY 10-9    IN  BOISE, ID
MAY 10-9    IN  PORTLAND, OR
MAY 10-9    IN  SALT LAKE CITY, UT
MAY 10-9    IN  SEATTLE, WA
MAY 10-9    IN  SPOKANE, WA
MAY 17-16    IN  BAKERSFIELD, CA
MAY 17-16    IN  FRESNO, CA
MAY 17-16    IN  MODESTO, CA
MAY 17-16    IN  OAKLAND, CA
MAY 17-16    IN  SACRAMENTO, CA
MAY 17-16    IN  SAN FRANCISCO, CA
MAY 17-16    IN  SAN JOSE, CA
MAY 24-23    IN  PHOENIX, AZ
MAY 24-23    IN  TUCSON, AZ
MAY 24-23    IN  IRVINE, CA
MAY 24-23    IN  LOS ANGELES, CA
MAY 24-23    IN  RIVERSIDE, CA
MAY 24-23    IN  SAN BERNARDINO, CA
MAY 24-23    IN  SAN DIEGO, CA
MAY 24-23    IN  SANTA CLARITA, CA
MAY 24-23    IN  SANTA MONICA, CA
MAY 24-23    IN  TEMECULA, CA
MAY 24-23    IN  ALBUQUERQUE, NM
MAY 24-23    IN  LAS CRUCES, NM
MAY 24-23    IN  LAS VEGAS, NV
MAY 24-23    IN  EL PASO, TX
JUN 7-6    IN  HUNTSVILLE, AL
JUN 7-6    IN  LITTLE ROCK, AR
JUN 7-6    IN  JACKSONVILLE, FL
JUN 7-6    IN  MIAMI, FL
JUN 7-6    IN  ORLANDO, FL
JUN 7-6    IN  PENSACOLA, FL
JUN 7-6    IN  SARASOTA, FL
JUN 7-6    IN  TAMPA, FL
JUN 7-6    IN  WEST PALM BEACH, FL
JUN 7-6    IN  ATLANTA, GA
JUN 7-6    IN  SAVANNAH, GA
JUN 7-6    IN  WICHITA, KS
JUN 7-6    IN  SHREVEPORT, LA
JUN 7-6    IN  OKLAHOMA CITY, OK
JUN 7-6    IN  TULSA, OK
JUN 7-6    IN  CHARLESTON, SC
JUN 7-6    IN  AUSTIN, TX
JUN 7-6    IN  CORPUS CHRISTI, TX
JUN 7-6    IN  DALLAS, TX
JUN 7-6    IN  HOUSTON, TX
JUN 7-6    IN  SAN ANTONIO, TX
JUN 7-6    IN  FT LAUDERDALE, FL
JUN 7-6    IN  FT WORTH, TX
JUN 14-13    IN  WASHINGTON, DC
JUN 14-13    IN  BALTIMORE, MD
JUN 14-13    IN  COLUMBIA, MD
JUN 14-13    IN  CHARLOTTE, NC
JUN 14-13    IN  RALEIGH-DURHAM, NC
JUN 14-13    IN  WINSTON-SALEM, NC
JUN 14-13    IN  JERSEY CITY, NJ
JUN 14-13    IN  NEWARK, NJ
JUN 14-13    IN  PRINCETON, NJ
JUN 14-13    IN  MANHATTAN, NY
JUN 14-13    IN  HARRISBURG, PA
JUN 14-13    IN  PHILADELPHIA, PA
JUN 14-13    IN  ALEXANDRIA, VA
JUN 14-13    IN  FAIRFAX, VA
JUN 14-13    IN  NORFOLK, VA
JUN 14-13    IN  RICHMOND, VA
JUN 14-13    IN  WILLIAMSBURG, VA
JUN 21-20    IN  HARTFORD, CT
JUN 21-20    IN  NEW HAVEN, CT
JUN 21-20    IN  STAMFORD, CT
JUN 21-20    IN  BOSTON, MA
JUN 21-20    IN  CHELMSFORD, MA
JUN 21-20    IN  QUINCY, MA
JUN 21-20    IN  SPRINGFIELD, MA
JUN 21-20    IN  WALTHAM, MA
JUN 21-20    IN  WOBURN, MA
JUN 21-20    IN  WORCESTER, MA
JUN 21-20    IN  MANCHESTER, NH
JUN 21-20    IN  NASHUA, NH
JUN 21-20    IN  ALBANY, NY
JUN 21-20    IN  PROVIDENCE, RI
JUN 28-27    IN  CEDAR RAPIDS, IA
JUN 28-27    IN  DES MOINES, IA
JUN 28-27    IN  CHICAGO, IL
JUN 28-27    IN  SCHAUMBURG, IL
JUN 28-27    IN  SPRINGFIELD, IL
JUN 28-27    IN  INDIANAPOLIS, IN
JUN 28-27    IN  LOUISVILLE, KY
JUN 28-27    IN  DETROIT, MI
JUN 28-27    IN  LANSING, MI
JUN 28-27    IN  MINNEAPOLIS, MN
JUN 28-27    IN  KANSAS CITY, MO
JUN 28-27    IN  SPRINGFIELD, MO
JUN 28-27    IN  OMAHA, NE
JUN 28-27    IN  BINGHAMTON, NY
JUN 28-27    IN  BUFFALO, NY
JUN 28-27    IN  ITHACA, NY
JUN 28-27    IN  ROCHESTER, NY
JUN 28-27    IN  SYRACUSE, NY
JUN 28-27    IN  CINCINNATI, OH
JUN 28-27    IN  CLEVELAND, OH
JUN 28-27    IN  COLUMBUS, OH
JUN 28-27    IN  DAYTON, OH
JUN 28-27    IN  PITTSBURGH, PA
JUN 28-27    IN  MEMPHIS, TN
JUN 28-27    IN  NASHVILLE, TN
JUN 28-27    IN  MILWAUKEE, WI
JUN 28-27    IN  ST CHARLES, MO
JUL 12-11    IN  DENVER, CO
JUL 12-11    IN  BOISE, ID
JUL 12-11    IN  PORTLAND, OR
JUL 12-11    IN  SALT LAKE CITY, UT
JUL 12-11    IN  SEATTLE, WA
JUL 12-11    IN  SPOKANE, WA