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

GitHub

https://github.com/flavien-hugs/djangoWithReact