VanillaJS to ReactJS 18 CDN/UMD

stevenanthonyrevo commented 1 week ago

Happy Hacktoberfest 2024! 👻

We are ready and excited for the hackathon in 2024!

We want to support many different initiatives and one of those is utilizing React JS on the frontend without NPM as our primary javascript language.

Our hope is to support a React JS version embedded into our application without any build steps.

For many years, we would rely on Vanilla JS for our frontend, However in 2024, we hope to support React JS!

It's a difficult choice but React JS will have it's benefits.

We understand by updating our project to rely on React JS it will help our project grow and help newbie contributors learn React JS along the way!

I've already started to configure a CDN and UMD version for React via a sample application.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React 18</title>
  <script src="https://unpkg.com/@babel/standalone@latest/babel.min.js"></script>
  <script src="https://unpkg.com/react@latest/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
</head>
<body>

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

  <script data-plugins="transform-modules-umd" type="text/babel" data-presets="react" data-type="module">
  import { createRoot } from 'react-dom/client';
  import { useState, useEffect } from 'react';

  const App = () => {
    const [message, setMessage] = React.useState("Hello World");

    React.useEffect(() => {
      setMessage(document.getElementsByTagName("h1")[0].innerHTML);
    }, []);

    return <h1>{message}</h1>;
  };

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

  </script>
</body>
</html>

Our objectives for hacktoberfest in 2024!

Convert an already working and built rocket.templ.html to rely on a React JS implementation with standalone Babel instead.

Any contributors are welcome to help us in translating our Vanilla JS frontend to a React JS Application!

MrSwapnilRahate commented 2 days ago

I'm ready contribute. Please assign this to me under Hacktoberfest2024.

stevenanthonyrevo commented 17 hours ago

Hey @MrSwapnilRahate,

I've assigned the issue to you.

I'll be the one to review any PRs you may submit.

Feel free to let me know if you have any questions!

I'm excited to get the issue closed, I want to thank you for your contribution!

stevenanthonyrevo / RocketShipCountDown

VanillaJS to ReactJS 18 CDN/UMD #17