React - Working with External Data
Introduction to External Data in React

This module looks at how to work with External Data in React. You’ll be looking at Class Components, Effect Hooks, and how to handle data.  

Learning Objectives 

The objectives of this module are to provide you with an understanding of: 

  • The component lifecycle  
  • Hooks in React  
  • How to create restful services  
  • How to use an Effect Dependency Array  
  • How to hand errors in data requests 
  • How to send data   

Intended Audience

This learning path is aimed at all who wish to learn how to use the ReactJS framework.  


It is essential you understand the face of contemporary web development to attend this course. We insist upon JavaScript experience, along with good HTML and CSS skills. 


We welcome all feedback and suggestions - please contact us at to let us know what you think. 


- [Instructor] We've already stressed on several occasions that React is for taking data and displaying it. So it's clear that data plays a massive part in any application that we build using it. As with any web application that uses JavaScript, refreshing the browser is catastrophic for any data stored in the page. Obviously we want to be able to persist data and we have several options. Many outside the remit of React for doing this. One option would be to leverage local storage in the browser. While this provides persistent storage across browser sessions, it can be removed by the user and it will not persist data that needs to be held at the server level. Modern web applications can have many tiers. And it's usual to request and send data from some form of data service. For a web application to get this data, it needs to be able to make HTTP requests and then handle the data when it's received. This asynchronous nature causes a 'chicken and egg' situation for React. As we want to render a UI quickly but need the data to populate it. To help us solve this conundrum we need to understand how components are created, updated, and destroyed. And what goes on behind the scenes while those things are happening. React components have a defined life cycle. And we need to know when various things happen during it so that we can work with the data at the right point.

About the Author
Learning Paths

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics