Package: dash-local-react-components
dash-local-react-componentsA small library that allows for loading react components in Dash applications directly from local project files, without any need for a separate build process.Setting up1. Install thedash-local-react-componentspython packagepip install dash-local-react-components2. Put.jsfiles containing your react.js components into a subdirectory of your projectmy-project
├ main.py
└ public
  ├ common.js
  └ my_component.js3. Load your componentfromdashimportDashfromdash_local_react_componentsimportload_react_componentapp=Dash()# if the component is exported from the my_component.js module as a default exportMyComponent=load_react_component(app,'public','my_component.js')# if the component is exported from the my_component.js module as a named exportMyComponent=load_react_component(app,'public','my_component.js','MyComponent')4. Add your component to the layout of your applicationapp.layout=html.Div([html.H1('My application'),MyComponent(id='my-component',text='Hello world')])Writing Dash react componentsWriting custom react.js components for Dash applications is similar to writing any other react.js components. Nevertheless, there are some differences that worth noting.An example of a Dash react component may look as follows:importReactfrom'react'import{add}from'./common.js';exportdefaultfunctionMyComponent(props){const{setProps,count}=props;functiononClick(){setProps({count:add(count,1)});}returnReact.createElement('div',{},[React.createElement('div',{},`count:${count}`),React.createElement('button',{onClick},'Increment')]);}MyComponent.defaultProps={count:0};First, let's address the elephant in the room. As thedash-local-react-componentspackage removes the need for any build steps from the development process, it does not support.jsxfiles (which are not natively supported by web browsers). This means that one cannot use the native react notation like<div>my text</div>, but rather has to fall back to a little bit more involving syntax:React.createElement('div', {}, 'my text')(where the first statement gets compiled into the second during a regular build process). Functionally both expressions are identical, so one can still create fully fledged react components without using the .jsx format, it just requires some getting used to and is not as convenient.Apart form syntactic differences (imposed not necessarily by the Dash framework, but rather by this library), there are also some behavioral changes. Namely, each component used within a layout of a Dash application is provided with a specialsetPropsproperty. It's a function that can be used to change values of other properties of the current component. It behaves similarly to thesetStatefunction of class-based components, but instead of modifying the state, it modifies the properties. You can use this function to manage the parts of the state of the component that should be exposed to python callbacks of your Dash application.MotivationThe goal of this library is to remove any additional configuration and build steps from the process of creating Dash applications with custom react.js components in order to shorten the development cycle of prototyping small visualizations.It is not recommended (until you fully know what you are doing) to use this library in bigger scale projects. Thedash-local-react-componentsserves raw .js files in an un-minified and un-bundled way, which means that they require more resources in order to be download and executed.But if you are working on a small project and don't want to worry about npms, gulps, webpacks and grunts at this stage - this library might be something for you. Just run yourmain.pyand enjoy your fully interactive application.Future improvementsThe most inconvenient part of this library is the fact that it does not support .jsx files. It's a limitation of the current implementation, not the general design, though. It would be possible to compile .jsx files into .js files on the fly, when first requested. I did some investigation into it, but did not find any fully-python-based jsx transpilers, so I did not follow through - therefore it is not supported in the current version. But it might be a good thing to revisit in the future.