This sample shows how to load Blockly in a React project.
- Nodejs
- npm
npm install
npm start
react-blockly: A React component that embeds Blockly. It uses the official Blockly npm package.
- App.js
- customblock.js
- generator.js
A main webpage of web-application. Blockly workspace is rendered here including another components. At WorkspaceComponent variable contains a blockly workspace html, add a new block tag here as example
A custom block defenition from JSON obect (shape, connection, input, output etc) For easier define a new block, please use Google Blockly Factory to create a new block. The tool provide GUI for block definition and JSON's block attribute on the right side. You can copy and create a initialize function accordinly to example
How the specific defined block is translated to code (either Javascript, Python, Lua etc). The generated code is in string. return compoenent depends on block type (eg. left connector block may return code and its value). Google Blockly Factory also provides a generator when using its GUI to define a block in geneator stub tab