babel-standalone icon indicating copy to clipboard operation
babel-standalone copied to clipboard

Create a React element

Open mjhamm75 opened this issue 9 years ago • 6 comments

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

mjhamm75 avatar Mar 22 '16 01:03 mjhamm75

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

Daniel15 avatar Apr 17 '16 06:04 Daniel15

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!

khankuan avatar Jun 08 '16 00:06 khankuan

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.

Daniel15 avatar Jun 08 '16 00:06 Daniel15

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

khankuan avatar Jun 08 '16 01:06 khankuan

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

khankuan avatar Jun 08 '16 01:06 khankuan

@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?

liekkas9 avatar Aug 01 '17 16:08 liekkas9