Simple application TodoList django with ReactJS

Overview

Django & React

Django

We basically follow the Django REST framework quickstart guide here.

Create backend folder with a virtual Python environment:

mkdir backend
cd backend
pipenv install; pipenv shell

Install Django and Django REST framework:

pipenv install django djangorestframework

Create Django project structure:

django-admin startproject backend .
cd backend
django-admin startapp todo
cd ..

Create Django super user:

./manage.py migrate
./manage.py createsuperuser --email [email protected] --username admin
pw:supersecret

Start Django:

./manage.py runserver

Check if basic auth works:

curl -H 'Accept: application/json; indent=4' -u admin:admin123 http://127.0.0.1:8000/users/

Response should be:

[
    {
        "url": "http://127.0.0.1:8000/users/1/",
        "username": "admin",
        "email": "[email protected]",
        "groups": []
    }
]

Frontend

Prerequisits

Install latest Node LTS. We recommend to use nvm:

nvm install 8.9.4
nvm use 8.9.4

Install create-react-app globally:

npm install -g create-react-app

Create new react app:

ngx create-react-app frontend
cd frontend

Install dependencies:

npm install

Start development server:

npm start

Your browser should automatically open with 'localhost:3000' and show the create-react-app standard HTML view.

Django CORS

Install corsheaders:

pipenv install django-cors-headers

settings.py:

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

settings.py:

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]````

settings.py:

```python
CORS_ORIGIN_ALLOW_ALL = True

Make React app query the Django Backend

At first we create a state in the main React app to hold the information we fetch from the backend.

Open 'frontend/src/App.js' and add a 'constructor' method to the 'App' class:

class App extends Component {

  constructor() {
    super();
    this.state = {
      user: {}
    };
  }

  ...
}```

Then we actually query the backend in the 'componentDidMount' method that is automatically called when the React component has been mounted;:

```JavaScript

class App extends Component {

  ...

  componentDidMount() {
    fetch(
      'http://127.0.0.1:8000/users/1',
      {
        headers: {
          'Accept': 'application/json'
        }
      }
    ).then((response) => response.json())
    .then((responseData) => {
      this.setState({ user: responseData });
      console.log('Fetch from backend successful!')
    })
    .catch((error) => {
      console.log('Error fetching and parsing data', error);
    });
  }
  render() {
    return (
       ...
       <p>Username: {this.state.user.username}</p>
       <p>E-Mail: {this.state.user.email}</p>
       ...
     );
   }

When the React app loads in your browser you will most likely see an error in your JavaScript console. This is caused by CORS preventing you from serving content from different origins. Install the CORS plugin for Chrome for development:

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

REST API communication

Options:

  • fetch (ES6)
  • Superagent
  • Axios

Static Code Analysis

eslint...

Automatic Code Formatting

Add dependencies:

yarn add husky lint-staged prettier

package.json:

  "dependencies": {
    // ...
  },
+ "lint-staged": {
+   "src/**/*.{js,jsx,json,css}": [
+     "prettier --single-quote --write",
+     "git add"
+   ]
+ },
  "scripts": {
+   "precommit": "lint-staged",

Source and full tutorial:

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#formatting-code-automatically

Prettier IDE support

You should install a prettier plugin to your favorite editor.

Prettier formatter for Visual Studio Code

Install Prettier formatter for Visual Studio Code:

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

vscode settings:

// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
    "editor.formatOnSave": true
}```


# Router / Redux

Add dependencies:

