{"id":20455294,"url":"https://github.com/alexmhack/reactify-django","last_synced_at":"2025-08-29T17:40:20.710Z","repository":{"id":41938988,"uuid":"199245489","full_name":"Alexmhack/Reactify-Django","owner":"Alexmhack","description":"Integrating React library for the frontend with the Django backend","archived":false,"fork":false,"pushed_at":"2023-01-05T21:45:29.000Z","size":1673,"stargazers_count":2,"open_issues_count":22,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-22T06:12:28.225Z","etag":null,"topics":["django-backend","django2","integration","nodejs","react","react-files","reactify-django","tutorial"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Alexmhack.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}},"created_at":"2019-07-28T05:16:23.000Z","updated_at":"2023-08-27T01:35:39.000Z","dependencies_parsed_at":"2023-02-04T17:31:37.639Z","dependency_job_id":null,"html_url":"https://github.com/Alexmhack/Reactify-Django","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Alexmhack/Reactify-Django","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexmhack%2FReactify-Django","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexmhack%2FReactify-Django/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexmhack%2FReactify-Django/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexmhack%2FReactify-Django/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alexmhack","download_url":"https://codeload.github.com/Alexmhack/Reactify-Django/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexmhack%2FReactify-Django/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272733351,"owners_count":24984261,"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","status":"online","status_checked_at":"2025-08-29T02:00:10.610Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-backend","django2","integration","nodejs","react","react-files","reactify-django","tutorial"],"created_at":"2024-11-15T11:18:27.200Z","updated_at":"2025-08-29T17:40:20.656Z","avatar_url":"https://github.com/Alexmhack.png","language":"JavaScript","readme":"# Reactify-Django\nIntegrating React library for the frontend with the Django backend (by following tutorial)\n\nThis repository is a customized version of [Reactify-Django](https://github.com/codingforentrepreneurs/Reactify-Django), you can follow the tutorial [here](https://www.youtube.com/watch?v=AHhQRHE8IR8).\n\n## Installation\nSince we are integrating Django and React, we need these both installed in our local machine, for django\n\n```\npip install django\n```\n\nAnd you can install NodeJS from [here](https://nodejs.org/en/). NodeJS gives us the npm(Node Package \nManager) and npx(npm execute). We use these for installing and creating node packages.\n\nTo check if these installations are working run `django-admin` and list of all commands will appear and also\nrun `npm` and then run `npx`, you should list of commands that you can run, this indicates that you have successfully installed both django and nodejs.\n\n## Start Projects\nTo create django project run,\n\n`django-admin startproject reactify .`\n\nThe trailing **.** at the end of the command tells django to create all the files and folders of the project \ninside the current directory.\n\nTo create react app run,\n\n`npx create-react-app reactify-ui`\n\nThis will create a seperate folder named reactify-ui with all the react project.\n\n## package.json \u0026 settings.py\nFor making things easier for us in the long run and for bigger projects we have to make some changes in our\n**package.json** file which is located in the **reactify-ui** folder, open this file in your text editor and\nscroll to `\"scripts\"`, you will find the `\"build\"` key there.\n\n`npm run build` or simply `npm build` is the command for creating a production ready build folder for the \nreact static files (CSS, JS, Media files).\n\nIf you run the above build command inside **reactify-ui** folder you will find a new folder **build** is \ncreated for you by react which contains another folder **static** containing **CSS, JS, Media** folders.\n\nThese files are same like django static files which we refer to in django templates with `static` template\ntag like this,\n\n```\n{% load static %}\n...\n\u003clink href=\"{% static 'css/app.css' %}\"\u003e\n...\n```\n\nThese files are served from a folder in local django environment from the `STATICFILES_DIRS` setting defined \nin `settings.py` file.\n\nSo the real question is how do you tell django to serve the react build folder files in the templates.\n\nThis is where we define some custom react script commands like the ones in this repo in **reactify-ui/package.json** file.\n\nThe `npm run collect` command defined in the **package.json** file does four things for us in one command\nsaving a lot of time for using, those things are,\n\n1. Run build command for react files =\u003e `npm run build`\n2. Rename the build folder files =\u003e `npm run build-rename`\n\tWhat happens by renaming is that we can easily refer to that file only once rather than changing the file name again after running build command.\n3. Copying the build folder files into django's `STATICFILES_DIRS` folder.\n\t`npm run copy-buildfiles` copies the files into respective folders inside `staticfiles` folder (we use staticfiles folder)\n4. Runs collecstatic command of django which collects these files in `STATIC_ROOT` folder for production \t\n\tserving.\n\nOrganize the files and folders in your machine by referring to this repo and run `collect` command,\n\n`npm run collect`\n\nIf you get errors that is probably because you don't have two node packages missing namely, `renamer` and \n`copyfiles`, if you figured that out and have installed them, that's cool otherwise install them using\n`npm install --save renamer copyfiles`\n\n## Run server\nDone running `collect` command, now run the django server, create a home view with root url if not created\nyet and head over to the server url and you will find the react default project starter page.\n\n## Routing\nThe package that we are gonna be using for handling routes in react is [react-router-dom](https://github.com/ReactTraining/react-router#readme).\n\nThere are many other packages which can handle the same thing for us.\n\nSo using react-router-dom is very easy. We will be using it to handle post detail page, for \nexample if user clicks on the link of the post from the posts list page we can simply route\nthe browser to the post detail page without reloading the page, all of this just using react\nand not even touching django except of one place which is to define a url so that django can\nrender the template for that url on its server.\n\nAdd a regular expresssion url path **reactify/urls.py**,\n\n```\n...\nfrom django.urls import path, include, re_path\n\nurlpatterns = [\n\t...\n    re_path(r'^posts/', TemplateView.as_view(template_name='react.html')),\n]\n\n```\n\n`re_path` is a replacement for `url` in django which allows us to use regular expressions in\nurls, the above url will use the template, *react.html* for every url that starts with **posts**\nfor example for our local server this url would look like, [http://127.0.0.1:8000/posts/](http://127.0.0.1:8000/posts/) and can also be literally anything after **posts** [http://127.0.0.1:8000/posts/asdfasdfadf](http://127.0.0.1:8000/posts/asdfasdfadf).\n\nWe are rendering the same template, **react.html** from **templates** folder and leaving rest\non the react to handle the posts and post detail page or basically view for us.\n\nAfter adding this url in django **urls.py** file we will use React to handle the rest.\n\nInstall **react-router-dom** by running,\n\nrun this where your package.json file is located.\n```\nnpm install --save react-router-dom\n```\n\nNow import the necessary modules in **reactify-ui/src/App.js** file,\n\n```\nimport { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'\n```\n\nAnd in the place where you use the `Posts` component tag, replace that line with `BrowserRouter`\n\n```\n...\n\t\u003cBrowserRouter\u003e\n\t\t\u003cSwitch\u003e\n\t\t\t\u003cRoute exact path='/posts/' component={Posts} /\u003e\n\t\t\t\u003cRoute exact path='/posts/:slug/' component={PostDetail} /\u003e\n\t\t\t\u003cRoute component={Posts} /\u003e\n\t\t\u003c/Switch\u003e\n\t\u003c/BrowserRouter\u003e\n...\n```\n\nBefore running `npm run collect` you can remove the `PostDetail` and just use `Posts` there \nsince we have not yet created that component, so change that to,\n\n```\n...\n\t\u003cBrowserRouter\u003e\n\t\t\u003cSwitch\u003e\n\t\t\t\u003cRoute exact path='/posts/' component={Posts} /\u003e\n\t\t\t\u003cRoute exact path='/posts/:slug/' component={Posts} /\u003e\n\t\t\t\u003cRoute component={Posts} /\u003e\n\t\t\u003c/Switch\u003e\n\t\u003c/BrowserRouter\u003e\n...\n```\n\nNow run `npm run collect` and go the root url of django and everything works perfectly fine, \nyou get your posts list page.\n\nGo to [127.0.0.1:8000/posts/](http://127.0.0.1:8000/posts/) and the same component `Posts` is\nrendered since we define the **exact path for /posts/** with the component `Posts`.\n\nYou can also go to [127.0.0.1:8000/posts/asdfasfd](http://127.0.0.1:8000/posts/asdfasfd) and \nthe same component will be rendered.\n\n### PostDetail Component\nNow comes the new component which will render out the detail page for post.\n\nCreate a new file named **PostDetail.js** in the **posts** folder and copy the code from this\nrepo and paste it in your file.\ncode in it.\n\nSo what are we doing? We are using the props to check if the match for the exact path\n**posts/:slug/** exists and if it does we are getting that parameter slug from the url and\nsetting that slug in the state and at last rendering it in `\u003ch1\u003e` tag in the html page.\n\nAnd for the **slug** part, we have defined a Route with the **path: '/posts/:slug/'**. Here\n**:slug** is the url parameter that we use like this, `const {slug} = this.props.match.params`.\n\nNow in the **src/App.js** file change the Route component to,\n\n```\n\u003cRoute exact path='/posts/:slug/' component={PostDetail} /\u003e\n```\n\nofcourse don't forget to import the component,\n\n```\nimport PostDetail from './posts/PostDetail'\n```\n\nNow link your post detail page to the posts list by using `Link` from **react-router-dom**.\n\n```\nimport { Link } from 'react-router-dom'\n...\n...\n\t\t    \u003ch1\u003e\n              \u003cLink maintainScrollPosition={false} to={{\n                pathname: `/posts/${post.slug}`,\n                state: {fromDashboard: false}\n              }}\u003e\n                {post.title}\n              \u003c/Link\u003e\n            \u003c/h1\u003e\n              ...\n```\n\nRefer to [docs](https://reacttraining.com/react-router/) to know more about the Link.\n\nNow run `npm run collect` and click on the post **h1** link and you will be shown the post\ndetail page with the slug without reloading the browser. Now that's cool!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexmhack%2Freactify-django","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexmhack%2Freactify-django","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexmhack%2Freactify-django/lists"}