search

babel / babel-standalone

:video_game: Now located in the Babel repo! Standalone build of Babel for use in non-Node.js environments, including browsers.
https://github.com/babel/babel/tree/master/packages/babel-standalone
MIT License
819 stars 121 forks source link

Create a React element #24

Open mjhamm75 opened 8 years ago

mjhamm75 commented 8 years ago

How do I create a React element from the string that is returned from transform?

Daniel15 commented 8 years ago

Can you elaborate on exactly what you're trying to do? :)

khankuan commented 8 years ago

Hey, i had a similar question. I have something like:

import React from 'react';
const main = () => {
  return eval(Babel.transform(code, { presets: ['es2015', 'react']}).code)
}

But encountered React is not defined. Do you have any advice for it? Thanks!

Daniel15 commented 8 years ago

But encountered React is not defined.

You need to load React. Easiest way is to load it from Facebook's CDN:

<script src="https://fb.me/react-15.1.0.min.js"></script>
<script src="https://fb.me/react-dom-15.1.0.min.js"></script>

Also note that you can't use import statements with babel-standalone, as it does not provide any module system.

khankuan commented 8 years ago

Ah okie, basically window.React needs to be defined in my case

khankuan commented 8 years ago

If I have a component <MyButton />, is there a way to reference it?

liekkas9 commented 7 years ago

@khankuan I also met the same scene, and I solved it in this way. I think it would not be the best way to mount all the objects on the window. Would you later find a better solution?