Brian’s Tech Blog
Xano Backend for a React App

Xano Backend for a React App

Rendering array data from a xano database

Brian Kiplagat's photo
Brian Kiplagat
·

5 min read

You will often want to display multiple similar components from a collection of data. You can use the JavaScript array methods to manipulate an array of data. On this page, you’ll use and map() with React to filter and transform an array of data from a xano backend to render the components.

You will learn

  • What is Xano

  • How to create a xano database

  • How to create a xano API

  • How to make get requests from your react app to the xano api

  • How to render components from an array using JavaScript’s map()

What is Xano

Xano is the fastest way to build a backend for your web, mobile or IoT application without code. With it, you can create a REST API powered by a fully-fledged database and connect it to other services like Airtable, Webflow, or your own frontend or APIs

How to create a xano Database?

  1. Create a new Account on Xano. This will enable all CRUD operations

  2. Go to the Database tab on the left menu and click the Add Table button. You can choose Add to create a new table from scratch or Import to import existing data using a CSV or Airtable.

  3. Create a Table Name, add a Description, and Add basic CRUD endpoints to allow Xano to generate API endpoints for CRUD operations.

  4. Click Add Table

Great! Now you have a fully fledged database! Go ahead and seed your databse with a few values. I have a sample CSV that you can download and import or seed to Xano

Create APIs on top of your database

Once you have created a Database and filled it with your data, you should create APIs for your Database. There are two options to create Endpoints in Xano: use Default CRUD operations endpoints or create custom API endpoints.

  1. Use Default CRUD operations endpoints. Go to the API tab on the left menu and choose Default API Group and Copy API Group Base URL to your clipboard, and let’s head over to the IDE

  2. Create custom APIs endpoints.

First, go to Add API Group and fill in Name, and Description. Next, click Add API endpoint.

Xano automatically generates and documents CRUD operations for each table you define. API Endpoints have a "method" or HTTP Verb associated them and the most common are POST, GET, PUT, PATCH, and DELETE. In this demonstration we shall use a GET HTTP Request on our react frontend to fetch all projects in our projects table. You can use other tables as well

import React, {useEffect, useState} from "react";
import {Container, Row, Col} from "react-bootstrap";
import ProjectCard from "./ProjectCards";
import Particle from "../Particle";

function Projects() {
   const [data,setData] = useState(null)
    useEffect(() => {
        const fetchData = async () => {
            try {
                const APIBaseURL = 'https://x8ki-letl-twano.io/api.....'
                const response = await fetch(`${APIBaseURL}/projects`)
                const result = await response.json();
                setData(result);
                console.log(result)

            } catch (e) {
                console.log("Error",e)
            }
        }
        fetchData()

    }, []);

    return (
        <Container fluid className="project-section">
            <Particle/>
            <Container>
                <h1 className="project-heading">
                    My Recent <strong className="purple">Works </strong>
                </h1>
                <p style={{color: "white"}}>
                    Here are a few projects I've worked on recently.
                </p>
                <Row style={{justifyContent: "center", paddingBottom: "10px"}}>

                    {data && data.map((project, index) => (
                        <Col md={4} className="project-card" key={index}>
                            <ProjectCard
                                imgPath={project.imgPath}
                                isBlog={project.isBlog}
                                title={project.title}
                                description={project.description}
                                ghLink={project.ghLink}
                                demoLink={project.demoLink}
                            />
                        </Col>
                    ))}


                </Row>
            </Container>
        </Container>
    );
}

export default Projects;

This is a React functional component named "Projects" that displays a list of projects. Let me break down the code for you:

  1. Imports:

    • import React, { useEffect, useState } from "react";: Imports the necessary modules from the React library.

    • import { Container, Row, Col } from "react-bootstrap";: Imports specific components (Container, Row, Col) from the React Bootstrap library.

    • import ProjectCard from "./ProjectCards";: Imports a custom component named "ProjectCard" from a file named "ProjectCards".

    • import Particle from "../Particle";: Imports a custom component named "Particle" from a file located in the parent directory.

  2. Functional Component:

    • function Projects() { ... }: Defines a functional component named "Projects".

  3. State and Effect Hook:

    • const [data, setData] = useState(null): Initializes a state variable data using the useState hook, which will be used to store the project data fetched from an API.

    • useEffect(() => { ... }, []);: Uses the useEffect hook to fetch data from an API when the component mounts. The empty dependency array [] ensures that the effect runs only once.

  4. Fetch Data from API:

    • Inside the useEffect hook, there is an asynchronous function fetchData that fetches project data from a specified API endpoint using the fetch function.

    • The fetched data is then converted to JSON format using response.json() and stored in the result variable.

    • The setData(result) updates the state variable data with the fetched project data.

    • If an error occurs during the fetch operation, it is caught and logged.

  5. Render Section:

    • The component returns JSX that includes a fluid Container with a particle effect (<Particle />), a title, and a paragraph introducing the projects.

    • Inside the Container, there is a Row with project cards generated based on the fetched data using the map function. Each project card is a Col component.

    • The ProjectCard component is passed various props (imgPath, isBlog, title, description, ghLink, demoLink) for each project.

  6. Export:

    • export default Projects;: Exports the "Projects" component as the default export.

In summary, this component fetches project data from an API, displays a particle effect, and renders project cards based on the fetched data using the React Bootstrap components. The project cards are populated with information from the fetched data.

Conclusion

n this tutorial, we looked at what Xano is and what it does. Also, we looked at how it can be used to create CRUD APIs and use it on the front end. Finally, we covered how to use react to dynamically render data on the front end using Javascript Array.map

Also, note this is a high-level overview of creating a CRUD REST API for a blog using Xano. The implementation details for each step can be extensive and may vary depending on your specific requirements. Be sure to consult the Xano documentation and relevant package documentation for detailed instructions on each part of the process.

To learn more about Xano, check out the docs.

Brian Kiplagat is a software developer. You can learn more about him here:

Twitter

Github

Node.jsDatabasesJavaScript