DEV Community

ADS-BNE
ADS-BNE

Posted on • Edited on

1

Where do I start when I want to build a React App based existing JS?

So, I'm the first to admit I really struggle with React. I'm fine with JS and JQuery and have even completed many, many React tutorials. But when it comes to converting an existing JavaScript script into a React component, I'm completely stumped.

Right now I have a JavaScript script that is moderately complex.

It reads user data from and object in an external .js file.
Based off that data (or combinations of that data) the script writes elements to the DOM or fires off a modal.

So, for example, a simple if statement might be:

if (userdata.userage > 50 && userdata.userjob.userincome > 100000){
  $(".js-modal-body").load(info[key].content);
  $('#alertModal').foundation('open');
  Cookies.set(modalName, '1', { expires: 7 })
}
Enter fullscreen mode Exit fullscreen mode

And so on.

I won't paste the whole code in here, but basically it consists of:

  1. An import, brining in the userData object from a user.js file.
  2. A stand-alone helper function that returns the user's age based of their inputted date-of-birth and today's date.
  3. A series of if statements like the one above. Some if statements fire off Modals, some write new card elements to the DOM. Some also create cookies.

My question is where do I start when want to convert this to react?

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay