https://github.com/flavien-hugs/djangowithreact
Simple application TodoList django with ReactJS
https://github.com/flavien-hugs/djangowithreact
django-react django-rest-framework
Last synced: 3 months ago
JSON representation
Simple application TodoList django with ReactJS
- Host: GitHub
- URL: https://github.com/flavien-hugs/djangowithreact
- Owner: flavien-hugs
- Created: 2021-09-28T04:58:33.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-12T05:05:52.000Z (over 1 year ago)
- Last Synced: 2025-02-03T13:44:15.797Z (5 months ago)
- Topics: django-react, django-rest-framework
- Language: Python
- Homepage:
- Size: 34.6 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Django & React
## Django
We basically follow the [Django REST framework quickstart guide](http://www.django-rest-framework.org/tutorial/quickstart/) here.
Create backend folder with a virtual Python environment:
```bash:
mkdir backend
cd backend
pipenv install; pipenv shell
```
Install Django and Django REST framework:
```bash:
pipenv install django djangorestframework
```
Create Django project structure:
```bash:
django-admin startproject backend .
cd backend
django-admin startapp todo
cd ..
```
Create Django super user:
```bash:
./manage.py migrate
./manage.py createsuperuser --email [email protected] --username admin
pw:supersecret
```
Start Django:
```bash:
./manage.py runserver
````
Check if basic auth works:
```bash
curl -H 'Accept: application/json; indent=4' -u admin:admin123 http://127.0.0.1:8000/users/
```
Response should be:
```JavaScript
[
{
"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:
```bash
nvm install 8.9.4
nvm use 8.9.4
```
Install create-react-app globally:
```bash
npm install -g create-react-app
````
Create new react app:
```bash
ngx create-react-app frontend
cd frontend
````
Install dependencies:
```bash
npm install
```
Start development server:
```bash
npm start
````
Your browser should automatically open with 'localhost:3000' and show the create-react-app standard HTML view.
## Django CORS
Install corsheaders:
```bash
pipenv install django-cors-headers
```
settings.py:
```python
INSTALLED_APPS = (
...
'corsheaders',
...
)
````
settings.py:
```python
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:
```JavaScript
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 (
...
Username: {this.state.user.username}
E-Mail: {this.state.user.email}
...
);
}
```
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:
```bash
yarn add husky lint-staged prettier
```
package.json:
```JavaScript
"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:
```JavaScript
// 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