Forem: Tomislav Borbaš

Fetching Data With React Hooks and Fetch API [Beginners Guide]

Tomislav Borbaš — Thu, 09 Jul 2020 12:25:05 +0000

Although I don’t like sharing food, I’m okay with sharing knowledge, so today I’m going to talk about fetching data, using react hooks and Fetch API. :D

After a short introduction and getting you familiar with those terms, I’m also going to show you how to use them in code. How exactly? By giving you examples and walking you through the process step by step.

So bare with me and let’s go!

Fetch API

Fetch API is a promise-based JS API, used for making asynchronous HTTP requests in a browser similar to XMLHttpRequest. It's standardized and supported by all modern browsers, except for IE.
In case IE needs to be covered as well, then there's a polyfill released by Github.

You can find the full documentation here

UseState

UseState is a Hook that allows you to have state variables in functional components. It allows us to use the same capabilities that this.state provides in a class.

Full documentation is available at this link

UseEffect

It executes functions after the component gets rendered.
We can think of UseEffect as componentDidMount, componentDidUpdate and componentWillUnmount combined together.

Find the full documentation here

Let’s get down to business

By now, I’m sure you have a basic understanding of what we’re going to use. That means we can slowly start diving into the code and then eventually show you the data from API.

I want to keep it as simple as possible so we’re going to use a placeholder API. You can take a look at it
here

What are the prerequisites?

Since we’re keeping it simple and leaving the focus on fetching data, instead of React, we’ll just use the Create React App.
To install it, use the next commands in terminal:

npx create-react-app my-app
cd my-app
npm start

After installing the app, your folder structure should look like this:

Locate yourself at App.js and voila! We’re ready to start.

Fetching data

First, we’re going to import stuff we’re going to use and create a function.

import React, {useState, useEffect} from "react"

const App = () => {
  return <div> Fetched data will be displayed here</div>
}

The next step is to add a useState hook and to define the name of the state - in our case, that's data. Then, we define the function we’ll use later on to update the state - setData.
In the end, we set the initial value of our state, which is null</strong in our case.

import React, {useState, useEffect} from "react"

const App = () => {
  const [data, setData] = useState(null)
  return <div> Fetched data will be displayed here</div>
}

After adding our useState hook to handle the data, the next step is to make the fetch request.

First, we’re going to create a constant fetchURL, in case we need to reuse our endpoint to fetch other data, except for posts. You can check here what else you can fetch and play with.

Then we create an arrow function named getData and inside of that function, we’re going to call fetch().
Inside fetch, we’re going to provide a previously defined constant fetchURL and add /posts, since we’re fetching posts.

import React, {useState, useEffect} from "react"
const fetchURL = "https://jsonplaceholder.typicode.com"
const App = () => {
  const [data, setData] = useState(null)
  const getData = () =>
    fetch(`${fetchURL}/posts`)
      .then((res) => res.json())

  return <div> Fetched data will be displayed here</div>
}

After defining our request, it's time to bring in useEffect. Then we’re calling our getData() function inside of the useEffect hook to set it to the local state.

At the end of useEffect, we added an empty array [], because that way, useEffect runs only once.

import React, {useState, useEffect} from "react"
const fetchURL = "https://jsonplaceholder.typicode.com"
const App = () => {
  const [data, setData] = useState(null)
  const getData = () =>
    fetch(`${fetchURL}/posts`)
      .then((res) => res.json())

 useEffect(() => {
    getData().then((data) => setData(data))
  }, [])
  return <div> Fetched data will be displayed here</div>
}

At this point, we have everything ready to show the data inside our div. We’re going to use a map() function to iterate through this array of data.

In case you’re not familiar with the map you can read the full documentation here. Once we iterate over the data, we can access posts' titles, which we’re calling by item.title.

import React, { useEffect, useState } from 'react'

const App = () => {
  const [data, setData] = useState(null)
  const fetchURL = "https://jsonplaceholder.typicode.com"
  const getData = () =>
    fetch(`${fetchURL}/posts`)
      .then((res) => res.json())

  useEffect(() => {
    getData().then((data) => setData(data))
  }, [])

  return (
    <div>
      {data?.map((item) => 
        <ul>
          <li>{item.title}</li>
        </ul>
      )}
    </div>
  )
}

