Export codes in VizHub to VScode under React-frame

Help
#1

Hi, I am very new to JavaScript and Data visualization. I tried to use one of the templates on VizHub then built up my own. It works pretty well.

However, I want to export the code from VizHub and then put it into the vscode so that i can easier manage my codes with other charts i made out of using react library. The problem is that, the chart I made on VizHub is not renderring in vscode under React frame…

I saw there are two package.json, and I know we use Rollup for renderring, but react has its own render. Should I delect the Rollup set up using react it own? What else should I do? Should I change the vega-lite here on vizhub to a react style code to get it run?

I would really appreciate your kind help!

1 Like
#2

Greetings,

For migrating code from VizHub into a project using React, I would suggest to:

  • start a fresh React project using create-react-app, then
  • export the source files from VizHub, unzip the exported files
  • Move the exported source files into the new React app template (just the JS and CSS source files - not package.json, not rollup.config.js, and not index.html)
  • Make sure that the index file from the new React app properly invokes the code exported out of VizHub
  • npm install all the dependencies that you import in your code
  • Modify the index.html provided by create-react-app to include the things you need that are in the original index.html exported from VizHub. Make sure to not include the <script> tags, if any, from the index.html exported out of VizHub, as dependencies are bundled if you use create-react-app.
  • With create-react-app, CSS can be imported from JavaScript files. You could use this approach to pull in your CSS.

That process should work well. This would replace use of Rollup with use of Webpack (via react-scripts) for bundling your source files. It should be all compatible, as code in VizHub uses standard ES6 modules.

That should do it! Good luck!

Now that I think of it, this would make for a great short video to explain this process. I will consider making such a video.