Developing Applications using ReactJS

This three-day course is designed for developers who are already familiar with JavaScript, including ES6, and wish to learn how to create User Interfaces using the ReactJS library. It will discuss how ReactJS can be used to create reusable, interactive UI components, single page applications using React Router and an introduction to Flux and Redux.

The aim of the course is that delegates develop their skills, knowledge and understanding so that they can confidently use ReactJS to create User Interfaces.

Prerequisities:
A solid understanding of JavaScript and preferably attendance at the following QA courses “Programming with JavaScript” and “Next Generation JavaScript: ECMAScript 2015” (or equivalent programming experience).

Please note: Before attending this class delegates must have a Microsoft account (signing up one is free). The instructions on how to set up a Microsoft account can be found here.

Objectives:

• Using Flux and Redux with React
• ReactJS as the V part for Angular and other frameworks

Program:

• Introduction to ReactJS
  • What is ReactJS
  • What does ReactJS do
  • ReactJS, the DOM and the VirtualDOM
• ReactJS Projects
  • Project Fundamentals
  • The react and react-dom packages
  • Babel and Webpack
  • Other project files
• Components and JSX
  • Components
  • JSX and how to modify a project to use JSX
  • Chrome React Developer tools
• Using props and state
  • props – description, use, typing and validation
    state – description, use, setting and changing
    Passing state through props
    Functional components
    Lifting up state
• Component Lifecycles
  • Lifecycle Methods: Mouting, Updating and Unmounting
  • ReactJS and the DOM
  • ReactDOM methods
• Forms, Events and Refs
  • Controlled components
  • How are Events controlled
  • What are Refs
  • Uncontrolled components
  • Forms as child components
• Working with Datasets
  • Collecting data from forms
  • Data sources
  • Arrays/Iterators and Keys
  • Sub-Components
• Composition vs Inheritance
  • Composition and the use of containment and specialisation
  • Inheritance use in ReactJS
• Single Page Applications
  • Single Page Applications and React Router
  • Defining and Lining to Routes
  • Displaying Route Content
  • Params and Nesting
• Thinking in React
  • Facebook’s ‘Thinking in React’ Philosophy
  • Working with other Libraries

Outcome:

• Create components for use in a ReactJS application using JSX
• Pass data around an application built in ReactJS
• How components can be used as part of single page applications

Trainer:
Ed Wright
An ‘Outstanding’ Trainer in Software Development with more than 10 years experience a Trainer, ICT teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript (including ES2015, TypeScript, Angular, React and PWAs), HTML, CSS and SQL but also OOP (Java), Programming Foundations (using Python) and DevOps (Git, CI/CD, etc). Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes. I have been with QA since February 2016.

My specialist area in training is in Emerging Technologies within Web Development. I am mainly delivering courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular and React (the latter is authored by me) and have delivered on behalf of Google for PWAs. I have developed a new suite of PHP courses and have extensive experience with HTML/CSS and MySQL. I deliver QA’s Programming Foundations course and Java using the Eclipse IDE. My skillset is extends into the DevOps sphere, where I am able to deliver courses based around Agile/Scrum practices, version control and CI/CD.