The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Make A Stand Alone Web Page That Uses React Babel and JSX

TODO: Pull subtitle into page object

You can make a single web page that calls external versions of React and Babel from unpkg.com to render JSX

For example:

code_start_default_section code_end_default_section

Note that you'll need to set your script type to `text/babel` in addition to calling the external scripts.

See unpkg.com for details on how to choose versions

You can also get other node modules from there as well

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Make A Stand Alone Web Page That Uses React Babel and JSX

-- p

You can make a single web page that calls external versions of React and Babel from <<link|unpkg.com|unpkg.com>> to render JSX

-- p

For example:

-- code/
-- html

<html>
<head>
    <title>Stand Alone React And Babel</title>  
    <script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const rootElement = document.getElementById('root')
    const welcomeElement = <div>Hello, World</div>
    ReactDOM.render(welcomeElement, rootElement)
  </script>
</body>
</html>

-- /code

-- p

Note that you'll need to set your script type to `text/babel` in addition to calling the external scripts.

-- p

See <<link|unpkg.com|unpkg.com>> for details on how to choose versions

-- p

You can also get other node modules from there as well


-- categories
-- Programming

-- metadata
-- date: 2021-08-07 17:17:07
-- id: 20eojmhg
-- status: published
-- type: post
-- SCRUBBED_NEO: false
-- site: aws