DEV Community

StackPuz
StackPuz

Posted on • Originally published at blog.stackpuz.com on

Building a React CRUD App with a Go API

#react #go #crud

React CRUD App with a Go API

Mastering CRUD operations with modern frameworks is crucial for web developers. This article will walk you through creating a CRUD app using React for the front end and a Go API for the back end, showcasing the efficiency and flexibility of this powerful combination.

Prerequisites

  • Node.js
  • Go 1.21
  • MySQL

Setup React project 

npm create vite@4.4.0 view -- --template react
cd view
npm install react-router-dom@5 axios
Enter fullscreen mode Exit fullscreen mode

React project structure 

├─ index.html
├─ public
│  └─ css
│     └─ style.css
└─ src
   ├─ components
   │  └─ product
   │     ├─ Create.jsx
   │     ├─ Delete.jsx
   │     ├─ Detail.jsx
   │     ├─ Edit.jsx
   │     ├─ Index.jsx
   │     └─ Service.js
   ├─ history.js
   ├─ http.js
   ├─ main.jsx
   ├─ router.jsx
   └─ App.jsx
Enter fullscreen mode Exit fullscreen mode

React project files

main.jsx 

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <App />
)
Enter fullscreen mode Exit fullscreen mode

The main.jsx file is the entry point for a React app. It imports React, ReactDOM, and the App component. The ReactDOM.createRoot method is used to render the App component into the HTML element with the ID root.

App.jsx 

import React, { useState, useEffect } from 'react'
import { Router, Link } from 'react-router-dom'
import history from './history'
import Route from './router'

export default function App() {
  return (
    <Router history={history}>
      <Route />
    </Router>
  )
}
Enter fullscreen mode Exit fullscreen mode

The App.jsx file sets up routing for a React app. The App component wraps the application in a Router using the custom history, and renders the Route component for handling routes.

history.js 

import { createBrowserHistory } from 'history'

export default createBrowserHistory()
Enter fullscreen mode Exit fullscreen mode

The history.js file exports a custom browser history object created with createBrowserHistory for managing navigation in a React app.

router.jsx 

import React, { Suspense, lazy } from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'

export default function AppRoute(props) {
  return (
    <Suspense fallback={''}>
      <Switch>
        <Route path="/" component={(p) => <Redirect to="/product" /> } exact />
        <Route path="/product" component={lazy(() => import('./components/product/Index'))} exact />
        <Route path="/product/create" component={lazy(() => import('./components/product/Create'))} exact />
        <Route path="/product/:id/" component={lazy(() => import('./components/product/Detail'))} exact />
        <Route path="/product/edit/:id/" component={lazy(() => import('./components/product/Edit'))} exact />
        <Route path="/product/delete/:id/" component={lazy(() => import('./components/product/Delete'))} exact />
      </Switch>
    </Suspense>
  )
}
Enter fullscreen mode Exit fullscreen mode

The router.jsx file sets up routing for a React app with lazy-loaded components. It uses Suspense to handle loading status, and Switch to define routes. The root path redirects to /product, and specific routes handle product-related pages like create, detail, edit, and delete.

http.js 

import axios from 'axios'

let http = axios.create({
  baseURL: 'http://localhost:8080/api',
  headers: {
    'Content-type': 'application/json'
  }
})

export default http
Enter fullscreen mode Exit fullscreen mode

The http.js file configures and exports an Axios instance with a centralized base URL, which is a standard practice for managing API endpoints and default headers set to application/json.

Create.jsx 

import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import Service from './Service'

