6 replies

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}
}

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>

  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>
)
}

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>
)
}

How connect frontend and backend? (solved)

Similar Threads

Similar Threads

Similar Threads