Blockly Editor Window in ReactJS

[Tom Hanson]

Hi,

I'm currently developing a project that will eventually use the Blockly editor window pane inside a ReactJS website. I have a working Editor that is currently just in HTML with a few JS files in the same directory. Has anyone included the Blockly Editor inside a ReactJS or similar website before? Or perhaps any experience with working with the Editor and panes?

Note - When I say "Editor" I mean the workspace and main element at this page here

Thanks

[Nat Budin]

Yes, I've recently released a Blockly component for React.  See my earlier thread about it here: https://groups.google.com/forum/#!topic/blockly/GakDk2F9_aU

Stefan Melbinger also has been working on one; see his reply in that same thread for a link to that as well.  Good luck!

Nat

[Tom Hanson]

Hi Nat,

Thanks I did come across your post after I had posted my question. Have you released your component to ReactParts etc?

Also, do you have any advice or tips for implementing my own React Blocky component?

Thanks,

Tom

[Nat Budin]

I haven't yet, but yeah, that would be a good thing to do.  Thanks for the suggestion!

My main advice would be to use the pattern described in the docs here: https://facebook.github.io/react/tips/use-react-with-other-libraries.html

It's important to keep React from attempting to mess with the svg element and toolbox div that Blockly generate; Bad Things will happen if those go away when Blockly doesn't expect it.  Beyond that, I found integration to be relatively easy to do, although naturally, the problem becomes more complex the more configurability you want.

Nat

Tom

--
You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/vF6kfBnjsLA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Tom Hanson]

Hi Nat,

I'm currently trying to place the Blockly Editor workspace into my React component that can then be rendered, I'm curious as to how you managed to do this? I'm quite new to React so am still learning a lot with every small project or tutorial looked at online.

Thanks :)

[Nat Budin]

Hi Tom,

If you look at the BlocklyWorkspace component's source code here: https://github.com/patientslikeme/react-blockly-component/blob/master/src/BlocklyWorkspace.jsx

In the render function, it's inserting a div with "ref" set to "editorDiv".  This is the point at which Blockly will be injected.  Then in the componentDidMount function, which is called after the component is actually in the page's DOM, it calls Blockly.inject using this.refs.editorDiv.

That's really more or less it.  One more thing: don't forget to call "dispose" in your componentDidUnmount function; otherwise you'll leak memory.

Nat