Forem: RedEyeMedia⭕

GET Requests in React Using Async/Await

RedEyeMedia⭕ — Sun, 15 Aug 2021 08:50:39 +0000

In this tutorial you will learn how to do efficient GET-requests in React.

This will include:

create-react-app for creating our boilerplate code
Axios for the actual HTTP operation
Async / Await to handle asynchronous promises
React Hooks
Ternary operator in the JSX

Tutorial on YouTube:

The code:

import { useEffect, useState } from "react";
import axios from "axios";

function App() {
  const [fetchedData, setFetchedData] = useState([]);
  useEffect(() => {
    const getData = async () => {
      const data = await axios.get(
        "https://jsonplaceholder.typicode.com/todos/1"
      );
      setFetchedData(data);
    };
    getData();
  }, []);

  console.log("data: ", fetchedData);

  return (
    <div className="App">
      <h1>test</h1>
      {fetchedData.data ? <h2>title: {fetchedData.data.title}</h2> : null}
    </div>
  );
}

export default App;

Axios

Let's begin with the dependency, namely Axios. Axios is a HTTP client for nodejs which makes doing requests very intuitive. Here we are only doing GET-requests so we don't need to pass any additional parameters like a body in our request. That means it will simply be axios.get(URL). The result is stored in a local variable called data. We are fetching our data from JSON placeholder which is a useful fake API for when you're just doing testing.

Aync / Await

The function that wraps the GET-request is called getData and is marked as async, meaning it is asynchronous and expects a promise. Because of this marking, we need to specify the data or the promise we expect with a property of await. This makes sure that the function literally waits for the response to get here.

useEffect Hook

Furthermore, the getData function is defined inside a useEffect Hook. This is strictly not necessary, and it can be moved outside of it. The important part is that the function call happens inside it. We also have a empty dependency array (the empty brackets at the end of the useEffect Hook) that makes sure that whatever is inside only runs once on render.

useState Hook

Another thing related to Hooks that are worth mentioning is the useState Hook. Here we have initialized it to hold our fetchedData. We also have the set function for setting a new value to that variable, and we utilize that in the getData function. So when the function is called on render it fetches the data from JSON placeholder and sets the new state to be whatever came back. In this case data.

The JSX

Lastly we render our the title property of our single data object to the page in our JSX. Here we must use a ternary operator to check for potential null values. Meaning that the data might not be there when we expect it to and React will throw an error. So by using this expression we guard for that and React is happy.

Conclusion

GET-requests in React have a few key points, that can be handy to remember.
Hooks in the form of useState and useEffect, for covering the local state and rendering correctly. Axios is optional of course, but makes the job pretty easy to understand in my opinion. And finally the null check in the JSX prevents you from getting errors.

Now that you know how to do GET-requests the right way, it isn't difficult to change this into a POST request or whatever you might need.
If you feel like the code can be even more efficient, please post it in the comments!
Hope this was helpful to you.
Have a nice day.

Follow and support me:

I am especially grateful for subscriptions to my YouTube channel. And if you want to follow me on Twitter, or just give some feedback that's awesome too!

📺 YouTube

🐧 Twitter

Want to read more?

Here are some other articles that I've written:

Simple Node and Express REST API

RedEyeMedia⭕ — Wed, 11 Aug 2021 19:18:32 +0000

Learn by example how to make a simple API that has two endpoints.

What we will make in this tutorial:

simple server running locally on your computer
using mocked data for simplicity
creating endpoints that we will call to change our data
use Postman to query our endpoints

Tutorial on YouTube:

The Code:

const express = require("express");
const bodyParser = require("body-parser");

const app = express();
app.use(bodyParser.json());
const port = 3001;

const customers = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Harry", lastName: "Potter" },
  { firstName: "Jack", lastName: "Sparrow" },
];

app.get("/customerlist", (req, res) => {
  res.send(customers);
});

