React CDN Playground

Summary

Some examples of React JS using CDN links. useState, useEffect, createRoot and vanilla js.

I have included the following:

• Dynamic binding
• Changing some text on the screen
• Displaying a list from some JSON data and option to delete
• Displaying a list of users from JSON placeholder
• Dark and light box
• Filterable list of cards

CDN links

Place the cdn links in the head of the document.

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

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

Root

There is only 1 element on the page.

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

Declare

const { useState } = React;
const { useEffect } = React;
const { createRoot } = ReactDOM;

Render

const rootElement = document.getElementById('root');
const rootApiElement = createRoot(rootElement);
rootApiElement.render(<App />);

Tech and Tools

• JavaScript
• CSS
• HTML
• JSX
• Code Pen

Demo

Open demo on Code Pen.

Link to Demo

Demo of Router

Basic router with 3 routes. Home page, login page and register page. The page has no styles.

Open demo on JS Fiddle

Link to Demo