{"id":22627915,"url":"https://github.com/flavien-hugs/djangowithreact","last_synced_at":"2025-03-29T03:45:07.487Z","repository":{"id":100117421,"uuid":"411142505","full_name":"flavien-hugs/djangoWithReact","owner":"flavien-hugs","description":"Simple application TodoList django with ReactJS","archived":false,"fork":false,"pushed_at":"2023-11-12T05:05:52.000Z","size":36257,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-03T13:44:15.797Z","etag":null,"topics":["django-react","django-rest-framework"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flavien-hugs.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-28T04:58:33.000Z","updated_at":"2023-09-01T05:08:57.000Z","dependencies_parsed_at":"2025-02-03T13:42:01.342Z","dependency_job_id":"991bcdf7-1262-4a0d-a0a4-e24196d0c1b2","html_url":"https://github.com/flavien-hugs/djangoWithReact","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flavien-hugs%2FdjangoWithReact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flavien-hugs%2FdjangoWithReact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flavien-hugs%2FdjangoWithReact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flavien-hugs%2FdjangoWithReact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flavien-hugs","download_url":"https://codeload.github.com/flavien-hugs/djangoWithReact/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246135735,"owners_count":20729056,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["django-react","django-rest-framework"],"created_at":"2024-12-09T01:16:56.015Z","updated_at":"2025-03-29T03:45:07.479Z","avatar_url":"https://github.com/flavien-hugs.png","language":"Python","readme":"# Django \u0026 React\n\n## Django\n\nWe basically follow the [Django REST framework quickstart guide](http://www.django-rest-framework.org/tutorial/quickstart/) here.\n\nCreate backend folder with a virtual Python environment:\n\n```bash:\nmkdir backend\ncd backend\npipenv install; pipenv shell\n```\n\nInstall Django and Django REST framework:\n\n```bash:\npipenv install django djangorestframework\n```\n\nCreate Django project structure:\n\n```bash:\ndjango-admin startproject backend .\ncd backend\ndjango-admin startapp todo\ncd ..\n```\n\nCreate Django super user:\n\n```bash:\n./manage.py migrate\n./manage.py createsuperuser --email admin@example.com --username admin\npw:supersecret\n```\n\nStart Django:\n\n```bash:\n./manage.py runserver\n````\n\nCheck if basic auth works:\n\n```bash\ncurl -H 'Accept: application/json; indent=4' -u admin:admin123 http://127.0.0.1:8000/users/\n```\n\nResponse should be:\n\n```JavaScript\n[\n    {\n        \"url\": \"http://127.0.0.1:8000/users/1/\",\n        \"username\": \"admin\",\n        \"email\": \"admin@example.com\",\n        \"groups\": []\n    }\n]\n```\n\n# Frontend\n\n## Prerequisits\n\nInstall latest Node LTS. We recommend to use nvm:\n\n```bash\nnvm install 8.9.4\nnvm use 8.9.4\n```\n\nInstall create-react-app globally:\n\n```bash\nnpm install -g create-react-app\n````\n\nCreate new react app:\n\n```bash\nngx create-react-app frontend\ncd frontend\n````\n\nInstall dependencies:\n\n```bash\nnpm install\n```\n\nStart development server:\n\n```bash\nnpm start\n````\n\nYour browser should automatically open with 'localhost:3000' and show the create-react-app standard HTML view.\n\n## Django CORS\n\nInstall corsheaders:\n\n```bash\npipenv install django-cors-headers\n```\n\nsettings.py:\n\n```python\nINSTALLED_APPS = (\n    ...\n    'corsheaders',\n    ...\n)\n````\n\nsettings.py:\n\n```python\nMIDDLEWARE = [\n    ...\n    'corsheaders.middleware.CorsMiddleware',\n    'django.middleware.common.CommonMiddleware',\n    ...\n]````\n\nsettings.py:\n\n```python\nCORS_ORIGIN_ALLOW_ALL = True\n````\n\n# Make React app query the Django Backend\n\nAt first we create a state in the main React app to hold the information we fetch from the backend.\n\nOpen 'frontend/src/App.js' and add a 'constructor' method to the 'App' class:\n\n```JavaScript\nclass App extends Component {\n\n  constructor() {\n    super();\n    this.state = {\n      user: {}\n    };\n  }\n\n  ...\n}```\n\nThen we actually query the backend in the 'componentDidMount' method that is automatically called when the React component has been mounted;:\n\n```JavaScript\n\nclass App extends Component {\n\n  ...\n\n  componentDidMount() {\n    fetch(\n      'http://127.0.0.1:8000/users/1',\n      {\n        headers: {\n          'Accept': 'application/json'\n        }\n      }\n    ).then((response) =\u003e response.json())\n    .then((responseData) =\u003e {\n      this.setState({ user: responseData });\n      console.log('Fetch from backend successful!')\n    })\n    .catch((error) =\u003e {\n      console.log('Error fetching and parsing data', error);\n    });\n  }\n  render() {\n    return (\n       ...\n       \u003cp\u003eUsername: {this.state.user.username}\u003c/p\u003e\n       \u003cp\u003eE-Mail: {this.state.user.email}\u003c/p\u003e\n       ...\n     );\n   }\n```\n\nWhen 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:\n\nhttps://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi\n\n\n# REST API communication\n\nOptions:\n\n- fetch (ES6)\n- Superagent\n- Axios\n\n# Static Code Analysis\n\neslint...\n\n# Automatic Code Formatting\n\nAdd dependencies:\n\n```bash\nyarn add husky lint-staged prettier\n```\n\npackage.json:\n\n```JavaScript\n  \"dependencies\": {\n    // ...\n  },\n+ \"lint-staged\": {\n+   \"src/**/*.{js,jsx,json,css}\": [\n+     \"prettier --single-quote --write\",\n+     \"git add\"\n+   ]\n+ },\n  \"scripts\": {\n+   \"precommit\": \"lint-staged\",\n```\n\nSource and full tutorial:\n\nhttps://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#formatting-code-automatically\n\n## Prettier IDE support\n\nYou should install a prettier plugin to your favorite editor.\n\n### Prettier formatter for Visual Studio Code\n\nInstall Prettier formatter for Visual Studio Code:\n\nhttps://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode\n\nvscode settings:\n\n```JavaScript\n// Set the default\n\"editor.formatOnSave\": false,\n// Enable per-language\n\"[javascript]\": {\n    \"editor.formatOnSave\": true\n}```\n\n\n# Router / Redux\n\nAdd dependencies:\n\n```bash:\nyarn add redux react-redux react-router-dom react-router-redux@next redux-thunk history --save\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflavien-hugs%2Fdjangowithreact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflavien-hugs%2Fdjangowithreact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflavien-hugs%2Fdjangowithreact/lists"}