app.post("/customer", (req, res) => {
  console.log("req.body: ", req.body);
  const newCustomer = req.body;
  customers.push(newCustomer);
  res.send("Customer added.");
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost: ${port}`);
});

So let's first talk about the data we will be working with. Its simply an array of objects, with a couple of key/value pairs. First and last name. Feel free to make as many creative additions as you'd like here.
The data:

const customers = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Harry", lastName: "Potter" },
  { firstName: "Jack", lastName: "Sparrow" },
];

Now let's just take a look at what is the essential part of our server. The boilerplate code that needs to be there for our server to run.
Boilerplate code for the server to run:

const express = require("express");
const bodyParser = require("body-parser");

const app = express();
app.use(bodyParser.json());
const port = 3001;

app.listen(port, () => {
  console.log(`Example app listening at http://localhost: ${port}`);

So basically we need to import express and body parser. Express because it is the framework we use on top of nodejs. Bodyparser so that we can do POST requests and change our data. We set a port so it is open for running queries through it in Postman, and we say listen to that port. Most of this is done with the app variable. Which has some important properties on it, like use and listen.

What we then do is add our endpoints.

What are endpoints?

Endpoints are dedicated spaces under your projects URL that you can visit with a certain request, be it a GET- or a POST-request, and have something happen. The most useful thing to have happen is manipulating the data in a logical way. We like to read, write, update and delete our data, depending on the scenario. These actions corresponds to doing CRUD operations within our RESTful API. And what does all that mean? A RESTful API is a backend service designed in a way that follows a certain pattern we call REST. It's not that easy to get a straight answer to what exactly that entails, when asking google, and it gets pretty technical. CRUD operations on the other hand is more straight forward. Its and acronym which stands for Create, Read, Update and Delete. Doing those operations are usually speaking generally, what you want your API to be able to do.

So back to endpoint. If you create a GET endpoint in your API, it's purpose is usually to get data, or Read data from the database. In the same way, a POST route usually creates new data in the database when called. The thing is you can't just visit the post route in your browser and expect it to get called. You need to explicitly make it a POST request. That's why we use Postman!

So our first endpoint just responds with our data, where res stands for response. And the thing that is sent back to us is the customer list called customers. So when calling this endpoint in Postman we would get the list back as a response.

app.get("/customerlist", (req, res) => {
  res.send(customers);
});

Lastly we have the POST route which adds one customer to the customer list. Because this is just mocked data we can use simple array manipulation here with customers.push(newCustomer) to add a new customer to the object array.

app.post("/customer", (req, res) => {
  console.log("req.body: ", req.body);
  const newCustomer = req.body;
  customers.push(newCustomer);
  res.send("Customer added.");
});

Conclusion

This is probably one of the easier APIs you can make with Node and Express, but it covers the most basics concepts. And with everything being in the same file I was hoping it would be easier to connect the dots. A natural next step here could be to expand the endpoints to include Update and Delete requests, so you can update and delete objects in the array. You could also change the mocked data to go directly to a database.

I hope you got something from this. Later I'll maybe write an article that does basically the same just that it is connected to Mongodb Atlas.

Cheers!

Follow and support me:

I am especially grateful for subscriptions to my YouTube channel. And if you want to follow me on Twitter, or just give some feedback that's awesome too!

📺 YouTube

🐧 Twitter

I try to get out new web dev content on Youtube every week, and sometimes I write articles like this one.
Hope you enjoy!

Fast and Easy Way to Upload Code to Github

RedEyeMedia⭕ — Wed, 28 Jul 2021 17:17:19 +0000

In this quick tutorial we will look at how to get your existing project uploaded to Github, by using the Github interface and a few simple git commands.

Only 4 simple Git commands:

First set the remote origin, meaning the url outside of your computer where you want to upload.
This is done through this command where you need to change git-repository-url with your specific url:

git remote add origin git-repository-url

Then only 3 more commands and you're done:

git add . (adds everything to staging)
git commit -m "Git message" (Commits staged changes with message inside quotes)
git push --set-upstream origin master (points to the place you want to upload your code to and push it to remote origin on Github)

I still use this method of uploading my project, because it's so simple and fast. I don't really have to remember anything except for the fundamentals of Git.

Follow and support me:

I really appreciate subscriptions to my Youtube channel. A big thank you if you feel like subscribing.
And if you want to follow me on Twitter, or just give some feedback that's awsome too! 👍

📺 YouTube

🐧 Twitter

I try to get out new web dev content on Youtube every week, particularly about fullstack, and sometimes I write articles like this one.
Hope you enjoy!

Simple Custom Hook

RedEyeMedia⭕ — Mon, 26 Jul 2021 15:13:26 +0000

Learn how to get started with React Hooks in this quick tutorial.

React Hooks are super useful to know, and can be a important new tool in your frontend development. Knowing how to create your very own Custom Hooks was for me like discovering React components all over again. The awesome thing about custom hooks is that you can re-use your hooks and write cleaner code.

In this tutorial we will make a custom hook that copies text to the clipboard when clicking a button.

This tutorial will include a React Hook that is:

Simple - it just copies text to the clipboard
Made from create-react-app
A modern React feature
It's reusable
It's expandable
No CSS!

Follow and support me:

I can't really express enough how much I appreciate subscriptions to my Youtube channel. Thank you. And if you want to follow me on Twitter, or just give some feedback that's awsome too!

📺 YouTube

🐧 Twitter

I try to get out new web dev content on Youtube every week, and sometimes I write articles like this one. This is my first article on dev.to, and more will come 🐌
Hope you enjoy!

Forem: RedEyeMedia⭕

GET Requests in React Using Async/Await

In this tutorial you will learn how to do efficient GET-requests in React.

Tutorial on YouTube:

The code:

Axios

Aync / Await

useEffect Hook

useState Hook

The JSX

Conclusion

Follow and support me:

Want to read more?

Simple Node and Express REST API

Learn by example how to make a simple API that has two endpoints.

Tutorial on YouTube:

The Code:

What are endpoints?

Conclusion

Follow and support me:

Fast and Easy Way to Upload Code to Github

Only 4 simple Git commands:

Then only 3 more commands and you're done:

Follow and support me:

Other posts:

Simple Custom Hook

Learn how to get started with React Hooks in this quick tutorial.

This tutorial will include a React Hook that is:

Follow and support me: