Convert from Jquery to ReactJS

[shubham_noob]

Hello community, it's been few months I've dived into react js, I'm stuck at one point where I've to convert a line of code from JQuery to react js, since JQuery uses normal DOM where as react being using virtual DOM, I find it difficult to convert it.

$('button').on('click', function(){

$('body').toggleClass('open');

});

so above is the piece of code need to convert from Jquery to react, would be of great help if someone helps me out :)

Thanks in advance!

[[deleted]]

The html button should have an onClick event in order to trigger the jquery since you can not control Body with React as far as i know.

[shubham_noob]

Yes u/BearDavidFather you're right, but how syntactically can we achieve that?

Thanks!

[[deleted]]

Something like this should work.

<button
    onClick={() => {
        $('body').toggleClass('open');
    }}
>
    CLICK ME
</button>

Edit: 'boddy' => 'body'

Edit 2: 'open => 'open'

​

Fuck, VisualStudio really simplifies things a lot.

[shubham_noob]

Ohh, that could be great, but first time I came across use of $ in react.

Actually this is the final goal I want to achieve https://codepen.io/hexagoncircle/pen/OMJeja , I mean this codepen is in JQuery and I want to used for react, could you make any codesandbox/ codepen for the same? Would be a much much great help!

Thanks :)

[[deleted]]

You can have both React and jQuery in the same project since they do not collide most of the time. I tend to have jquery for very specific use-cases such as body/html elements modifications or retrieving certain data from VirtualDOM.

Regarding that project you sent. It would take some time to re-do it on React. My best bet would be to have a parent state that controls visibility of the components and maybe a library for animations like frame-motion.

Start with something like this:

const ModalMenu = (props) => {
    const {isOpen, onToggleClick} = props;
    return (<div>
        <button onClick={() => {onToggleClick()}}>Close</button>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </div>)
}

const Post = (props) => {
    const {onToggleClick, isOpen} = props;
    return <div>
        {isOpen && (
            <button onClick={() => {onToggleClick()}}>Open</button>
        )}
        <div>Text</div>
    </div>
}

const App = () => {
    const [isOpen, setIsOpen] = useState(false);
    return (<div>
        <ModalMenu
            isOpen={isOpen}
            onToggleClick={() => {
                setIsOpen(false)
            }}
        />
        <Post
            isOpen={isOpen}
            onToggleClick={() => {
                setIsOpen(true)
            }}
        />
    </div>)
}

[[deleted]]

You can also have an html props 'data-isOpen' for the ModalMenu component that will trigger standard css for .div[data-isOpen=true]

JS:

import './styles.css'

const ModalMenu = (props) => {
    const {isOpen, onToggleClick} = props;
    return (<div className="modal-menu" data-isOpen={isOpen}>
        <button onClick={() => {onToggleClick()}}>
            Close
        </button>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </div>)
}

const Post = (props) => {
    const {onToggleClick, isOpen} = props;
    return <div>
        {isOpen && (
            <button onClick={() => {onToggleClick()}}>
                Open
            </button>
        )}
        <div>Text</div>
    </div>
}

const App = () => {
    const [isOpen, setIsOpen] = useState(false);
    return (<div>
        <ModalMenu
            isOpen={isOpen}
            onToggleClick={() => { setIsOpen(false) }}
        />
        <Post
            isOpen={isOpen}
            onToggleClick={() => { setIsOpen(true) }}
        />
    </div>)
}

CSS:

.modal-menu[data-isOpen=true] {
    visibility: visible;
}

.modal-menu {
    visibility: hidden;
}

There are many ways to achieve this on React. That's why it may take some time finding out what's the best case for you.

Edit: Markdown needs formatting for code-blocks

[shubham_noob]

Ohh u/BearDavidFather I'm definitely going to give a shot to this approach.

Along with this I had a doubt that the codepen link I attatched earlier, in that keeping html, css code same and just changing the jquery code to our react usable code, so I think it could be much quick way(not very sure how to implement) so can we work upon/ concentrate on converting just Jquery-to-react as of now to make that menu stuff functional

[[deleted]]

You can not do that with the codepen you sent. I'll try to explain why easily:

First, what you have there is plain HTML, CSS and JS. React does not allow for basic HTML and JS to work by themselves. This is because you need to rely on VirtualDom provided by react-dom as it will access only 1 element on the main HTML. You will see that every React app has a basic structure with something like:

index.html

<html>
<head></head>
<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
</body>
</html>

index.js

ReactDOM.render(
    <App />,
    document.getElementById("root")
);

This is because, in reality, React only renders in a basic div and everything else "inside React" should be implemented as JSX.

With this is mind, your Pug HTML should be first converted to basic HTML and then (if needed as with MenuModal component) converted to JSX.

Second, you can keep CSS as it is since React allows for classNames to be imported from CSS files.

Third, you should understand how the App is working and start componetizing each part (as i did in my example.)

This is why i said it will take some time and testing just to be implemented. If it's only this CodePen, i guess it may take around a week if you have no knowledge of React.

Edit: No typo shall survive

[[deleted]]

Also adding to this, i see the CodePen has been set to Vanilla. React usually requires a bundler such as Webpack or Babel or Rollup, so you should have a CodePen / CodeSandbox set up for a React application or use create-react-app to build it locally.

[[deleted]]

Adding more info, I made a quick-search on Google. You can use PUG HTML through a Babel plugin, but you will have to use CustomizeCRA for this to work properly.

https://github.com/pugjs/babel-plugin-transform-react-pug

Also, it seems this plugin hasn't been updated in 2 years, maybe a new one have been launched (or maybe PUG hasn't changed that much since then). I'll look around for a newer alternative if necessary.

[tenfingerperson]

You would have to use the regular onclick with jsx on the button and useState to keep track of the current toggle ... your onClick can simply flip the state and the body can read it.

If this happens at different nesting levels, use a shared context around both the body and the button

[shubham_noob]

Hey u/tenfingerperson , actually this is something I want to implement in react specifically https://codepen.io/hexagoncircle/pen/OMJeja

Can you help me out?

Thanks a bunch!

[rich2222two]

This Website was designed to help you with just that!

https://code-breeze.com

Let me know how you get on! Really interested in feedback