A large number of problems with React, Django, Django REST and Axios - reactjs

Question

This post is the first part of the following series -
A large number of problems with React, Django, Django REST and Axios
Products on the homepage are not being displayed properly (Django, Django Rest and React)
(React and Django) Displaying products on the homepage is working fine, but when I click on any particular product, then the rendering is wrong
I am going through a very good course about setting up an e-shop, but I have reached the stage, where I am not that much sure, what is the exact purpose of the code, which I have written. (especially the async function in HomeScreen.js) We are using React and Django. My issue is related to the homepage or HomeScreen.js file, which was working fine, when I was loading the products from the static products.json file, but later on, in the course, we had to switch this and load the products from an API using Django REST and Axios (axios was used to remove the CORS error) and my problem now is, that I am not able to load the products to the HomeScreen.js and all I see is a blank page with the header instead of a full page. I am running the react server through the npm start command (the result of that can be seen on the screenshots below) but I also tried to run the Django server, which gives me this error - OSError: [WinError 123]. (Note: the Django server was fixed and is now running - so when I want to display the website, I am running React server and Django server simultaneously)
Please let me know if You can see some solution to these problems. Thank You very much for any help in advance.
The page looks like this -
And it should look like this -
(Note: this problem with displaying of the products was solved by modyfying the urls.py in the base (app) folder -
from django.urls import path
from . import views
urlpatterns = [
path('', views.getRoutes, name="routes"),
path('products/', views.getProducts, name="products"),
path('products/<str:pk>/', views.getProduct, name="product"),
]
was changed to
from django.conf.urls import url
from . import views
urlpatterns = [
url('products/', views.getProducts, name="products"),
url('products/<str:pk>/', views.getProduct, name="product"),
url('routes/', views.getRoutes, name="routes"),
]
)
When I am looking to my console, I am getting a lot of errors such as - (not all of these errors
are harmful, because for example the one relating to the collapseOnSellect was there even in the before all of the other errors have shown up and everything was working fine)
127.0.0.1:8000/api/products/:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
Here are more details about the third error in the console -
(Note: This error has vanished after solving the following (path related and rest related) errors)
Another problem is, that VSCode is giving me these 2 errors - No name 'path' in module 'django.urls' and No name 'include' in module 'django.urls' (these errors are related to the both urls.py files)
(Note: these errors were solved by changing path to url (in both urls.py files) and changing from django.urls import url, include to from django.conf.urls import url, include in the project´s urls.py file and changing from django.urls import url to from django.conf.urls import url in base application´s urls.py file)
and I am getting 2 additional errors in the views.py - Unable to import 'rest_framework.decorators' and Unable to import 'rest_framework.response'. I do not know, why am I getting so many errors, because I am trying to follow every step in the tutorial.
(Note: these two errors were solved in conjuction with this SO post -
Can't import: 'unable to import rest_framework' when importing serializer? (windows))
I am sorry, if my description of the problem is not exact, because I am still just a beginner when it comes to Django and React and so on. But I might explain to You further if You ask me the right questions. I have installed Axios accordingly to the tutorial and I have integrated it into the settings.py file.
Both of the frontend and backend folders are situated in the same folder.
HomeScreen.js -
import React, { useState, useEffect } from "react";
import { Row, Col } from "react-bootstrap";
import Product from "../components/Product";
import axios from "axios"
function HomeScreen() {
const [products, setProducts] = useState([])
useEffect(() => {
async function fetchProducts() {
const { data } = await axios.get('http://127.0.0.1:8000/api/products/')
setProducts(data)
}
fetchProducts()
},[] )
return (
<div>
<h1>Latest Products</h1>
<Row>
{products.map((product) => (
<Col key={product._id} sm={12} md={6} lg={4} xl={3}>
<Product product={product} />
</Col>
))}
</Row>
</div>
);
}
export default HomeScreen;
views.py -
from django.shortcuts import render
from django.http import JsonResponse
from rest_framework.decorators import api_view
from rest_framework.response import Response
from .products import products
# Create your views here.
#api_view(['GET'])
def getRoutes(request):
routes = [
'/api/products/',
'/api/products/create/',
'api/products/upload/',
'api/products/<id>/reviews/',
'api/products/top/',
'api/products/<id>/',
'api/products/delete/<id>/',
'api/products/<update>/<id>/',
]
return Response(routes)
#api_view(['GET'])
def getProducts(request):
return Response(products)
#api_view(['GET'])
def getProduct(request, pk):
product = None
for i in products:
if i['_id'] == pk:
product = i
break
return Response(product)
urls.py in the base (app) folder -
from django.urls import path
from . import views
urlpatterns = [
path('', views.getRoutes, name="routes"),
path('products/', views.getProducts, name="products"),
path('products/<str:pk>/', views.getProduct, name="product"),
]
urls.py in the project folder -
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('base.urls')),
]

Answer 1

import React, { useState, useEffect } from "react";
import { Row, Col } from "react-bootstrap";
import Product from "../components/Product";
import axios from "axios"
function HomeScreen() {
const [products, setProducts] = useState([])
useEffect(() => {
async function fetchProducts() {
const responce = await axios.get('http://127.0.0.1:8000/api/products/')
.then((data) => setProducts(data.data)
)}
fetchProducts()
},[] )
return (
<div>
<h1>Latest Products</h1>
<Row>
{products.map((product) => (
<Col key={product._id} sm={12} md={6} lg={4} xl={3}>
<Product product={product} />
</Col>
))}
</Row>
</div>
);
}
export default HomeScreen;