VanillaJS to ReactJS 18 CDN/UMD

stevenanthonyrevo commented 1 month 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 1 month ago

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

stevenanthonyrevo commented 1 month 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 commented 4 weeks ago

Hey @MrSwapnilRahate,

Please pull the latest changes we've made to the main branch before working on the issue any further.

Let me know if you have any questions that may arise while convert the Vanilla JS to React JS.

Thanks, happy Hacktoberfest!

MrSwapnilRahate commented 4 weeks ago

HI @stevenanthonyrevo I committed with my changes but I'm getting conflict now. So, could you please go through that.

stevenanthonyrevo commented 4 weeks ago

Hi @MrSwapnilRahate, Thanks for your contribution.

I was very happy to see the contribution and created a new branch with the conflicts #25.

I pulled your work into the branch for the current issue and then corrected the conflicts.

I'm going to open a new issue for you to contribute the Go version changes, since my conflicts only cover updating the javascript.

Feel free to submit your own PR with only the Go versions from your current committed changes.

Thanks!

MrSwapnilRahate commented 4 weeks ago

Hi @stevenanthonyrevo,

First of all, thank you so much for reviewing my changes and assigning me a new task. I really appreciate the opportunity to contribute!

Since this is my first time participating in Hacktoberfest, I’m still getting familiar with the process. I noticed that my recent contribution (Vanilla JS to ReactJS conversion) is not showing up on my Hacktoberfest profile. I realized it may be because I didn’t create a PR myself, and the code got merged directly.

Could you please guide me on what I should do now so Hacktoberfest can track my contribution?

Should I open a new PR based on my last commit?
Or would it be possible to label the contribution (or create a new PR) so it counts toward Hacktoberfest?

Your advice on this would be really helpful. Thanks again for your time and for assigning the new Go version task—I’m excited to continue working on it!

stevenanthonyrevo commented 3 weeks ago

@MrSwapnilRahate since I want make sure you get credit.

The current project is up-to-date with your recent contributions as I've resolved what I could unfortunately that is because PR's need to be associated with the labels not issues.

Glad to have a new time contributor!

I apologize on this issue not showing up, its based on successful PR's merged.

I usually give everyone an assigned ticket then they submit a PR (with any resolving conflicts completed) to get the credit in the Hacktoberfest profile.

I will say with this case, the contribution still had merge conflicts and no PR so I wasn't able to assign your contribution since I pulled via a commit.

Not much of an issue but a good rule of thumb is submit PR's with a good description and easily mergeable and asking any questions on the issue before submitting the PR.

The one good thing is #27 should be fully credited in your Hacktoberfest profile since, I've attributed the label on the PR and was able to merge on main.

Hope to see more contributions and I'm open to creating more issues if you'd like.

MrSwapnilRahate commented 3 weeks ago

Hi @stevenanthonyrevo,

Thank you so much for your guidance and patience with my first contribution. I now understand the importance of submitting PRs properly to ensure everything is tracked for Hacktoberfest. I'm glad that Issue #27 is resolved and correctly tracked this time.

I really enjoyed working on the project and learning from your feedback. I’d love to contribute more! Please let me know if there are any other tasks or issues I can help with.

Thanks again for your support—looking forward to more contributions!

stevenanthonyrevo / RocketShipCountDown

VanillaJS to ReactJS 18 CDN/UMD #17