"React for Python Devs" - Feedback Thread

[chriddyp]

trafficstars

This is a placeholder issue to get feedback from users about our "React for Python Developers" guide. By following the instructions in that guide, you should feel comfortable creating your own React Dash components, even if it was your first time programming in JavaScript and React.

How did it go? What did we leave out? Let us know in this issue!

[JonathanChiang]

not really sure what cookie cutter was for and going through the boiler plate wasn't very clear, couldn't really get through the steps.

[chriddyp]

Thanks for the feedback @JonathanChiang ! Sounds like we should clean up some of our language, as the boilerplate is now the same as the cookiecutter 😕 .

couldn't really get through the steps.

Could you describe in more detail which steps didn't work for you, or which steps were confusing?

Thanks for your feedback 🙇

[JonathanChiang]

I tried it again today and got most of it working. I guess working on a few different technologies at once was a bit confusing at first. I think a two sentence description in the documentation of what cookie cutter is would've cleared things up a bit. Appreciate you following up.

Love Dash, hope this project keeps growing!

[emmanuelle]

I'm going through the tutorial at the moment and I'll try to suggest or implement some improvements when I'm done. At the moment I'm confused by the instruction to do npm run demo. I followed the instructions setting up a directory with cookiecutter, but in package.json, there is no demo script so that npm run demo returns an error

emma@hopper:~/sandbox/dash_core_component$ npm run demo
npm ERR! missing script: demo

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/emma/.npm/_logs/2018-10-27T11_31_06_640Z-debug.log

[emmanuelle]

OK I just saw on #239 that it's normal that npm run demo does not work and that cookiecutter instructions should be followed instead. What is actually the benefit of using cookiecutter here? I understand it is a very clean way of providing a template to be modified later on, but it also adds a new tool/abstraction to the cognitive load, so I wonder whether it would not be easier just to clone a repo which would then be modified.

[emmanuelle]

Here a few suggestions for improvements to the tutorial. Please comment so that I can start working on a Pull Request.

Major points

• there is no demo script defined in package.json of the boilerplate, so that it is not possible to do npm run demo to see what happens when App.js is modified. I see two solutions: either define a demo script (please help with the command to use, I'm not familiar yet with JS), or work with usage.py from the start (I slightly prefer the first solution since it's good to introduce one thing at a time).

• in the "Our very own React component" a new class TextInput is defined, but it should be imported and exported in src/lib/index.js, otherwise an error appears in the rendered html. This should be mentioned in the tutorial (or did I miss something?).

More minor suggestions

• Add a table of contents at the beginning since the tutorial is quite long.
• Explain in a few words what the cookiecutter is, it was confusing for me at first (too many things introduced at the same time).
• Give some hints about how to answer to questions for the cookiecutter setup (install dependencies, name your package example-component for consistency of naming with the tutorial).
• At the end "Build your component with Python" the description of usage.py could be a bit longer, and include some code.

[bpostlethwaite]

An issue documenting a request to more fully describe the cookiecutter approach and building your own component is here: https://github.com/plotly/dash-docs/issues/227

We will add extra language in a PR and ask @emmanuelle and @JonathanChiang for feedback

[emmanuelle]

Thanks @bpostlethwaite! I wouldn't mind giving it a try and addressing #227, as long as you guys confirm that my suggestions above are OK: should we stop completely mentioning App.js? Is the edit of index.js mandatory? It must seem obvious to you, but I'm just getting started with Javascript and react!

[JonathanChiang]

Would love to give feedback! I would love to learn how to connect python and react!

[T4rk1n]

@emmanuelle

#267 Adds the documentation for the cookiecutter.

