1. Home
  2. Training Library
  3. Programming
  4. Courses
  5. React - Working with External Data

Sending Data

Developed with
QA

The course is part of this learning path

ReactJS: Zero to Hero
course-steps
14
certification
7
lab-steps
3
description
1
play-arrow
Start course
Overview
DifficultyIntermediate
Duration32m
Students174

Description

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.  

Prerequisites

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. 

Feedback 

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

Transcript

- [Instructor] Where we previously had an end point to retrieve the courses from, imagine a scenario where you want to add another course to the list. To allow this, we've added the add courses form component to the app. It's a standard react form that holds its own state for the form values. The support button raises the unsubmit event on the form and the handling function is where we want to send the data to the server. Sending data is not a lot different to retrieving data in terms of using the fetch API. The submit form function is asynchronous. We want to be able to make fetch API calls and handle promises using async/await. The event is passed into this function. As we want to stop the default get requests being made, using the prevent default function. On line 14 of the code, we prepare the request party using the adjacent string five function and the state from the component. We preserve the number type on privacies and the passing function. Once we've created the request party, we create a request options object. This sets the method type to post the content type header to application/jason and the body to the one we just prepared. We then make a call to the fetch API using the same URL as we got the call state from earlier adding a second argument that the request options body a post request, where we turn the set body if it's successful with the two oh one stakes is code, which means created. For brevity, we just console log the response out here, but you really should do similar area of checking to that which we did for the response in the get courses function. Adding information into the form and clicking submit. Add status to the file hold on jason server. And it sends a two oh one response back. Jason server will automatically allocate the next free institute to the ID. In this case, seven. We can see that the body of the request is logged out on the browser console. Choosing seven from the dropdown on the filter for cost is table, will initiate a request for the course with the idea of certain to be displayed which it is. To check that it's been added to all of the courses, we select zero from the dropdown. And you can see that our new course is indeed there at the bottom of the web development courses. Just so you know, we've also added some sorting to the courses array, so the course is display in category order. But that's just more JavaScript then react. Depending on your application, a form submit handler may not be the right place to make post requests. We also didn't go into validation here. I started to just implementing more JavaScript. You need to decide what you need and how and when you're going to use it for yourself. If it needs to be in an effect hog, don't forget about dependencies and asynchronous limitations. If you need to make pot delete or update requests, just follow the same path as we did for the post request, adding the correct properties to the request options and using the correct URL. So now you can get your application to make requests for data and sending data back to create or manipulate it at the end point.

About the Author
Students4446
Labs8
Courses29
Learning paths6

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