Create a React project called frontend using create-react-app and npx:

npx create-react-app frontend
Our application will use Bootstrap 4 to style the React interface, so we will include it in the frontend/src/App.css file, which manages our CSS settings. Open the file:

nano ~/djangoreactproject/frontend/src/App.css
Next, navigate inside your React application and start the development server:

cd ~/djangoreactproject/frontend
npm start
You’ll see a structure like this:

Output├── customers
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── djangoreactproject
│   ├── __init__.py
│   ├── __pycache__
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── frontend
│   ├── package.json
│   ├── public
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   └── manifest.json
│   ├── README.md
│   ├── src
│   │   ├── App.css
│   │   ├── App.js
│   │   ├── App.test.js
│   │   ├── index.css
│   │   ├── index.js
│   │   ├── logo.svg
│   │   └── registerServiceWorker.js
│   └── yarn.lock
└── manage.py
~/djangoreactproject/frontend/src/App.css

@import  'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';
To see the directory structure of the entire project at this point, navigate to the root folder and run tree again:

cd ~/djangoreactproject
tree

Recommend

How To Build a Modern Web Application to Manage Customer Information with Django and React on Ubuntu 18.04 Step 3 — Creating the React Frontend

How To Build a Modern Web Application to Manage Customer Information with Django and React on Ubuntu 18.04 Step 2 — Creating the Django Project

How To Build a Modern Web Application to Manage Customer Information with Django and React on Ubuntu 18.04 Step 1 — Creating a Python Virtual Environment and Installing Dependencies

Ubuntu and Debian Package Management Essentials Step 7 – Adding Repositories and PPAs

Ubuntu and Debian Package Management Essentials Step 6 – Transferring Package Lists Between Systems Import Package List

Ubuntu and Debian Package Management Essentials Step 6 – Transferring Package Lists Between Systems

Ubuntu and Debian Package Management Essentials Step 5 – Getting Information about Packages Find Which Package Provides a File Without Installing It

Ubuntu and Debian Package Management Essentials Step 5 – Getting Information about Packages List Files Installed by a Package

Ubuntu and Debian Package Management Essentials Step 5 – Getting Information about Packages Search Installed Packages

Ubuntu and Debian Package Management Essentials Step 5 – Getting Information about Packages Show Install States of Filtered Packages

Ubuntu and Debian Package Management Essentials Step 5 – Getting Information about Packages Show Installed Packages with dpkg -l

Ubuntu and Debian Package Management Essentials Step 5 – Getting Information about Packages Show Installed and Available Package Versions

Ubuntu and Debian Package Management Essentials Step 5 – Getting Information about Packages Show Info about a .deb Package

Ubuntu and Debian Package Management Essentials Step 5 – Getting Information about Packages

Ubuntu and Debian Package Management Essentials Step 4 – Removing Packages and Deleting Files Clean Obsolete Package Files

Ubuntu and Debian Package Management Essentials Step 4 – Removing Packages and Deleting Files Remove Any Automatic Dependencies that are No Longer Needed

Ubuntu and Debian Package Management Essentials Step 4 – Removing Packages and Deleting Files Uninstall a Package and All Associated Configuration Files

Ubuntu and Debian Package Management Essentials Step 4 – Removing Packages and Deleting Files Uninstall a Package

Ubuntu and Debian Package Management Essentials Step 3 – Downloading and Installing Packages Install a .deb Package

Ubuntu and Debian Package Management Essentials Step 3 – Downloading and Installing Packages Download Package from the Repos

Ubuntu and Debian Package Management Essentials Step 3 – Downloading and Installing Packages Fix Broken Dependencies and Packages

Ubuntu and Debian Package Management Essentials Step 3 – Downloading and Installing Packages Perform a Dry Run of Package Actions

Ubuntu and Debian Package Management Essentials Step 3 – Downloading and Installing Packages Reconfigure Packages

Ubuntu and Debian Package Management Essentials Step 3 – Downloading and Installing Packages Install a Specific Package Version from the Repos

Ubuntu and Debian Package Management Essentials Step 3 – Downloading and Installing Packages Install a Package from the Repos

Ubuntu and Debian Package Management Essentials Step 3 – Downloading and Installing Packages Search for Packages

Ubuntu and Debian Package Management Essentials Step 2 – Updating the Package Cache and the System Updating Packages

Ubuntu and Debian Package Management Essentials Step 2 – Updating the Package Cache and the System Updating the Local Package Cache

How To Automate Deployments to DigitalOcean Kubernetes with CircleCI Step 8 — Updating the Deployment on the Kubernetes Cluster

How To Automate Deployments to DigitalOcean Kubernetes with CircleCI Step 7 — Configuring CircleCI

How To Automate Deployments to DigitalOcean Kubernetes with CircleCI Step 6 — Creating the Kubernetes Deployment and Service