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

Question

这是我的 react java 脚本，我想在其中插入普通的 js 代码。 我已尝试使用 {} 括号，但无法运行。

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;

这是我想合并的代码。 我想在上面的代码中合并以下代码。 我有一个正常的 javaScript 代码，但我不知道如何在 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

欢迎来到 React js 的世界！，从这里开始学习 React js