Developing Applications using ReactJS

Overview

This course is a complete guide to building and testing scalable web applications using ReactJS, the industry’s leading JavaScript library. Using already-known knowledge of web development via HTML, CSS, and JavaScript, you will build powerful single-page applications using React’s key features and add-ons.

This course will provide an overview of the React library before launching into each of the building blocks of developing React applications. Learners will create a project with the use of function and class components, routing, props, forms, state management, and many other key React concepts used in both single-developer and enterprise-level React application development.

Delivery is through instructor-led explanations and short follow-up exercises that allow learners to experiment with code. Learners will be continuously building upon a practical project throughout their learning.

Prerequisites

Learners must have skills in the following:

• At least 1 year of experience in a software/web app development role
• Advanced knowledge and practical experience of HTML, CSS, and JavaScript

It is essential you understand the face of contemporary web development to attend this course. We insist upon learners having a good understanding of and experience of JavaScript plus good HTML and CSS skills (as covered in QAHTMLCSS).

Target Audience

This course has been designed for learners who are:

• Software Engineers
• Front-End Developers
• Full-Stack Developers

Objectives

By the end of this course, you will learn how to:

• Set up and run a simple React application.
• Create both React function and class components whilst developing an appropriate component hierarchy for control flow and routing.
• Develop and utilise React props within components for data flow.
• Use static external data to populate components, as well as conditionally render items dependent on data values.
• Create react forms via components and add into an application.
• Work with state in React, and appropriately manage state throughout an application.
• Manage inverse data flow within a React application via props and handler functions.
• Utilise hooks within an application to work with external data and services.
• Use context to abstract state from components.

Outline

1. Introduction to React

• Introduction to React and its advantages
• Create and run a React project
• React and the Virtual DOM

2. Components

• How to write and use a component
• Function and Class Components
• Embedding Dynamic Content
• Header and Footer Components

3. Props

• React and Data
• Understanding Props and Data Flow
• Default Props
• Prop Types and Validation

4. Using Static Data

• Data Sources and Importing Static Data
• Using a Dataset with Maps

5. Forms

• Building a React Form
• Forms and State
• Static Forms
• Use Events within Forms

6. Conditional Rendering

• How to render content conditionally
• List Rendering
• Importing and Rendering Data

7. Events

• Event Handling
• Events and Components

8. State

• Introduction to State
• Developing and Managing State
• Add State into an application

9. Inverse Data Flow

• Parent and Child Data Flow
• Callbacks
• Implementing Inverse Data Flow

10. useEffect Hooks

• What is a Hook, and what are Effect Hooks?
• Hook Flow
• Implementing useEffect

11. External Data, Services and Requests

• Making External Requests for Data
• HTTP Request and Response Structure and Types
• Using useEffect to collect data
• JSON Server and RESTful APIs
• Use an External Service to get, send and update data

12. Routing

• React Router Introduction
• Single-Page App architecture
• Routing logic and implementation
• Rendering via the Navigate component
• Parameterised routes
• Passing props to a routed component

13. Context

• What is React Context?
• Context use cases
• State Management with Context
• How is sessionStorage used within React?