How To

2. Exemplos (How to)

2.1 Exemplo Básico (Hello World)

Frontend (React)

Crie um projeto React:

npx create-react-app myapp
cd myapp

Substitua o conteúdo de App.js com o código abaixo para exibir um "Hello World":

javascript

function App() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

export default App; Inicie o servidor de desenvolvimento:

npm start
Backend (Django)

No backend, crie uma view para retornar "Hello World".

Crie uma nova aplicação dentro do Django:

python3 manage.py startapp helloworld
Edite o arquivo views.py em helloworld:

python

from django.http import HttpResponse

def hello_world(request):
    return HttpResponse("Hello, World!")

Adicione a URL no urls.py do projeto:

python

from django.urls import path
from helloworld.views import hello_world

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

Inicie o servidor Django:

python3 manage.py runserver

2.2 Exemplo de Persistência (Local e Servidor)

Frontend (React com Local Storage)

Crie uma entrada que salva dados no local storage:

No App.js:

javascript

import { useState } from 'react';

function App() {
  const [name, setName] = useState('');

  const saveName = () => {
    localStorage.setItem('name', name);
  };

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <button onClick={saveName}>Save Name</button>
    </div>
  );
}

export default App;

Backend (Django e PostgreSQL)

No Django, crie um modelo simples de persistência de dados com PostgreSQL.

Configure o PostgreSQL em settings.py:

python

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'mydatabase',
        'USER': 'myuser',
        'PASSWORD': 'mypassword',
        'HOST': 'localhost',
        'PORT': '5432',
    }
}

Crie um modelo para eventos:

python

from django.db import models

class Event(models.Model):
    title = models.CharField(max_length=100)
    date = models.DateField()
    location = models.CharField(max_length=100)

Migre o banco de dados:

python3 manage.py makemigrations
python3 manage.py migrate

2.3 Exemplo de Comunicação com Servidor

Frontend (React com Axios)

Para enviar uma solicitação GET ao backend Django:

Instale o Axios:

npm install axios

Em App.js:

javascript

import { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [events, setEvents] = useState([]);

  useEffect(() => {
    axios.get('http://127.0.0.1:8000/api/events/')
      .then(response => setEvents(response.data))
      .catch(error => console.error("There was an error!", error));
  }, []);

  return (
    <div>
      <h1>Events</h1>
      <ul>
        {events.map(event => (
          <li key={event.id}>{event.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Backend (Django com API para Eventos)

Instale Django REST framework:

pip install djangorestframework
Configure o INSTALLED_APPS no settings.py:

python
Copy code
INSTALLED_APPS = [
    ...,
    'rest_framework',
]

No arquivo views.py de events, crie uma API para listar eventos:

python

from rest_framework.decorators import api_view
from rest_framework.response import Response
from .models import Event
from .serializers import EventSerializer

@api_view(['GET'])
def event_list(request):
    events = Event.objects.all()
    serializer = EventSerializer(events, many=True)
    return Response(serializer.data)