React Boilerplate (React 18+)

index.html

<div id="app"></div>

react-boilerplate-react-18.markdown

React Boilerplate (React 18+)

Boilerplate for playing with React (v18 +) and state.

A Pen by Oliver Schafeld on CodePen.

License.

script.babel

import { useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
 
function App() { 
  const [greeting, setGreeting] = useState({ greet: "Hello, World" }); 
  console.log(greeting, setGreeting); 
 
  function updateGreeting() { 
    const newGreeting = {...greeting}; 
    newGreeting.greet = "Hello, World-Wide Web"; 
    setGreeting(newGreeting); 
  } 
 
  return ( 
    <div> 
      <h1>{greeting.greet}</h1> 
      <button onClick={updateGreeting}>Update greeting</button> 
    </div> 
  ); 
} 


// ReactDOM.render(<App />, document.getElementById('app'));


const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App />);

scripts

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

How to upgrade to React 18