Skip to content
Matt BertiMatt BertiMatt BertiMatt Berti

Matt Berti

React with JSX Hooks quick setup for development

Recently I had the urge to test out some of the amazing stuff I was learning in React on some real data from a side-project. I wanted to use hooks and JSX, and I just wanted to load the React engine via <script> tags in the browser, then have the browser compile the JavaScript and JSX. This is obviously purely for development purposes, since the expense to compile is totally unsuitable for production.

To get React with hooks and JSX up quickly and easily, do the following:

  1. Include the React, React-DOM, and Babel scripts in your HTML <head>:
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
  1. Enclose your JavaScript/JSX in a script tag. You must define the script type as text/babel so the Babel engine knows to compile it.
<script type="text/babel">
const element = (
    <div className="container">
        <h1>Hell O'world!</h1>
    </div>
);
ReactDOM.render(element, document.getElementById('root'));
</script>
  1. Load your app in your browser.
  2. Now that your app is running, respond with an appropriate Reaction like glee or chest-thumping.