DEV Community

tmhao2005
tmhao2005

Posted on • Edited on

1

How to test JSX directly on browsers without any building steps

Is there anytime you wonder that we have a React component written in ES6 style and you want to test it straight away on the browser without configuring babel to transform JSX and then configure webpack to bundle things?

If you have the same interest, here is the few steps helping you out.

First of all, we create the test website directory with the following structure:

website
- index.html
- index.js
- Foo.js
Enter fullscreen mode Exit fullscreen mode
  • with Foo.js is a simple component with following content:

export default () => <div>Foo</div>;

Enter fullscreen mode Exit fullscreen mode
  • index.js is all about importing and rendering:
import Foo from "./foo.js"; // can also use `foo`

ReactDOM.render(<Foo />, document.getElementById("root"));
Enter fullscreen mode Exit fullscreen mode
  • index.html this is the most important
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script
      src="https://unpkg.com/react@16/umd/react.production.min.js"
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
    ></script>
  </head>

  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-es2015-modules-umd"
      type="text/babel"
      src="./foo.js"
    ></script>
    <script
      data-plugins="transform-es2015-modules-umd"
      type="text/babel"
      src="./index.js"
    ></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

There are couple of important things here:

We must include babel script for transpiling JSX and React + ReactDOM via CDN:

https://unpkg.com/babel-standalone@6/babel.min.js
https://unpkg.com/react@16/umd/react.production.min.js
https://unpkg.com/react-dom@16/umd/react-dom.production.min.js
Enter fullscreen mode Exit fullscreen mode

Next, we register a module by wrapping in <script type="text/babel" />, plus in order to support import from another module we have to use plugin transform-es2015-modules-umd by adding more data-plugins="transform-es2015-modules-umd". In this case we register 2 modules foo and index respectively so we can import foo module in index module.

That's it!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (2)

Collapse
 
ribosed profile image
ribosed • Edited

Is this correct "react-dom.producti*m*on.min.js" .

Collapse
 
tmhao2005 profile image
tmhao2005

@ribosed you're right it was wording mistake :) I made the correction

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more