export default App;

If you did exactly as written in the post, your browser should, in the end, look like this:

To conclude

You made it through! Congrats! Hope this guide will help you fetch data and teach you how to use react hooks for other use cases as well. 🤗

To access the full working demo, click this link and download it from the repo. The code in the repo is the same as it is in the article so you can follow up easier.

If you have any questions, feel free to hit me up. Happy coding!

How Atomic Design Can Make Your Life Easier

Tomislav Borbaš — Tue, 09 Jun 2020 15:40:12 +0000

Hello fellow reader!

You know that situation when you get on board with an on-going project and then, all you find is chaos? The project structure is disastah so you try reusing components but it’s nearly impossible, or it takes more time than creating them from scratch. After finding zillion lines of duplicated code, you finally get the courage to ask yourself: “Should I stay or should I just go?”.

Well, I’d tell you to run, BUT, you can try to refractor/re-create the project structure using Atomic design! Not only will it make your life easier, but also the life of every next developer that joins the project. You’re welcome

ATOMIC DESIGN????

Atomic design is a methodology composed of five distinct stages. They work together to create an interface design system in a more deliberate and hierarchical manner. These five stages consist of Atoms -> molecules -> organisms -> templates and pages. Each stage plays a key role in the hierarchy of our interface design system.

I'll explain each stage soon, but as you can assume, it's similar to chemistry. Atoms combine together to form molecules, molecules combine further to form relatively complex organisms etc.

Atoms of our interfaces serve as the foundational building blocks. The atom should include basic HTML elements, like inputs, buttons and others that can't be broken down any further without losing their functionality.

Each atom has its own unique properties, like dimensions of an image or the font size of a primary heading. In the context of a pattern library, atoms demonstrate your base styles, which helps with maintaining your design system.

But it’s important to note that atoms come to life only with an application.

Molecules are simple groups of UI elements functioning together as a unit. For example, a form label, a search input and a button can unite and create a Search form molecule and all of a sudden, those atoms have a purpose. Yay!

The label atom now defines the input atom. Clicking on the button, the atom submits the form and the result is a simple, portable, and reusable component that can be dropped anywhere a search component is needed.

Burdening a single pattern with too much complexity makes a software unwieldy. How can you change that? Easy, by creating simple UI molecules, which’ll encourage reusability, make testing easier, and promote consistency through the interface.

Organisms are relatively complex UI components composed of:

a) groups of molecules and/or

b) atoms and/or

c) other organisms.

These organisms form distinct sections of an interface.

Let's go back to our search form molecule and put it into the context of a header organism with other elements, like a logo image and navigation. Now the header forms a standalone section of an interface.

Finally, we can say that organisms demonstrate smaller and simpler components in action, and serve as distinct patterns that can be reused.

A template is something like a wireframe. The job of a template is to create relationships between the organisms and other components through positions, placements, and patterns of the pages, but without any styles or data.

When a template like that undertakes the implementation of the content, it becomes an instance of a composition which we call a page.

So now when you have a better understanding of Atomic design, let's see how we can use it to create our design system in the project.

The design system doesn't need to be ready before we start creating the React app - it can have basic components and grow as the app grows. However, elements that must be ready are those elements, the page we’re creating, consists of.

I won't guide you through the whole process, I'll just show you the final result - how the app structure should look like when using atomic design. :)

In the structure above, the pages are outside of the components folder, since a page is not a component and it should be closer to the service layer of the app.

To sum up, why should you use Atomic design?

For me, this is the most effective way to build things out of smaller, focused, and independent pieces. It gives you a possibility to shift between abstract and concrete.

With Atomic design, you can see what interfaces that are broken down to their atoms look like, and how, when combined, they create the form of the final product.

Further on, it offers you a number of major benefits like:

Faster prototyping
Easier updates and revisions
Improved consistency
Less cross-checking while testing
Eliminate errors
System acts as a single source of truth

That’s a wrap! I hope this post helps anyone who’s structuring projects from scratch to be more organised and efficient.