Django & React


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:

./ migrate
./ createsuperuser --email [email protected] --username admin

Start Django:

./ runserver

Check if basic auth works:

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

Response should be:

        "url": "",
        "username": "admin",
        "email": "[email protected]",
        "groups": []



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




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() {
    this.state = {
      user: {}


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


class App extends Component {


  componentDidMount() {
        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: {}</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:

REST API communication


  • fetch (ES6)
  • Superagent
  • Axios

Static Code Analysis


Automatic Code Formatting

Add dependencies:

yarn add husky lint-staged prettier


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

Source and full tutorial:

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:

vscode settings:

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

# Router / Redux

Add dependencies:

yarn add redux react-redux react-router-dom react-router-redux@next redux-thunk history --save