Using React in JSFiddle, Coderpad, or just an HTML page

Sometimes we may need to use React in Coderpad when we interview candidates or get interviewed.

There is actually a way to do that easily in Coderpad:

1. Just change the language to HTML
2. Choose the Packages next to that, and choose React

Then we can write code such as

<script
  src="https://unpkg.com/react@17/umd/react.development.js"
  crossorigin
></script>
<script
  src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
  crossorigin
></script>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<div id="root"></div>

<script type="text/babel">
  function App() {
    const [count, setCount] = React.useState(0);

    function handleClick() {
      setCount((c) => c + 1);
    }

    return (
      <div>
        count: {count} <button onClick={handleClick}>Click</button>
      </div>
    );
  }

  ReactDOM.render(<App />, document.getElementById("root"));
</script>

Demo in Coderpad (if it can allow public access): https://app.coderpad.io/G7E9DQQT

Demo in JSFiddle: https://jsfiddle.net/d9m68rft/

Or demo in Codesandbox: https://codesandbox.io/s/brave-leaf-6dmbu?file=/index.html

One issue is that as of right now, Coderpad or JSFiddle cannot auto format our code with the JSX, and sometimes the code is a bit messy due to indentation. Codesandbox can reformat everything on File -> Save, but some companies disallow moving the code to else where and pasting in back to Coderpad, to discourage cheating, probably.

Coderpad current uses React 16.13.1 and it is good enough for React Hooks. To be able to use React Hooks, we must use React 16.8 or above.
The scripts in the above code is suggested by the React documentation itself: https://reactjs.org/docs/add-react-to-a-website.html

We can also see the different versions of React files that can be included, in: https://cdnjs.com/libraries/react

JSFiddle has a React choice, but it requires a little bit of configuartion. The best website to use React is https://codesandbox.io I found.

Codersandbox is a bit tricky to share with another person. One time I had to constantly save the file, and ask the other person to constantly refresh her page. I often had to ask, "do you see the updates?"

It can in fact be quite easy:

1. On the left side of the window, click on the bottom icon, which is "Share"

1. And then, copy that "live" link and share with the other person:

It is somewhat a pity that some companies do not allow using Codesandbox because they have more control using Coderpad with replaying the interview. But I suppose one way is to be so good in it, that the interviewer is totally impressed and can vow that you said and typed everything yourself, and vow to say that you are one of the best candidates he has met so far and recommend a strong hire.