Kevin Powell - Community•2y ago

How connect frontend and backend? (solved)

I have fronted on react and backend on C# How I can connect it? I know something that I need use REST api but I'm absolutely newbie on it If you know how I can do it DM me please It depends on what exactly you want connect - in my case it was auth from You need sever db (like supabase or mongodb) or your local backend sever In frontend part I needed write smth like this

import { useEffect,useState } from "react"
import axios, { AxiosError } from "axios"
import { json } from "react-router"

export function useBooks() {
  const [books,setBooks] = useState<any[]>([])
  const [loading,setLoading] = useState(false)
  const [error,setError] = useState('')


  async function fetchBooks(){
    try {
      setLoading(true)
      const response = await fetch('https://localhost:7123/api/BookStore/')
      const data = await response.json()
      setBooks(data.books)
      setLoading(false)
          
    } catch(e:unknown) {
      const error = e as AxiosError
      setLoading(false)
      setError(error.message)
    }
  }

  useEffect(()=> {
    fetchBooks()
  },[])
  return { books, error, loading}
}

import { useEffect,useState } from "react"
import axios, { AxiosError } from "axios"
import { json } from "react-router"

export function useBooks() {
  const [books,setBooks] = useState<any[]>([])
  const [loading,setLoading] = useState(false)
  const [error,setError] = useState('')


  async function fetchBooks(){
    try {
      setLoading(true)
      const response = await fetch('https://localhost:7123/api/BookStore/')
      const data = await response.json()
      setBooks(data.books)
      setLoading(false)
          
    } catch(e:unknown) {
      const error = e as AxiosError
      setLoading(false)
      setError(error.message)
    }
  }

  useEffect(()=> {
    fetchBooks()
  },[])
  return { books, error, loading}
}

And output it somehow like this

  const {loading,error,books} = useBooks()

 {/* Books output */}
  <div className="flex flex-col gap-y-4 px-8 py-4 border-[1px] border-[#aaaaaa] rounded-xl">
    <h1 className="text-2xl font-bold text-center">Books</h1>
    {loading && <p>Loading...</p>}
    { error && <p className='text-center text-red-600'>{error}</p>}
    {books.map(book => <Book key={book.id} {...book} /
  </div>

  const {loading,error,books} = useBooks()

 {/* Books output */}
  <div className="flex flex-col gap-y-4 px-8 py-4 border-[1px] border-[#aaaaaa] rounded-xl">
    <h1 className="text-2xl font-bold text-center">Books</h1>
    {loading && <p>Loading...</p>}
    { error && <p className='text-center text-red-600'>{error}</p>}
    {books.map(book => <Book key={book.id} {...book} /
  </div>

Book.tsx (its better to wirte interface with TypeScript)

export function Book(book:any) {
return (
 <div>
              <p>Genre: {book.genre}</p>
              <p>Author: <span className="font-bold">{book.author}</span></p>
              <p>Year: <span className="font-bold">{book.creationYear}</span></p>
            </div>
)
}

export function Book(book:any) {
return (
 <div>
              <p>Genre: {book.genre}</p>
              <p>Author: <span className="font-bold">{book.author}</span></p>
              <p>Year: <span className="font-bold">{book.creationYear}</span></p>
            </div>
)
}

4 Replies

Jochem•2y ago

the idea of posting here is that you can learn, but someone else might be able to find your post and learn from it as well. Learning in public is also a much better way of learning, and asking people to DM is a bigger hurdle to try to get help as well. as for your actual question, REST APIs are a very broad topic, I'd suggest looking up some tutorials online. I'm not familiar with the web landscape for C# at all, so I can't really give any suggestions, but anything recent should do it's not something someone can just type out in a couple of messages, you'll have to do some of your own research

13eck•2y ago

As Jochem said, that's what REST APIs are for. You code up your API controllers in C# and your front end does some requests to the endpoints (usually using fetch(), but some frameworks have their own way of doing it…which ultimately calls fetch() under the hood :p) and gets data back. While REST APIs are a basic web concept, they're by no means simple. There's a lot that goes into them, especially if you want to restrict who can do what. Authorization and authentication are super important and not that simple. For some good C# YT suggestions, I like: I Am Tim Corey: https://www.youtube.com/@IAmTimCorey Nick Chapsas: https://www.youtube.com/@nickchapsas Raw Coding: https://www.youtube.com/@RawCoding

FLAMES•2y ago

If you are by any chance using Visual Studio (Community edition is free for personal use and is way better than Visual Studio Code for C#) you might want to use this template for your app.

FLAMES•2y ago

It is ready to use sample app (but you need a NodeJS to build it) with some boilerplate you might reverse-engineer.

Gaming

Programming

How connect frontend and backend? (solved)