Search our courses
Training

React has redefined web development, with its focus on testable components, a virtual DOM and functional programming concepts. Widely popular, and in use by companies such as Netflix, facebook, Instagram and Walmart, React has changed the way developers think about building client-side apps. This React Fundamentals training course will teach you the fundamentals of React, with plenty of lab exercises to take you step by step toward building complete applications. The class will use ES6+ throughout.

 

Objectives

After this course, you will be able to:

  • Understand how React rethinks front-end UI architecture and use this understanding to build apps and components effectively
  • Build a variety of React components and apps using both class-based and stateless functional component styles
  • Utilize the React component lifecycle in building components
  • Write managed components to handle user input
  • Appreciate why Higher Order Components might be employed when building an app
  • Utilise React Router to provide client-side routing

React Fundamentals

Course Code

GTIT41

Duration

2 Days

Course Fee

POA

Accreditation

N/A

Target Audience

  • Web Developers

Attendee Requirements

  • Students should have 3-6 months of prior JavaScript/HTML knowledge

Expand all

Course Description

React has redefined web development, with its focus on testable components, a virtual DOM and functional programming concepts. Widely popular, and in use by companies such as Netflix, facebook, Instagram and Walmart, React has changed the way developers think about building client-side apps. This React Fundamentals training course will teach you the fundamentals of React, with plenty of lab exercises to take you step by step toward building complete applications. The class will use ES6+ throughout.

 

Objectives

After this course, you will be able to:

  • Understand how React rethinks front-end UI architecture and use this understanding to build apps and components effectively
  • Build a variety of React components and apps using both class-based and stateless functional component styles
  • Utilize the React component lifecycle in building components
  • Write managed components to handle user input
  • Appreciate why Higher Order Components might be employed when building an app
  • Utilise React Router to provide client-side routing
Course Outline

Overview

  •     Why React?
  •     The React Ecosystem
  •     Real-world React App Examples
  •     React and the Virtual DOM
  •     React Native

Getting Started with React

  •     Defining a Component
  •     Writing a Hello, world! App
  •     A Minimal React Project
  •     Toolchains and create-react-app
  •     Developer Tools

JSX

  •     JSX Syntax & the Translation Process
  •     Naming Conventions
  •     Adding Children
  •     Including JavaScript Expressions
  •     Children from Functions

Properties

  •     Specifying Props

Property Validation

  •     Declaring PropTypes
  •     Custom Property Validation

Events

  •     Handling Events
  •     Binding Event Handlers – approaches in ES6 and beyond
  •     Updating State
  •     Synthetic Events
  •     Bubbling and Capturing

State

  •     State and ES6 Classes
  •     Initializing State
  •     Updating State and Rendering
  •     State and Asynchrony
  •     Understanding when to use props vs when to use state
  •     Stateless vs Stateful Components

Adding Interaction

  •     Data flow in React

Component Lifecycle

  •     Exploring lifecycle with common use cases
  •     componentDidMount()
  •     componentWillUnmount()
  •     Retrieving Data on componentDidMount()
  •     Transitions using Lifecycle Hooks
  •     Further Lifecycle Methods

Composing Multiple Components

  •     Composition
  •     Rendering Children
  •     Ownership
  •     Programmatically Rendering Child Components

Rendering Lists

  •     Using Functional Programming Techniques to render UI
  •     React’s reuse of DOM Elements
  •     Using Keys
  •     Stateful children

Transferring Props

  •     Transferring Props to Children
  •     JSX Spread Syntax
  •     Excluding Props

Forms

  •     Uncontrolled Components
  •     Controlled Components
  •     When to use which
  •     Building out an Invoice component

Stateless Function Components (SFCs)

  •     The SFC Pattern
  •     When to use SFCs

Refs

  •     Accessing real DOM elements
  •     When to use refs

Higher Order Components (HOCs)

  •     What’s an HOC?
  •     When to apply the HOC pattern
  •     Examples of HOCs
  •     Creating and invoking HOCs

Client-Side Routing

  •     The Need for Client-Side Routing
  •     Routing Approaches – History API and Hash-based Routing
  •     The Role of a Router
  •     Using React Router
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

“I particularly liked the heavy hands on sessions that went on with the training. Other than that, really liked Mark's training style. His experience in the field really shines through.”

 

Docker - GTDK1

Feb ‘19

“Instructor's ability to demonstrate new features that are not part of the course help show his mastery as well as prepare us for changes in the technology. Great work.

 

Using Docker & Kubernetes in Production - GTK8SG

Oct ‘18


“This course was an excellent insight into the Cloud Service Management world and equips me with the tools to go back to my company and build upon it.”

 

Cloud Service Manager - GTC13

Jan ‘19

 


“The course was great. The instructor is true Kubernetes Ninja. Loved the hands on approach. Very happy with the course.”

 

Using Docker & Kubernetes in Production - GTK8SG

Oct ‘18

“Excellent instructor. You can tell he really understands the concepts he's presenting and is very passionate about his work. He answered every question we asked and presented the course in an interesting and involving manner.”

 

Spring Boot Development - GTIT40

Nov ‘18

"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

1 - 4 Apr - DUBLIN

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

CompTIA Network+ FastTrack

More dates coming soon

This fast-paced course teaches the essentials of networking and helps to prepare the student for the CompTIA Network+ certification.

Learn More

Applied Data Science with Python

More dates coming soon

Learn about the theoretical and practical aspects of using Python in the realm of Data Science, Business Analytics, and Data Logistics

Learn More

Introduction to Python 3

More dates coming soon

Python is a powerful and popular object-oriented programming/scripting language with many high quality libraries.

Learn More

Newsletter

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

Subscribe to our Newsletter