Package: django-react-components
Django React ComponentsDjango React Components is a collection of tools that automate the loading and rendering of React components when used in
conjunction withdjango-react-loader. This tool is currently in beta.InstallationInstalldjango-react-componentsanddjango-webpack-loaderusing pip:$pipinstalldjango-react-componentsdjango-webpack-loaderAdd both modules to yourINSTALLED_APPSinsettings.py:INSTALLED_APPS=(...,'django_react_components','webpack_loader',)RequirementsPythondjango-react-componentsrelies on thedjango-webpack-loaderpython module. Install it withpip:$pipinstalldjango-webpack-loaderJavascriptGlobaldjango-react-componentsusesnwbto compile compile React components. Install it globally:$npminstall-gnwbor$yarnglobaladdnwbLocaldjango-react-componentsuseswebpack-bundle-trackerand a sibling package,django-react-loader, to generate and render the react components. Install them locally:$npminstall--save-devdjango-react-loaderwebpack-bundle-trackeror$yarnadddjango-react-loaderwebpack-bundle-tracker--devUsageConfigurationYou will need to create a file callednwb.config.jsto configurenwbto properly compile your components. Check outnwb's (configuration guide)[https://github.com/insin/nwb/blob/master/docs/Configuration.md#configuration-file] for more details. Also look at their (webpack configuration options)[https://github.com/insin/nwb/blob/master/docs/Configuration.md#webpack-configuration].In your config file, adddjango-react-loaderas a loader to the webpack section of it. For example:// nwb.config.jsmodule.exports={webpack:{...,module:{rules:[{loader:['django-react-loader'],},],},}};The loader will run on every entry passed to the nwb config file. For example, if you wanted to load three react components:Comp1.jsComp2.jsComp3.jsyour config file might look like this://nwb.config.jsmodule.exports={webpack:{...,entry:{Comp1:'./src/Comp1.js',Comp2:'./src/Comp2.js',Comp3:'./src/Comp3.js'},}};The default export of each entry point will be compiled and attached to window on load using the key of the entry point in the config file, so in out example,:window.Comp1// The component at './src/Comp1.js'window.Comp2// The component at './src/Comp2.js'window.Comp1// The component at './src/Comp3.js'The template tags fromdjango-react-componentswill run an initialization function on the code attached to window to create the component using the props provided to the template.Setting upwebpack-bundle-trackerYou will also need to specify the locations to bundle the javascript with thewebpack-bundle-tracker. For example:varpath=require('path')varBundleTracker=require('webpack-bundle-tracker')module.exports={webpack:{...,output:{path:path.resolve('./dist/webpack_bundles/'),// Location for compiled files},plugins:[newBundleTracker({filename:'./webpack-stats.json'}),// Location for generated tracking file],}};Compiling React ComponentsCompile your react source code withnwb. Make sure to include the-no-vendorflag:nwbbuild--no-vendorRendering React ComponentsIn your templates, you can render React components by using the{% react_component %}or the{% react %}template tag. To do so:Load the template tag and therender_bundletag fromdjango_webpack_loader:{%loaddjango_react_components%}{%loadrender_bundlefromwebpack_loader%}Userender_bundleto pull in the appropriate javascript<head>
    {% render_bundle 'runtime' %}
    {% render_bundle 'App' %} 
</head>3a. Use thereact_componenttag to render the component with keyword arguments as props<body>
    {% react_component 'App' id='app' prop1=prop1 prop2=prop2 %}
</body>3b. Use thereact/endreacttags to render the component with rendered content inside. This will be passed as raw HTML to the component as thechildrenprop.<body>
    {% react 'App' id='app' %}
        <h1>Hello World</h1>
        <p>{{ content }}</p>
        <a href='{% url 'endpoint' %}'>Link</a>
    {% endreact 'App' id='app' %}
</body>Custom Props Encodingdjango_react_componentsuses JSON to encode props into the React components. You can specify a custom JSON encoder
class with theDJANGO_REACT_JSON_ENCODERsettings in your settings file. It will be passed tojson.dumps(props, cls=MyJSONEncoder)RequirementsPython 3.4-3.7, Django 1.11-2.2