React: Back-end to the React SPA | Moriel's Mauni blog

Table of Contents

Intro

This was a part from a learning project of recipe website.

For now, the posts are locally and deleted when the page is refreshed. We need an API that will handle HTTP requests and responses.

POST

PostsList.jsx

function PostList({ isPosting, onStopPosting }) {
    
    function addPostHandler(postData) {
        // Send/Fetch HTTP request
        fetch('http://localhost:8080/posts', {
            method: 'POST', // default is 'GET'
            body: JSON.stringify(postData), // Send data as JSON only
            headers: {
                'Content-Type': 'application/json'
            }
        });

fetch(): The Fetch API provides an interface for fetching resources (including across the network). The Fetch API uses Request and Response objects (and other things involved with network requests), as well as related concepts such as CORS and the HTTP Origin header semantics.

GET with useEffect

useEffect(): is a React Hook that lets you synchronize a component with an external system.

import { useState, useEffect } from 'react';

// takes a function and an array.
useEffect(() => {}, []);

PostsList.jsx

import { useState, useEffect } from "react";

function PostList({ isPosting, onStopPosting }) {

    useEffect(() => {
        async function fetchPost() { // asynchronous function
	    //  Reaching to back-end and getting the posts.
            const response = await fetch('http://localhost:8080/posts')
        //  Data is raw, re-format the data    
            const resData = await response.json();
        // set the state value    
            setPosts(resData.posts);
        }

	//  trigger the function
        fetchPost();
    }, []); // Empty array = React loads only when the component mounts.