我是 React 的新手，我想将普通的 javascript 代码转换为 React，我不知道该怎么做

Question

this is my react java script where i want to insert the normal js code. I have tried by using the {} brackets but that won't run.

import './App.css';


function App() {
  


  return (
    
    <>
    <div className="container"></div><div className="box">
      <div className="wrapper">
        <div className="form-wrapper sign-in">
          <form action="">
            <h2 className="he">Login</h2>
            <div className="input-group">
              <input className="ip1" type="text" required/>
                <label for="">Username</label>
                <i></i>
              </div>
            <div className="input-group">
              <input type="password" required/>
                <label for="">Password</label>
                <i></i>
              </div>
  
            <button type="submit">Login</button>
            <div className="signUp-link">
              <p className="p1">Don't have an account? <a href="#" className="signUpBtn-link">Sign Up</a></p>
            </div>
          </form>
        </div>

        <div className="form-wrapper sign-up">
          <form action="">
            <h2 className="he2">Sign Up</h2>
            <div className="input-group">
              <input type="text" required/>
                <label for="">Username</label>
                <i></i>
              </div>
            <div className="input-group">
              <input type="text" required/>
                <label for="">Email</label>
                <i></i>
           
            <button type="submit">Sign Up</button>
            <div className="signUp-link">
              <p>Already have an account? <a href="#" className="signInBtn-link">Sign In</a></p>
            </div>
          </form>
        </div>
      </div>
    </div></>
 );
}
export default App;

This is the code that i wanto to merge. I Want to merge the following code in the above code. I have a normal javaScript code but i don't know how to write it in the React

const signInBtnLink = document.querySelector('.signInBtn-link');
const signUpBtnLink = document.querySelector('.signUpBtn-link');
const wrapper = document.querySelector('.wrapper');

signUpBtnLink.addEventListener('click', () => {
    wrapper.classList.toggle('active');
});

signInBtnLink.addEventListener('click', () => {
    wrapper.classList.toggle('active');
});

Answer 1

Welcome to the world of react js,!, start your leanings here react js