Scribd
Cargar
12 vistas

Instrucciones Python Django React Grpcalcs

Python Django React instruction

Cargado por

Edwin Cardenas
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
12 vistas

Instrucciones Python Django React Grpcalcs

Python Django React instruction

Cargado por

Edwin Cardenas
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

Instrucciones para crear una aplicación

con Python, Django y React.js en Visual


Studio Code
Este documento detalla los pasos que debes seguir para crear una aplicación utilizando
Python, Django y React.js en Visual Studio Code. Las instrucciones comienzan desde la
instalación de herramientas y suponen que la carpeta del proyecto se llamará "grpCalcs",
con una de las aplicaciones de Django llamada "une".

1. Instalación de herramientas necesarias

Antes de empezar, asegúrate de tener instaladas las siguientes herramientas:


1. Python: Descarga e instala Python desde https://www.python.org/downloads/.
2. Node.js: Descarga e instala Node.js desde https://nodejs.org/en/.
3. Visual Studio Code: Descarga e instala VS Code desde https://code.visualstudio.com/.

2. Extensiones útiles para Visual Studio Code

A continuación, algunas extensiones que te serán de mucha ayuda para trabajar con Python,
Django y React.js:
1. Python (Microsoft): Proporciona soporte completo para Python y Django.
2. Django (Baptiste Darthenay): Autocompletado y soporte específico para Django.
3. ESLint: Te ayudará a identificar errores y problemas en el código JavaScript, muy útil para
React.
4. Prettier - Code Formatter: Para formateo automático del código tanto en Python como en
JavaScript.
5. Reactjs code snippets: Facilita la escritura de componentes y código React con atajos.
6. GitLens: Si trabajas con Git, esta extensión te ayudará a seguir cambios y colaborar mejor.
7. Docker (opcional): Si planeas usar Docker para contenedores.

3. Configuración inicial del entorno

Asegúrate de estar en el directorio donde deseas crear el proyecto. Abre una terminal en
Visual Studio Code o usa tu terminal de preferencia. Sigue los pasos para configurar tu
entorno:

1. Crea una carpeta para tu proyecto y navega a ella:


```bash
mkdir grpCalcs
cd grpCalcs
```

2. Crea un entorno virtual de Python:


```bash
python -m venv env
```

3. Activa el entorno virtual:


- En Windows:
```bash
.\env\Scripts\activate
```
- En macOS/Linux:
```bash
source env/bin/activate
```

4. Instala Django y Django REST Framework en el entorno virtual:


```bash
pip install django djangorestframework
```

5. Crea un proyecto Django dentro de la carpeta "grpCalcs":


```bash
django-admin startproject backend .
```

6. Crea una aplicación dentro del proyecto Django llamada "une":


```bash
python manage.py startapp une
```

7. Verifica que la estructura de archivos sea similar a la siguiente:


```plaintext
/grpCalcs/
├── /backend/
│ ├── manage.py
│ ├── /backend/
│ ├── /une/
└── /env/
```

8. Añade 'rest_framework' y 'corsheaders' al archivo `settings.py` dentro de


`INSTALLED_APPS`:
```python
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'rest_framework',
'corsheaders',
'une',
# Otras apps
]
```

9. Instala `django-cors-headers`:
```bash
pip install django-cors-headers
```

10. Configura CORS en `settings.py` para permitir peticiones desde React:


```python
CORS_ALLOWED_ORIGINS = [
'http://localhost:3000',
]
```

4. Creación de la API con Django

1. Dentro de tu aplicación `une`, crea un archivo `serializers.py` para serializar tus modelos:
```python
from rest_framework import serializers
from .models import Item

class ItemSerializer(serializers.ModelSerializer):
class Meta:
model = Item
fields = '__all__'
```

2. En `views.py`, crea una vista para tu API:


```python
from rest_framework import viewsets
from .models import Item
from .serializers import ItemSerializer

class ItemViewSet(viewsets.ModelViewSet):
queryset = Item.objects.all()
serializer_class = ItemSerializer
```

3. Configura las rutas en `urls.py` para la API:


```python
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import ItemViewSet

router = DefaultRouter()
router.register(r'items', ItemViewSet)

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

5. Creación de la aplicación React

1. Asegúrate de estar en el directorio raíz `grpCalcs` y ejecuta el siguiente comando para


crear una aplicación React dentro de una carpeta llamada `frontend`:
```bash
npx create-react-app frontend
```

2. Navega a la carpeta `frontend`:


```bash
cd frontend
```

3. Instala Axios para hacer peticiones HTTP desde React:


```bash
npm install axios
```

4. En el archivo `src/api.js`, configura una función para obtener datos de la API de Django:
```javascript
import axios from 'axios';

const API_URL = 'http://localhost:8000/api/';

export const fetchItems = async () => {


try {
const response = await axios.get(`${API_URL}items/`);
return response.data;
} catch (error) {
console.error('Error fetching items', error);
throw error;
}
};
```

5. En `App.js`, utiliza la función `fetchItems` para consumir la API:


```javascript
import React, { useState, useEffect } from 'react';
import { fetchItems } from './api';

function App() {
const [items, setItems] = useState([]);

useEffect(() => {
const getItems = async () => {
try {
const data = await fetchItems();
setItems(data);
} catch (error) {
console.error('Error fetching data', error);
}
};
getItems();
}, []);
return (
<div className="App">
<h1>Items List</h1>
<ul>
{items.map(item => (
<li key={item.id}>{item.name} - {item.description}</li>
))}
</ul>
</div>
);
}

export default App;


```

6. Inicia el servidor de React:


```bash
npm start
```

7. React debería estar corriendo en `http://localhost:3000` y la API de Django en


`http://localhost:8000/api/items/`.

También podría gustarte