You could use StackBlitz. It's great platform to build things online. You can create React project without installation, and you can copy and paste the snippets of code your are trying to view from the book.

Couldn't find a satisfactory solution and not willing to invest too much. Storybook looks like I'd have to change my code and because I'm still relatively new to react, not sure I'm up for that.

I'm just letting VSCode restart server each time I save a change then going to the browser and clicking through the menus to get to the page I'm working on.

For more complex ui changes, I'll create a code sandbox mini react app and just work on that for, like css changes, etc.

UPDATE: I've implemented Storybook and I like it. After following the doc to install it I saw that I just needed to create a file (story) for a component like MyComponent.stories.js and put in the few lines of code to import and use it, passing in whatever props I wanted to see.

I decided to put my stories files into a separate separate stories folder under src. Here's an example for a Details component:

import React from 'react';
import { action } from '@storybook/addon-actions';
import Details from '../Details';

// How to display the component in Storybook page
export default {
  title: 'Details',
  component: Details,
  // Our exports that end in "Data" are not stories.
  excludeStories: /.*Data$/
};

// Props passed into component
export const recordData = {
  record: {
    id: '1',
    createdOn: '2020-04-20 4:07 PM',
    createdBy: 'dgarv',
    modifiedOn: '2020-04-20 4:07 PM',
    modifiedBy: 'dgarv',
  }
};

// Use the actual component
export const Default = () => <Details {...recordData} />;

Disable javascript source maps under browser developer tools settings. Then when you debug you will see the compiled source code.

You need to send the proper content headers. application/javascript

Check out Facebook's docs how to compile jsx on the fly in the browser.