Integrating React Front-End and Django/Python/PostgreSQL backend

So far, we have created the API and confirmed its working on the django admin page. Now, we will look at how to create a react app to display data from the database via django.

1. Setup the react App

Install react using the following command from the root directory:

npm install create-react-app

Create a react app, and call it frontend

npx create-react-app frontend

start the server

cd frontend
npm start

The default react app will show up on the localhost://3000.  Change the public/index.html page to include the root element. We will use this in the src/index.js file in just a while.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="overlays"></div>
    <div id="root"></div>
  </body>
</html>

Create the src folder under frontend folder. This folder will hold all the js files that will be used by the application. The index.js file is the starting point, and should look like this: 

import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

ReactDOM.createRoot() lets you create a 'root' element to display React components inside a browser DOM node. This 'root' node should be defined in the index.html page of the application. 
root.render(<App />);  actually renders the <App/> JSX. The <App/> JSX is defined in the src/App,js file. Substitute the code in App.js with the code below:, and should look as follows:
mport { useState } from 'react';
import Meals from './components/Meals/Meals';
function App() {
 
  return ( 
        <Meals />
  );
}
export default App;


The <Meals/> JSX refers to the Meals class in the src/Meals.js file, defined as follows:



const Meals = () => {
  const [meals, setMeals] = useState([]);
  useEffect(() => {
    const fetchMeals = async () => {
      const response = await fetch('http://localhost:8000/api/menu');
      const responseData = await response.json();

      const loadedMeals = [];
      for (const key in responseData) {

        loadedMeals.push({
          id: responseData[key].meal_id,
          meal_id: responseData[key].meal_id,
          meal_name: responseData[key].meal_name,
          meal_description: responseData[key].meal_description,
          meal_price: responseData[key].meal_price,
        });

      }
      setMeals(loadedMeals);
    };

    fetchMeals();
  }, []);

  const mealsList = meals.map((meal) => (
    <MealItem
      key={meal.meal_id}
      meal_id={meal.meal_id}
      meal_name={meal.meal_name}
      meal_description={meal.meal_description}
      meal_price={meal.meal_price}
    />
  ));

  return (
  <li>
      <div>
        <h3>{mealsList.meal_id} {mealsList.meal_name}</h3>
        <div>{mealsList.meal_description}</div>
        <div>{mealsList.meal_price}</div>
      </div>
  </li>
 );
};
export default Meals;


This script will returh a JSX that has an unordered list of the variable mealsList through the Meals Component
to the calling App component. We will try and understand a little better how the meal component does its task.

We use a useEffect function where callback is a function fetchMeals, and has no dependencies, because we want
it to bring down data from the database only once during the first load.

We define the fetchMeals function to perform 3 actions in an async fashion.

    1. it fetches meals from the API (that we created in Django) using the fetch method into the response
variable.
    2. It converts the response variable to JSON format and stores it in responseData variable.
    3. It loads the contents of the responseData JSON into the loadedMeals list.
    4. We use a state variable called 'meals' to save the list for managing state.
    Next, we execute the function.

Once the fetch is performed, we now map the contents of the meal list to the mealsList JSX variable. This
mealsList variable is rendered as an unordered list JSX and returned to the calling App Component.

Finally, this is the display you will see. Note that I have ignored the CSS styles I have applied for functional
explanation.







Comments

Post a Comment

Popular posts from this blog

Python and PostgreSQL – Creating database, schema, tables and inserting data using python library psycopg2

In this post, we will learn to create a database called 'foodApp' in postgreSQL,a schema called 'foodschm' within the database, a table called 'menu' within the schema, and finally, insert data into the table 'menu'.   Install PostgreSQL from https://www.postgresql.org/download/ .  Install psycopg2 using pip install.  C reate a folder under your working directory. Let's call it 'foodApp'. Inside  'foodApp', create a directory called backend.Next, i nside the folder backend, create the program called main.py with the code as follows: 1.       Import psycopg2  import psycopg2 2.       Define database connection properties and connect to the host. Connect to the default database ‘postgres’ with whatever password you gave it during installation.    Make sure to keep the autocommit to true. Without this, postgresql will throw up a transaction error.  Use the connection object to create a cu...
Read more

Full Stack Web Developer BootCamp. (A course by Jose Portilla on Udemy) - Updated for recent versions of Python and Django

Image
      Welcome to a step by step write up to creating a web application using Python (V3.10) and dJango (v4.1.5). While going through the course by Jose Portilla on Udemy for a full stack web development bootcamp by Jose Portilla, I realised that the course followed much older versions of python and Django. Hence, I noted updated findings and hope that it may help someone chart their path through a bit easily. I am skipping the parts in learning HTML/CSS/JavaScript etc and going straight to Section 16 (Django Level One Basics) of the course.   1.      Install Django using Python pip feature. Command prompt: pip install django 2.      Create your project under your working directory. Let us call it "first_project". Command prompt:   django-admin startproject first_project This command will create the following files under the first_project directory -   asgi.py, settings.py, urls,py and wsgi.py:  ...
Read more

Python and Django Full Stack - Have React speak to PostgreSQL

Backend Overview The most popular way of getting ReactJS to speak to PostgreSQL is using a backend framework that can handle the communication between the two, such as Express.js or Django.  While the PERN stack (PostgreSQL, Express, React, Node.js) is a popular full-stack solution for building web applications with React and PostgreSQL, the  React/Django/PostgreSQL stack is popular for its versatility and ease of use, and is suitable for large-scale web applications that require a solid backend. In this post, we will work with the Django framework and achieve our objective of having react communicate with PostgreSQL. ReactJS/Django/PostgreSQL stack Here's a general overview of how to connect ReactJS, Django, and PostgreSQL to build a full-stack web application: Setting up the backend: Install Django using pip:  pip install django Create a new Django project using the command line:  django-admin startproject projectname Create a new Django app within the project:...
Read more