I see two solutions: either define a demo script (please help with the command to use

The command to run the demo is start

should we stop completely mentioning App.js?

App.js should only be used for quick style testing, it runs the component as a normal react component and not as a dash component. It doesn't run the dash-renderer so you can't test callbacks with it.

usage.py should be the preferred way to test components, you can even use it with tests/test_usage.py and automate your testing.

[stonecharioteer]

Thanks for the tutorial. I'm used to python and JS seems annoying to me, this is helping :)

Found a typo:

class MyComponent(Component):
    def __init__(self, a):
        self.a = a;
        super().__init__(a)

    def render(this): # 'this' should be 'self', might confuse newcomers.
        return self.a;

[qubolino]

this works well, although you preferably should be a bit knowledgeable about the various involved technos.

i am confronted to an unsolved problem though when I want to import external react libs (e.g. material-ui among others). it works well with webpack but not with dash (_react.default.createContext(); missing). not sure whether it is the best place to post this issue though.

[pcawte]

Thanks for taking the time to provide such good documentation on Dash - however, on this page there seems to be a number of errors in the program examples / code snippets. Probably the most serious is in the final part, where in App.js, the function SetProps should be defined using the arrow syntax:

    setProps = (newProps) => {
        this.setState(newProps);
    }

So that this has lexical scope - otherwise the program fails with an error.

There are other errors, such as "component" being used instead of "class" and the constructor used without the "props" argument although "props" is referenced in the constructor.

I also had to add the babel plugin transform-class-properties to get my version of node to recognise the arrow style function calls and configure this in .babelrc

If you want me to make feedback in a more formal way, then please let me know.

Paul

[inlytica]

I have been working on this off and on for about a week and still cannot seem build a working component. I am guessing that I represent a substantial part of your current and future user base in that I am a data guy and not a developer. I live in python because it is the tool that I use for my data wrangling, but the whole cookiecutter, boiler plate, virtual environment, tarball, etc. etc. part of this was a lot to take in.

That being said, what I have worked out in my own mind is that running cookiecutter https://github.com/plotly/dash-component-boilerplate.git creates a project that automates the building of a react component and supplies templates for the necessary files.

So, to build a simple component, a user should be able to:

1. Modify the React file included in the src/lib directory (and possibly make adjustments to the requirements.txt and or Manifest.txt files)
2. Run npm run build:all to generate the python files needed to incorporate the component in a dash layout
3. Run python setup.py sdist to create a tarball that can then be installed using pip.

Is this correct?

I have used this method to successfully to build a component from the directory created by boiler plate (without any modifications to the example_component script). I have also been able to clone the Sunburst ( https://github.com/plotly/dash-sunburst ) repository and use this method successfully.

However, when I try to replace the contents of .src/lib/example_component.react.js with what I created when going through the TextInput lesson, the build fails after running npm run build:all. I also tried going through the sequence without success.

I get a wide variety of errors depending on what I try. The only consistent error I get is: . (I tried manually activating the venv but still no luck.)

Assuming that my assumptions about how this process is supposed to work are correct, it would be a huge help if you could supply the completed code for the TextInput example in the React for Python Developers page. I am guessing that I have done something wrong during the lesson.

For example, I notice that you advise "Annotating your function with propTypes" but I am not sure that I am doing this correctly. You also mention that "The id property is required in all Dash components" but I am not sure I added it correctly.

Sorry for the long post. Hope it is helpful.

[SterlingButters]

Greetings, avid Dash user here.

1. Is the App Component required for build or just for the node demo?
2. If required for build, how are properties inserted into the App class or Component class of in Python?

Its not particularly clear to me how the definition of these properties in Python affects/is-related-to the React component - I feel this would be helpful in the Docs.

[castelo-software]

Hi there!

Thanks for the tutorial! It's quite easy to get started with it. However, I'm running into problems using the snippet codes. Specifically, this:

handleInputChange = (e) => {
    // get the value from the DOM node
    const newValue = e.target.value;
    // update the state!
    this.setState({
      value: newValue
    })
  }

This doesn't compile for me. Since in the same tutorial it's explained that there's two ways of defining functions in JS, I just tried the other one without the arrow, but that didn't work either. I eventually realized that when using the other method, you also need to explicitly bind the function to the object being used, but this method is not native to JS, and needs to be converted using babel. But for some reason babel is not correctly configured in the cookiecutter template.

The way I fixed it was by adding "babel-plugin-transform-class-properties": "^6.24.1", to the package.json and "plugins": ["transform-class-properties"] to .babelrc

Any recommendations on what the best way is to configure it? I have seen that there's other plugins/presets for babel that would also transform these arrow functions. And is the template really misconfigured or could I have missed something?

[alexcjohnson]

@MrCaracara interesting, I'd never seen that plugin. Turns out there are a number of related options you can use if you like this pattern: https://medium.com/komenco/react-autobinding-2261a1092849

That said, we don't use any such transformations within our own code - we just explicitly bind custom methods:

    constructor(props) {
        super(props);
        this.propsToState = this.propsToState.bind(this);
    }

    propsToState(newProps) {
        this.setState({value: newProps.value});
    }

This is how most react code I've seen elsewhere does it. So the solution is for us to include the equivalent line in the tutorial - thanks for bringing this up! That said, I also see in the above medium post that defining custom methods as arrow functions renders this binding unnecessary - maybe we should just do that!

Note that React automatically sets this correctly for standard lifecycle methods (I'd heard before that it binds them all, but actually I think it just calls them with the correct context) - render, componentWillReceiveProps etc etc - so it's only custom methods that need this binding. I've always thought it's funny that ES6 makes you explicitly bind methods to the class - there are justifications for it, but it's at odds with most other languages...

[alexcjohnson]

Oh sorry - misread your comment, and I see we are using arrow functions at that point in the tutorial but it still isn't working for you somehow... I will have to look into that. Sorry for the noise!

[SumNeuron]

Any chance / possibility to incorporate Vue?

[chimirala]

Hi Team,

I am trying to follow the instructions and got following errors.

It says listening to http://[::]:55555 but unable to connect to that link. Could you guide on this.

[MarcoV10]

Hi All

There is this Webinar that @chriddyp made explaining how this works is very helpful, here the available link in youtube: https://www.youtube.com/watch?v=wifoPPRgG_I I have successfully made the example "operative", but the last minutes when another react file is implemented is not very clear, (which is the maximum goal, get any react code to dash)

The thing is that 1. the video quality is a bit blurry at the end and 2. The recording window does not include the whole code and I couldn't understand at the end what was the property in the new callback.

Are there any plans to include more examples or videos?

I am trying to compile a change and an error of "component_data['props']," comes in, i am pretty sure is related to properly linking the new callback, I may need more examples of ways of tying a react code into

[shday]

Oh sorry - misread your comment, and I see we are using arrow functions at that point in the tutorial but it still isn't working for you somehow... I will have to look into that. Sorry for the noise!

I needed to install a plugin to make this work. Suggest adding instructions to the tutorial or changing the syntax.

Here is what I needed to install: https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-class-properties

[shday]

In several places in the tutorial I'm seeing constructs like:

component App extends Component { //stuff here }

Are these typos? Shouldn't it be:

class App extends Component { //stuff here }

(i.e., "component" should be "class")

I mostly get things working when I do this fix, but I'm still having issues... so not sure if I'm missing something.

[zacclery]

I've followed the tutorial and successfully ran: npm run build:js

⇒  npm run build:js    

> [email protected] build:js /Users/zac/PycharmProjects/dash_example/my_dash_component
> webpack --mode production

Hash: 27ee2e95cbc8e49fe680
Version: webpack 4.36.1
Time: 1097ms
Built at: 11/16/2020 9:23:35 AM
                       Asset      Size  Chunks             Chunk Names
    my_dash_component.min.js  3.18 KiB       0  [emitted]  main
my_dash_component.min.js.map  7.48 KiB       0  [emitted]  main
Entrypoint main = my_dash_component.min.js my_dash_component.min.js.map
[0] external "PropTypes" 42 bytes {0} [built]
[1] external "React" 42 bytes {0} [built]
[2] ./src/lib/index.js + 1 modules 5.13 KiB {0} [built]
    | ./src/lib/index.js 143 bytes [built]
    |     + 1 hidden module

But the next command fails:

~/PycharmProjects/dash_example/my_dash_component|
⇒  npm run build:js-dev
npm ERR! missing script: build:js-dev
npm ERR! 
npm ERR! Did you mean this?
npm ERR!     build:js

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/zac/.npm/_logs/2020-11-16T08_24_33_989Z-debug.log

[wozboz]

Hi Guys,

have been struggling with the tutorial all day, couldn't really find a solution. I am following everything that is outlined in the tutorial. When I get to the part "Quick Intro to React", it is mentioned that I should run "npm run start to change stuff and see it update. Unfortunately, I get an error that I can not seem to get rid of. Here is the output from npm run start:

[email protected] start /Users/phil/Downloads/npmtest/example_component webpack-serve --config ./webpack.serve.config.js --open

⬡ webpack: Watching Files ⬢ webpack: Error: listen EADDRINUSE: address already in use :::55555 at Server.setupListenHandle [as _listen2] (net.js:1318:16) at listenInCluster (net.js:1366:12) at Server.listen (net.js:1452:7) at WebpackPluginServe.start (/Users/phil/Downloads/npmtest/example_component/node_modules/webpack-plugin-serve/lib/server.js:86:10) { code: 'EADDRINUSE', errno: -48, syscall: 'listen', address: '::', port: 55555 } Error: listen EADDRINUSE: address already in use :::55555 at Server.setupListenHandle [as _listen2] (net.js:1318:16) at listenInCluster (net.js:1366:12) at Server.listen (net.js:1452:7) at WebpackPluginServe.start (/Users/phil/Downloads/npmtest/example_component/node_modules/webpack-plugin-serve/lib/server.js:86:10) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: webpack-serve --config ./webpack.serve.config.js --open npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

`

I am completely lost. I already checked, there is no process running that uses port 55555. No idea what is going wrong. Hope someone can help.

[ayyjohn]

https://developer.apple.com/forums/thread/671197 looks like this is a known issue with big sur, super infuriating! you'll have to dynamically configure a port using something like this https://github.com/shellscape/webpack-plugin-serve/blob/master/recipes/dynamic-port.md

for me it was fine to just add

const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');
...
module.exports = {
  ...
  plugins: [new Serve({
    port: 8000
  })]
  ...
}

to my webpack.config.js

Hi Guys,

have been struggling with the tutorial all day, couldn't really find a solution. I am following everything that is outlined in the tutorial. When I get to the part "Quick Intro to React", it is mentioned that I should run "npm run start to change stuff and see it update. Unfortunately, I get an error that I can not seem to get rid of. Here is the output from npm run start:

[email protected] start /Users/phil/Downloads/npmtest/example_component webpack-serve --config ./webpack.serve.config.js --open ⬡ webpack: Watching Files ⬢ webpack: Error: listen EADDRINUSE: address already in use :::55555 at Server.setupListenHandle [as _listen2] (net.js:1318:16) at listenInCluster (net.js:1366:12) at Server.listen (net.js:1452:7) at WebpackPluginServe.start (/Users/phil/Downloads/npmtest/example_component/node_modules/webpack-plugin-serve/lib/server.js:86:10) { code: 'EADDRINUSE', errno: -48, syscall: 'listen', address: '::', port: 55555 } Error: listen EADDRINUSE: address already in use :::55555 at Server.setupListenHandle [as _listen2] (net.js:1318:16) at listenInCluster (net.js:1366:12) at Server.listen (net.js:1452:7) at WebpackPluginServe.start (/Users/phil/Downloads/npmtest/example_component/node_modules/webpack-plugin-serve/lib/server.js:86:10) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] start: webpack-serve --config ./webpack.serve.config.js --open npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

`

I am completely lost. I already checked, there is no process running that uses port 55555. No idea what is going wrong. Hope someone can help.

[luka-mikec]

Under Functions, it says

In JavaScript, you'll see functions defined in two ways,

and then gives the new style way and the traditional way. However, these are not interchangeable; the difference is in how this behaves in their bodies; a this in a regular function refers to that function's instance, while for arrow functions it will be whatever this means in the caller's context. This should not necessarily be explained in the docs in detail, but there should at least be a mention that functions and arrow functions are not always interchangeable, as it matters even for the narrow scope of the tutorial.

Under Classes, the JavaScript keyword for the constructor should be constructor instead of init.

Under Annotate your function with propTypes, it says

In the future, we will use these propTypes to provide validation in Python. That is, if you specify that a property is a PropTypes.string, then Dash's Python code will throw an error if you supply something else. Track our progress in this issue: 264.

This is complete so can be removed