export default function ProductCreate(props) {

  const [product, setProduct] = useState({})

  function create(e) {
    e.preventDefault()
    product.Price = parseFloat(product.Price)
    Service.create(product).then(() => {
      props.history.push('/product')
    }).catch((e) => {
      alert(e.response.data)
    })
  }

  function onChange(e) {
    let data = { ...product }
    data[e.target.name] = e.target.value
    setProduct(data)
  }

  return (
    <div className="container">
      <div className="row">
        <div className="col">
          <form method="post" onSubmit={create}>
            <div className="row">
              <div className="mb-3 col-md-6 col-lg-4">
                <label className="form-label" htmlFor="product_name">Name</label>
                <input id="product_name" name="Name" className="form-control" onChange={onChange} value={product.Name ?? '' } maxLength="50" />
              </div>
              <div className="mb-3 col-md-6 col-lg-4">
                <label className="form-label" htmlFor="product_price">Price</label>
                <input id="product_price" name="Price" className="form-control" onChange={onChange} value={product.Price ?? '' } type="number" />
              </div>
              <div className="col-12">
                <Link className="btn btn-secondary" to="/product">Cancel</Link>
                <button className="btn btn-primary">Submit</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

The create.jsx file defines a ProductCreate component for adding a new product. It uses useState to manage form data, and handles form submission with create(e) that sends data via Service.create and redirects on success. The form includes fields for product name and price, with a cancel link and submit button.

Delete.jsx 

import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import Service from './Service'

export default function ProductDelete(props) {

  const [product, setProduct] = useState({})

  useEffect(() => {
    get()
  }, [props.match.params.id])

  function get() {
    return Service.delete(props.match.params.id).then(response => {
      setProduct(response.data)
    }).catch(e => {
      alert(e.response.data)
    })
  }

  function remove(e) {
    e.preventDefault()
    Service.delete(props.match.params.id, product).then(() => {
      props.history.push('/product')
    }).catch((e) => {
      alert(e.response.data)
    })
  }

  return (
    <div className="container">
      <div className="row">
        <div className="col">
          <form method="post" onSubmit={remove}>
            <div className="row">
              <div className="mb-3 col-md-6 col-lg-4">
                <label className="form-label" htmlFor="product_id">Id</label>
                <input readOnly id="product_id" name="Id" className="form-control" value={product.Id ?? '' } type="number" required />
              </div>
              <div className="mb-3 col-md-6 col-lg-4">
                <label className="form-label" htmlFor="product_name">Name</label>
                <input readOnly id="product_name" name="Name" className="form-control" value={product.Name ?? '' } maxLength="50" />
              </div>
              <div className="mb-3 col-md-6 col-lg-4">
                <label className="form-label" htmlFor="product_price">Price</label>
                <input readOnly id="product_price" name="Price" className="form-control" value={product.Price ?? '' } type="number" />
              </div>
              <div className="col-12">
                <Link className="btn btn-secondary" to="/product">Cancel</Link>
                <button className="btn btn-danger">Delete</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

The Delete.jsx file defines a ProductDelete component for deleting a product. It fetches product details using Service.delete and displays them in a read-only form. The component uses useEffect to load product data based on the product ID from the route parameters. The remove(e) function handles deletion and redirects to /product upon success.

Detail.jsx 

import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import Service from './Service'

export default function ProductDetail(props) {

  const [product, setProduct] = useState({})

  useEffect(() => {
    get()
  }, [props.match.params.id])

  function get() {
    return Service.get(props.match.params.id).then(response => {
      setProduct(response.data)
    }).catch(e => {
      alert(e.response.data)
    })
  }

  return (
    <div className="container">
      <div className="row">
        <div className="col">
          <form method="post">
            <div className="row">
              <div className="mb-3 col-md-6 col-lg-4">
                <label className="form-label" htmlFor="product_id">Id</label>
                <input readOnly id="product_id" name="Id" className="form-control" value={product.Id ?? '' } type="number" required />
              </div>
              <div className="mb-3 col-md-6 col-lg-4">
                <label className="form-label" htmlFor="product_name">Name</label>
                <input readOnly id="product_name" name="Name" className="form-control" value={product.Name ?? '' } maxLength="50" />
              </div>
              <div className="mb-3 col-md-6 col-lg-4">
                <label className="form-label" htmlFor="product_price">Price</label>
                <input readOnly id="product_price" name="Price" className="form-control" value={product.Price ?? '' } type="number" />
              </div>
              <div className="col-12">
                <Link className="btn btn-secondary" to="/product">Back</Link>
                <Link className="btn btn-primary" to={`/product/edit/${product.Id}`}>Edit</Link>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

The Detail.jsx file defines a ProductDetail component that displays details of a product. It fetches product data using Service.get based on the product ID from the route parameters and displays it in a read-only form, and provides links to go back to the product list or to edit the product.

Edit.jsx 

import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import Service from './Service'

export default function ProductEdit(props) {

  const [product, setProduct] = useState({})

  useEffect(() => {
    get()
  }, [props.match.params.id])

  function get() {
    return Service.edit(props.match.params.id).then(response => {
      setProduct(response.data)
    }).catch(e => {
      alert(e.response.data)
    })
  }

  function edit(e) {
    e.preventDefault()
    product.Price = parseFloat(product.Price)
    Service.edit(props.match.params.id, product).then(() => {
      props.history.push('/product')
    }).catch((e) => {
      alert(e.response.data)
    })
  }

  function onChange(e) {
    let data = { ...product }
    data[e.target.name] = e.target.value
    setProduct(data)
  }

  return (
    <div className="container">
      <div className="row">
        <div className="col">
          <form method="post" onSubmit={edit}>
            <div className="row">
              <div className="mb-3 col-md-6 col-lg-4">
                <label className="form-label" htmlFor="product_id">Id</label>
                <input readOnly id="product_id" name="Id" className="form-control" onChange={onChange} value={product.Id ?? '' } type="number" required />
              </div>
              <div className="mb-3 col-md-6 col-lg-4">
                <label className="form-label" htmlFor="product_name">Name</label>
                <input id="product_name" name="Name" className="form-control" onChange={onChange} value={product.Name ?? '' } maxLength="50" />
              </div>
              <div className="mb-3 col-md-6 col-lg-4">
                <label className="form-label" htmlFor="product_price">Price</label>
                <input id="product_price" name="Price" className="form-control" onChange={onChange} value={product.Price ?? '' } type="number" />
              </div>
              <div className="col-12">
                <Link className="btn btn-secondary" to="/product">Cancel</Link>
                <button className="btn btn-primary">Submit</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

The Edit.jsx file defines a ProductEdit component for updating product details. It fetches the current product data using Service.edit and populates a form with this data. The form allows users to modify the product's name and price. On form submission, the edit(e) function updates the product via Service.edit and redirects to the product list on success.

Index.jsx 

import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import Service from './Service'

export default function ProductIndex(props) {

  const [products, setProducts] = useState([])

  useEffect(() => {
    get()
  }, [props.location])

  function get() {
    Service.get().then(response => {
      setProducts(response.data)
    }).catch(e => {
      alert(e.response.data)
    })
  }

  return (
    <div className="container">
      <div className="row">
        <div className="col">
          <table className="table table-striped table-hover">
            <thead>
              <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Price</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {products.map((product, index) =>
              <tr key={index}>
                <td className="text-center">{product.Id}</td>
                <td>{product.Name}</td>
                <td className="text-center">{product.Price}</td>
                <td className="text-center">
                  <Link className="btn btn-secondary" to={`/product/${product.Id}`} title="View"><i className="fa fa-eye"></i></Link>
                  <Link className="btn btn-primary" to={`/product/edit/${product.Id}`} title="Edit"><i className="fa fa-pencil"></i></Link>
                  <Link className="btn btn-danger" to={`/product/delete/${product.Id}`} title="Delete"><i className="fa fa-times"></i></Link>
                </td>
              </tr>
              )}
            </tbody>
          </table>
          <Link className="btn btn-primary" to="/product/create">Create</Link>
        </div>
      </div>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

The Index.jsx file defines a ProductIndex component that displays a list of products in a table. It fetches product data using Service.get and updates the list on component mount. The table shows product ID, name, and price, with action buttons for viewing, editing, and deleting each product. It also includes a link to create a new product.

Service.js 

import http from '../../http'

export default {
  get(id) {
    if (id) {
      return http.get(`/products/${id}`)
    }
    else {
      return http.get('/products' + location.search)
    }
  },
  create(data) {
    if (data) {
      return http.post('/products', data)
    }
    else {
      return http.get('/products/create')
    }
  },
  edit(id, data) {
    if (data) {
      return http.put(`/products/${id}`, data)
    }
    else {
      return http.get(`/products/${id}`)
    }
  },
  delete(id, data) {
    if (data) {
      return http.delete(`/products/${id}`)
    }
    else {
      return http.get(`/products/${id}`)
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

The Service.js file defines API methods for handling product operations. It uses an http instance for making requests:

  • get(id) Retrieves a single product by ID or all products if no ID is provided.
  • create(data) Creates a new product with the provided data or fetches the creation form if no data is provided.
  • edit(id, data) Updates a product by ID with the provided data or fetches the product details if no data is provided.
  • delete(id, data) Deletes a product by ID or fetches the product details if no data is provided.

style.css 

.container {
  margin-top: 2em;
}

.btn {
  margin-right: 0.25em;
}
Enter fullscreen mode Exit fullscreen mode

The CSS adjusts the layout by adding space above the container and spacing out buttons horizontally.

index.html 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
  <link href="/css/style.css" rel="stylesheet">
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

The HTML serves as the main entry point for an React application, including Bootstrap for styling, Font Awesome for icons, It features a div with the ID root where the React app will render.

Setup Go API project 

go mod init app
go get github.com/gin-gonic/gin
go get github.com/gin-contrib/cors
go get gorm.io/gorm
go get gorm.io/driver/mysql
go get github.com/joho/godotenv
Enter fullscreen mode Exit fullscreen mode

Create a testing database named "example" and execute the database.sql file to import the table and data.

Go API Project structure 

├─ .env
├─ main.go
├─ config
│  └─ db.go
├─ controllers
│  └─ product_controller.go
├─ models
│  └─ product.go
└─ router
   └─ router.go
Enter fullscreen mode Exit fullscreen mode

Go API Project files

.env 

DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=example
DB_USER=root
DB_PASSWORD=
Enter fullscreen mode Exit fullscreen mode

This file holds the configuration details for connecting to the database.

db.go 

package config

import (
    "fmt"
    "os"

    "github.com/joho/godotenv"
    "gorm.io/driver/mysql"
    "gorm.io/gorm"
    "gorm.io/gorm/schema"
)

var DB *gorm.DB

func SetupDatabase() {
    godotenv.Load()
    connection := fmt.Sprintf("%s:%s@tcp(%s:%s)/%s?charset=utf8mb4&parseTime=true", os.Getenv("DB_USER"), os.Getenv("DB_PASSWORD"), os.Getenv("DB_HOST"), os.Getenv("DB_PORT"), os.Getenv("DB_DATABASE"))
    db, _ := gorm.Open(mysql.Open(connection), &gorm.Config{NamingStrategy: schema.NamingStrategy{SingularTable: true}})
    DB = db
}
Enter fullscreen mode Exit fullscreen mode

This db.go file configures the database connection with GORM. The SetupDatabase function loads environment variables, constructs a MySQL connection string, and initializes a GORM instance, which is stored in the global DB variable.

router.go 

package router

import (
    "app/controllers"

    "github.com/gin-contrib/cors"
    "github.com/gin-gonic/gin"
)

func SetupRouter() {
    productController := controllers.ProductController{}
    corsConfig := cors.DefaultConfig()
    corsConfig.AllowAllOrigins = true
    router := gin.Default()
    router.Use(cors.New(corsConfig))
    router.Group("/api").
        GET("/products", productController.Index).
        POST("/products", productController.Create).
        GET("/products/:id", productController.Get).
        PUT("/products/:id", productController.Update).
        DELETE("/products/:id", productController.Delete)
    router.Run()
}
Enter fullscreen mode Exit fullscreen mode

This router.go file sets up routing for a Go application using the Gin framework. The SetupRouter function initializes a Gin router with CORS middleware to allow all origins. It defines routes for handling product-related operations under the /api/products path, each mapped to a method in the ProductController. Finally, it starts the Gin server.

product.go 

package models

type Product struct {
    Id int `gorm:"primaryKey;autoIncrement"`
    Name string
    Price float64
}
Enter fullscreen mode Exit fullscreen mode

This product.go file defines a Product model for use with GORM. It specifies a Product struct with three fields: Id (an auto-incrementing primary key), Name, Price.

product_controller.go 

package controllers

import (
    "app/config"
    "app/models"
    "net/http"
    "strconv"

    "github.com/gin-gonic/gin"
)

type ProductController struct {
}

func (con *ProductController) Index(c *gin.Context) {
    var products []models.Product
    config.DB.Find(&products)
    c.JSON(http.StatusOK, products)
}

func (con *ProductController) Get(c *gin.Context) {
    var product models.Product
    config.DB.First(&product, c.Params.ByName("id"))
    c.JSON(http.StatusOK, product)
}

func (con *ProductController) Create(c *gin.Context) {
    var product models.Product
    c.BindJSON(&product)
    if err := config.DB.Create(&product).Error; err != nil {
        c.AbortWithError(http.StatusBadRequest, err)
        return
    }
    c.JSON(http.StatusOK, product)
}

func (con *ProductController) Update(c *gin.Context) {
    var product models.Product
    c.BindJSON(&product)
    product.Id, _ = strconv.Atoi(c.Params.ByName("id"))
    if err := config.DB.Updates(&product).Error; err != nil {
        c.AbortWithError(http.StatusBadRequest, err)
        return
    }
    c.JSON(http.StatusOK, product)
}

func (con *ProductController) Delete(c *gin.Context) {
    var product models.Product
    if err := config.DB.Delete(&product, c.Params.ByName("id")).Error; err != nil {
        c.AbortWithError(http.StatusBadRequest, err)
        return
    }
    c.Status(http.StatusOK)
}
Enter fullscreen mode Exit fullscreen mode

The product_controller.go file defines a ProductController struct with methods to handle CRUD operations for products in a Go application using the Gin framework.

  • Index Retrieves and returns a list of all products.
  • Get Fetches and returns a single product by its ID.
  • Create Creates a new product from the request body.
  • Update Updates an existing product with the data from the request body.
  • Delete Deletes a product by its ID.

main.go 

package main

import (
    "app/config"
    "app/router"
)

func main() {
    config.SetupDatabase()
    router.SetupRouter()
}
Enter fullscreen mode Exit fullscreen mode

This main.go file is the entry point for the Go application. It imports configuration and routing packages, then calls config.SetupDatabase()to initialize the database connection and router.SetupRouter() to set up the application’s routes.

Run projects

Run React project

npm run dev
Enter fullscreen mode Exit fullscreen mode

Run Go API project

go run main.go
Enter fullscreen mode Exit fullscreen mode

Open the web browser and goto http://localhost:5173

You will find this product list page.

list page

Testing

Click the "View" button to see the product details page.

details page

Click the "Edit" button to modify the product and update its details.

edit page

Click the "Submit" button to save the updated product details.

updated data

Click the "Create" button to add a new product and input its details.

create page

Click the "Submit" button to save the new product.

created product

Click the "Delete" button to remove the previously created product.

delete page

Click the "Delete" button to confirm the removal of this product.

deleted product

Conclusion

In conclusion, we have learned how to create a basic React project using JSX syntax to build views and routing, while setting up an API using the Gin framework as the backend. By leveraging GORM for database operations, we've successfully developed a responsive front-end that seamlessly interacts with a robust backend, establishing a solid foundation for building modern, full-stack web applications.

Source code: https://github.com/stackpuz/Example-CRUD-React-18-Go

Create a React CRUD App in Minutes: https://stackpuz.com

Top comments (0)

Read next

behan05 profile image

My journey as a Full-Stack Developer

Behan kumar -

best_codes profile image

React 19 — New Features ️‍🔥

Best Codes -

garciadiazjaime profile image

React + AWS Cognito: Email Authentication Setup Guide (First Part)

Jaime -

kegesch profile image

Simulating Mobile Virtual Keyboards in Progressive Web Apps

Jonas Geschke -