```bash:
yarn add redux react-redux react-router-dom react-router-redux@next redux-thunk history --save
Owner
Flavien HUGS
Teacher and Software Developer Python/Ruby/Dart.
Flavien HUGS
Dynamic, database-driven Django forms

Django Dataforms django-dataforms is a wrapper for the Django forms API that lets you dynamically define forms in a database, rather than hard-coding

35 Dec 16, 2022
Wrapping Raml around Django rest-api's

Ramlwrap is a toolkit for Django which allows a combination of rapid server prototyping as well as enforcement of API definition from the RAML api. R

Jmons 8 Dec 27, 2021
Django app for handling the server headers required for Cross-Origin Resource Sharing (CORS)

django-cors-headers A Django App that adds Cross-Origin Resource Sharing (CORS) headers to responses. This allows in-browser requests to your Django a

Adam Johnson 4.8k Jan 03, 2023
PostgreSQL with Docker + Portainer + pgAdmin + Django local

django-postgresql-docker Running PostgreSQL with Docker + Portainer + pgAdmin + Django local for development. This project was done with: Python 3.9.8

Regis Santos 4 Jun 12, 2022
A generic system for filtering Django QuerySets based on user selections

Django Filter Django-filter is a reusable Django application allowing users to declaratively add dynamic QuerySet filtering from URL parameters. Full

Carlton Gibson 3.9k Jan 03, 2023
An orgizational tool to keep track of tasks/projects and the time spent on them.

Django-Task-Manager Task Tracker using Python Django About The Project This project is an orgizational tool to keep track of tasks/projects and the ti

Nick Newton 1 Dec 21, 2021
Send logs to RabbitMQ from Python/Django.

python-logging-rabbitmq Logging handler to ships logs to RabbitMQ. Compatible with Django. Installation Install using pip. pip install python_logging_

Alberto Menendez Romero 38 Nov 17, 2022
A prettier way to see Django requests while developing

A prettier way to see Django requests while developing

Adam Hill 35 Dec 02, 2022
Comprehensive Markdown plugin built for Django

Django MarkdownX Django MarkdownX is a comprehensive Markdown plugin built for Django, the renowned high-level Python web framework, with flexibility,

neutronX 738 Dec 21, 2022
Basic implementation of Razorpay payment gateway šŸ’³ with Django

Razorpay Payment Integration in Django šŸ’„ In this project Razorpay payment gateway šŸ’³ is integrated with Django by breaking down the whole process int

ScaleReal 12 Dec 12, 2022
PEP-484 type hints bindings for the Django web framework

mypy-django Type stubs to use the mypy static type-checker with your Django projects This project includes the PEP-484 compatible "type stubs" for Dja

Machinalis 223 Jun 17, 2022
Website desenvolvido em Django para gerenciamento e upload de arquivos (.pdf).

Website para Gerenciamento de Arquivos Features Esta é uma aplicação full stack web construída para desenvolver habilidades com o framework Django. O

Alinne Grazielle 8 Sep 22, 2022
Example project demonstrating using Django’s test runner with Coverage.py

Example project demonstrating using Django’s test runner with Coverage.py Set up with: python -m venv --prompt . venv source venv/bin/activate python

Adam Johnson 5 Nov 29, 2021
this is a simple backend for instagram with python and django

simple_instagram_backend this is a simple backend for instagram with python and django it has simple realations and api in 4 diffrent apps: 1-users: a

2 Oct 20, 2021
GameStop clone with Django

GameStop clone with Django This is my side project with GameStop clone Author: HackerApe GitHub Profile: View Profile LinkedIn Profile: View Profile

Dmitriy Shin 2 Dec 26, 2021
A Blog Management System Built with django

Blog Management System Backend use: Django Features Enhanced Ui

Vishal Goswami 1 Dec 06, 2021
A simple REST API to manage postal addresses, written in Python/Django.

A simple REST API to manage postal addresses, written in Python/Django.

Attila Bagossy 2 Feb 14, 2022
Django API without Django REST framework.

Django API without DRF This is a API project made with Django, and without Django REST framework. This project was done with: Python 3.9.8 Django 3.2.

Regis Santos 3 Jan 19, 2022
Django-Docker - Django Installation Guide on Docker

Guía de instalación del Framework Django en Docker Introducción: Con esta guía p

Victor manuel torres 3 Dec 02, 2022
Log and View requests made on Django

Django Request Viewer Log and view requests made on your Django App Introduction Recently, @ichtrojan and @toniastro released horus, a request logger

Akere Mukhtar 26 May 29, 2022