https://smarketman.com/instant/react/

Smarketman

  * Sign up
  * Sign in

Add react components to any static page

No signup needed to try it out!
Insert different react components with conflicting library versions

Before: Static Site Code

[<div id="root"> This]
This div will be replaced because its id is "root"

After: Smarketman Library Added

[<div id="root"> This]
This div will be replaced because its id is "root"

Step 1. Enter the url your static page is hosted on

Website domain [                    ]
Just the hostname (Example: smarketman.com or localhost:8000)

Step 2. Write your react code

Import hundreds of npm packages. Bundle with your preferred version.

Package                @         Version
[webpack             ] [@latest] [                    ] *mandatory
[babel-loader        ] [@latest] [                    ] *mandatory
[@babel/core         ] [@latest] [                    ] *mandatory
[@babel/preset-env   ] [@latest] [                    ] *mandatory
[@babel/preset-react ] [@latest] [                    ] *mandatory
[react               ] [@latest] [                    ] *mandatory
[react-dom           ] [@latest] [                    ] *mandatory
[react-ios-switch    ] [@latest] [                    ] X
[                    ] [       ] [                    ] X
[                    ] [       ] [                    ] X
[                    ] [       ] [                    ] X

React Code [ import React, {useS]

Step 3. Make sure you have an html element on your page with the same
id that your react code will render

          For example:

          const root = ReactDOM.createRoot(document.getElementById("root"));

          because your static site contains:

          <div id="root">
          This div will be replaced
          because its id is "root"
          </div>



Step 4. Generate the javascript library to add on your static page

[Generate Library]

Step 5. Add the javascript library to your static page

Ideally at the bottom of your html

Step 6. (Optional) Create a free account

Create an account
Copyright 2019