Scribd
Upload
2 views

New project (django_react)

This document provides a step-by-step guide to create a full-stack project using Django for the backend and React for the frontend. It includes instructions for setting up the Django project, configuring settings, creating URLs, running the server, and setting up the React app with Axios for API calls. Additionally, it covers how to set up a proxy for development to connect the React app to the Django backend.

Uploaded by

sebastiankaria36
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

New project (django_react)

This document provides a step-by-step guide to create a full-stack project using Django for the backend and React for the frontend. It includes instructions for setting up the Django project, configuring settings, creating URLs, running the server, and setting up the React app with Axios for API calls. Additionally, it covers how to set up a proxy for development to connect the React app to the Django backend.

Uploaded by

sebastiankaria36
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

Here’s a clear step-by-step guide to create a new **Django + React** full-stack

project:

---

## 🔧 **Backend Setup (Django)**

### ✅ 1. Create a Django Project

```bash
# Create a project folder
mkdir myproject && cd myproject

# Optional: Create and activate virtual environment


python -m venv env
source env/bin/activate # On Windows: env\Scripts\activate

# Install Django and Django REST framework


pip install django djangorestframework

# Start Django project


django-admin startproject backend
cd backend

# Start a Django app (e.g., `api`)


python manage.py startapp api
```

### ✅ 2. Configure Django Settings

* In `backend/settings.py`:

* Add your app and rest\_framework to `INSTALLED_APPS`:

```python
INSTALLED_APPS = [
...
'rest_framework',
'corsheaders',
'api',
]
```

* Add CORS middleware:

```python
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...
]
CORS_ALLOW_ALL_ORIGINS = True # Or configure specifically for React
```

* Create models, serializers, and views in your `api` app.

### ✅ 3. Set Up URLs

* In `api/urls.py`:
```python
from django.urls import path
from . import views

urlpatterns = [
path('hello/', views.hello_world),
]
```

* In `backend/urls.py`:

```python
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('api.urls')),
]
```

### ✅ 4. Run the Server

```bash
python manage.py migrate
python manage.py runserver
```

---

## ⚛️ **Frontend Setup (React)**

### ✅ 5. Create React App (outside backend folder)

In the root `myproject` directory:

```bash
npx create-react-app frontend
cd frontend
```

### ✅ 6. Install Axios & Routing

```bash
npm install axios react-router-dom
```

### ✅ 7. Example Axios Call

In `src/App.js`:

```js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
const [message, setMessage] = useState('');

useEffect(() => {
axios.get('http://127.0.0.1:8000/api/hello/')
.then(res => setMessage(res.data.message))
.catch(err => console.error(err));
}, []);

return (
<div>
<h1>Django + React</h1>
<p>{message}</p>
</div>
);
}

export default App;


```

---

## 🔁 **Bonus: Proxy React to Django (for dev)**

### ✅ 8. Setup Proxy in React

In `frontend/package.json`, add:

```json
"proxy": "http://127.0.0.1:8000",
```

---

## ✅ Final Project Structure

```
myproject/
│
├── backend/
│ ├── backend/
│ └── api/
│
└── frontend/
```

You might also like