===============
Django Reactify
===============
Django Reactify is an app that allows developers to add and use React components in their Django app without using the legacy `create-react-app <https://github.com/facebookincubator/create-react-app>`_.
Quick start
-----------
1. Install the package via the following command:
pip install django-reactify
2. Add "reactify" to your INSTALLED_APPS setting like this::
INSTALLED_APPS = [
...
'reactify',
]
3. Run the following command:
python manage.py reactify <app_name>
Ensure that the templates directory exists in the specified app name.
- Replace the app name with the existing Django app you want to reactify.
- This command does the following:
* Creates barbel and webpack configuration files in the app's root directory.
* Creates package.json file with the scripts to run React development server.
* Creates a react folder directory with the necessary files and subdirectories where you can add your react component files and redux actions and reducers.
* Creates a react folder directory with the necessary files and subdirectories where you can add your react component files and redux actions and reducers.
* Installs the basic npm development packages.
* starts the react development server that listens on the changes made to the react components and compile a minimal js file that is rendered to the view.
4. cd into the django app (app_name) directory and run the following command:
npm run dev
5. Add the new view function to the views file to render the compiled version of the react app.
def index(request):
template_name = '<app_name>/index.html'
return render(request, template_name)
6. Add more React components to the react app's component folder.
Managing React Routes
---------------------
If you don't configure Django urls to accept the Routes declared in the react, you will encouter 404 error.
To fix this, lets say you have react routes as follows:
<Switch>
<Route exact path="/" component={Main} />
<Route exact path="/login" component={LoginPage} />
<Route exact path="/services" component={ServicesPage} />
<Route exact path="/about" component={AboutPage} />
In the app urls file use `re_path`,
from django.urls import re_path
from .views import index
urlpatterns = [
re_path(r'', index, name="home"),
]
Raw data
{
"_id": null,
"home_page": "https://github.com/Bonifase/django-reactify",
"name": "django-reactify",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.6",
"maintainer_email": null,
"keywords": "django reactjs",
"author": "Bonifase Orwa",
"author_email": "orwabonifase@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/ee/95/9384e61c382120d5846c8c1d027533da4664b626c9e3cfc1d41c31eba810/django_reactify-1.4.0.tar.gz",
"platform": null,
"description": "===============\nDjango Reactify\n===============\n\nDjango Reactify is an app that allows developers to add and use React components in their Django app without using the legacy `create-react-app <https://github.com/facebookincubator/create-react-app>`_.\n\nQuick start\n-----------\n\n1. Install the package via the following command:\n\n pip install django-reactify\n\n2. Add \"reactify\" to your INSTALLED_APPS setting like this::\n\n INSTALLED_APPS = [\n ...\n 'reactify',\n ]\n\n3. Run the following command:\n\n python manage.py reactify <app_name>\n\n Ensure that the templates directory exists in the specified app name.\n\n - Replace the app name with the existing Django app you want to reactify.\n\n - This command does the following:\n\n * Creates barbel and webpack configuration files in the app's root directory.\n\n * Creates package.json file with the scripts to run React development server.\n\n * Creates a react folder directory with the necessary files and subdirectories where you can add your react component files and redux actions and reducers.\n\n * Creates a react folder directory with the necessary files and subdirectories where you can add your react component files and redux actions and reducers.\n\n * Installs the basic npm development packages.\n\n * starts the react development server that listens on the changes made to the react components and compile a minimal js file that is rendered to the view.\n\n4. cd into the django app (app_name) directory and run the following command:\n\n npm run dev\n\n\n5. Add the new view function to the views file to render the compiled version of the react app.\n\n def index(request):\n template_name = '<app_name>/index.html'\n\n return render(request, template_name)\n\n6. Add more React components to the react app's component folder.\n\nManaging React Routes\n---------------------\nIf you don't configure Django urls to accept the Routes declared in the react, you will encouter 404 error.\n\nTo fix this, lets say you have react routes as follows:\n\n <Switch>\n <Route exact path=\"/\" component={Main} />\n\n <Route exact path=\"/login\" component={LoginPage} />\n\n <Route exact path=\"/services\" component={ServicesPage} />\n\n <Route exact path=\"/about\" component={AboutPage} />\n\nIn the app urls file use `re_path`,\n\n from django.urls import re_path\n\n from .views import index\n\n urlpatterns = [\n re_path(r'', index, name=\"home\"),\n ]\n",
"bugtrack_url": null,
"license": null,
"summary": "A package to reactify Django app.",
"version": "1.4.0",
"project_urls": {
"Homepage": "https://github.com/Bonifase/django-reactify",
"Source": "https://github.com/Bonifase/django-reactify"
},
"split_keywords": [
"django",
"reactjs"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "7360092f59bacd5b2800006317066238e55da0405b17cea05f60c274afd64d6d",
"md5": "bf10d1237ee4a6a8393e510217db16f8",
"sha256": "126de5e73849292b5390236c3af075a1071024d435fa80586ee11f037ad233e6"
},
"downloads": -1,
"filename": "django_reactify-1.4.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "bf10d1237ee4a6a8393e510217db16f8",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.6",
"size": 57926,
"upload_time": "2024-12-20T20:00:56",
"upload_time_iso_8601": "2024-12-20T20:00:56.420980Z",
"url": "https://files.pythonhosted.org/packages/73/60/092f59bacd5b2800006317066238e55da0405b17cea05f60c274afd64d6d/django_reactify-1.4.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "ee959384e61c382120d5846c8c1d027533da4664b626c9e3cfc1d41c31eba810",
"md5": "dd75aa7217301deaa2920e11dc75d4fd",
"sha256": "b96741a9eb5bb56a8166900e7bc59ccfac0998808fdc4853b691cd37f76547d8"
},
"downloads": -1,
"filename": "django_reactify-1.4.0.tar.gz",
"has_sig": false,
"md5_digest": "dd75aa7217301deaa2920e11dc75d4fd",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.6",
"size": 55876,
"upload_time": "2024-12-20T20:00:58",
"upload_time_iso_8601": "2024-12-20T20:00:58.925261Z",
"url": "https://files.pythonhosted.org/packages/ee/95/9384e61c382120d5846c8c1d027533da4664b626c9e3cfc1d41c31eba810/django_reactify-1.4.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-12-20 20:00:58",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "Bonifase",
"github_project": "django-reactify",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "django-reactify"
}
JSON
