Creating Mock Restful Services
Start course

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] When we're developing a web application, it's not guaranteed that the data services we need will be available during development. This is especially troublesome, if our application is data-driven and makes many requests to a data service. Wouldn't it be handy if we could mock a RESTful service? Well, we can. There's an NPM package called JSON Server. That's particularly useful, if the data end point returns, JSON. It claims to provide a full fake REST API with zero-coding in less than 30 seconds. And it pretty much does. To use it, you need a JSON file that will act as your database and an NPM installation of JSON Server. You can see the command for a global installation here on the screen. Once installed, point JSON server at your file with the minus minus watch switch, and hey, presto, Just to know for using with React, JSON server runs on port 3000 by default, which is the same port as our React server. You can change the port in JSON Server by adding the -p switch and an alternative number, say 4,000. Here we have a JSON file that contains some JSON data about courses. You can see that it is a properly formed JSON file. It has an initial key of courses. And this is an array of course objects. Firing up JSON server to watch this file and navigating to local hosts 4,000/courses yields all of the courses in the file. If I use the RESTful for path courses/1, you can see that we get the course with the id of one return. The console shows details of the requests that we have made We've made get requests, but we could also use any valid HTTP request type to JSON server, such as post, put, update and delete. This tool is really useful for us as it lets us build the correct functionality into our application, without needing the actual end service. We can make requests and ensure that they work. We simply change the request URL to the one for the actual service before deployment.

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