Clarity for blockly-react example

[ryandrew14]

Category Examples

Component blockly-react

Is your feature request related to a problem? Please describe. I'm struggling to fully understand the Blockly react example. There are a few concepts that I'm unfamiliar with (although I'm quite versed in React), and after spending a while Googling, still don't fully understand:

1. is="blockly" prop (set here)
2. ref={e => this.simpleWorkspace = e} (link -- this one I do understand but only after help from a friend who was around the React world when this was how refs were done)
3. The ReactDOM.render call here

Describe the solution you'd like

1. Comments in the code describing the function of this prop
2. Maybe just moving to React.createRef? This syntax is more modern and I think it'll work here.
3. Comments describing why this call is necessary -- it's abnormal in my React experience to see this called somewhere besides an index.js

Describe alternatives you've considered N/A

Additional context Any React developer who wants to use Blockly will end up in this example repo, so I think that making it as understandable is possible will reel in the highest number of React devs to the project. Thanks!

[samelhusseini]

Thanks for the feedback Ryan.

is="blockly" prop (set here)

React doesn't like it when there are DOM elements it doesn't recognize. xml and all of Blockly's xml tags are not recognized. In order to avoid (dev) console warnings such as:

Warning: The tag <xml> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

Using is="ANYTHING" works around that, link to code path here.

Noted, and will add a comment describing what's going on.

ref={e => this.simpleWorkspace = e} (link -- this one I do understand but only after help from a friend who was around the React world when this was how refs were done)

I'll take a look at using React.createRef, but in-general if you have experience with React and feel there's a "modern" way of doing things, feel free to PR.

I know the React community has seen a big drive towards hooks. I wonder how much would have to be adjusted here to make it so BlocklyComponent is a React hook..

The ReactDOM.render call here

When a field is clicked, the fields showEditor_ method is called. This particular examples is demonstrating how to use React to render React component within a field's popout (DropDownDiv). Another way to phrase it is, when a field is clicked, we call upon React to render a component in a specific DOM element, and Blockly takes care of positioning that element.

Usually in React, you only need the one top-level render call, but that nice thing about this, is if you already have a React components within your codebase, you can make use of them for rendering fields.

I had also hoped to create examples showing how you would use React to render custom SVG within Blockly to render your own fields (but I have not had the chance to get to that yet).

Again, thanks for the feedback, I hope the above helped. As an action item, I'll take it on myself to add additional comments to the example code, describing the above.

[ryandrew14]

I really appreciate the explanations -- thanks! I'll make a PR sometime soon to move to createRef.

I know the React community has seen a big drive towards hooks. I wonder how much would have to be adjusted here to make it so BlocklyComponent is a React hook.. This is an interesting idea, but I think since Blockly is XML-based in general, I think using components/JSX to represent it is a pretty good approach. That being said I'm going to be working on a pretty decent-sized project over the next couple months so I'll let you know if I think of something better.

[ryandrew14]

Hey, looking for some more help here. What does this function do? https://github.com/google/blockly-samples/blob/d82822f234eea40b719bfc4c716d938d4e33e7b4/examples/blockly-react/src/Blockly/BlocklyComponent.jsx#L59

Did a search in the repo and can't find it anywhere else.