は、私はこのコードを持っているReactJSに、このjQueryのコードを追加します（またはリアクトためのコードを書き換える）

Question

ComponentDidMountについて読んでいますが、私はそれをとても理解していません...私はこの援助の手を必要としていますか？

$(function() { 
 

 
    $('#login-form-link').click(function(e) { 
 
    \t $("#login-form").delay(100).fadeIn(100); 
 
    \t \t $("#register-form").fadeOut(100); 
 
\t \t $('#register-form-link').removeClass('active'); 
 
\t \t $(this).addClass('active'); 
 
\t \t e.preventDefault(); 
 
\t }); 
 
\t $('#register-form-link').click(function(e) { 
 
\t \t $("#register-form").delay(100).fadeIn(100); 
 
    \t \t $("#login-form").fadeOut(100); 
 
\t \t $('#login-form-link').removeClass('active'); 
 
\t \t $(this).addClass('active'); 
 
\t \t e.preventDefault(); 
 
\t }); 
 

 
});

.panel-login { 
 
    border-color: #ccc; 
 
\t -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2); 
 
\t -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2); 
 
\t box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2); 
 
    margin-top: 140px; 
 
    padding-bottom: 50px; 
 
} 
 
.panel-login>.panel-heading { 
 
\t color: #00415d; 
 
\t background-color: #fff; 
 
\t border-color: #fff; 
 
\t text-align:center; 
 
} 
 
.panel-login>.panel-heading a{ 
 
\t text-decoration: none; 
 
\t color: #666; 
 
\t font-weight: bold; 
 
\t font-size: 15px; 
 
\t -webkit-transition: all 0.1s linear; 
 
\t -moz-transition: all 0.1s linear; 
 
\t transition: all 0.1s linear; 
 
} 
 
.panel-login>.panel-heading a.active{ 
 
\t color: #029f5b; 
 
\t font-size: 18px; 
 
} 
 
.panel-login>.panel-heading hr{ 
 
\t margin-top: 10px; 
 
\t margin-bottom: 0px; 
 
\t clear: both; 
 
\t border: 0; 
 
\t height: 1px; 
 
\t background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0)); 
 
\t background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0)); 
 
\t background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0)); 
 
\t background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0)); 
 
} 
 
.panel-login input[type="text"],.panel-login input[type="email"],.panel-login input[type="password"] { 
 
\t height: 45px; 
 
\t border: 1px solid #ddd; 
 
\t font-size: 16px; 
 
\t -webkit-transition: all 0.1s linear; 
 
\t -moz-transition: all 0.1s linear; 
 
\t transition: all 0.1s linear; 
 
} 
 
.panel-login input:hover, 
 
.panel-login input:focus { 
 
\t outline:none; 
 
\t -webkit-box-shadow: none; 
 
\t -moz-box-shadow: none; 
 
\t box-shadow: none; 
 
\t border-color: #ccc; 
 
} 
 
.btn-login { 
 
\t background-color: #59B2E0; 
 
\t outline: none; 
 
\t color: #fff; 
 
\t font-size: 14px; 
 
\t height: auto; 
 
\t font-weight: normal; 
 
\t padding: 14px 0; 
 
\t text-transform: uppercase; 
 
\t border-color: #59B2E6; 
 
} 
 
.btn-login:hover, 
 
.btn-login:focus { 
 
\t color: #fff; 
 
\t background-color: #53A3CD; 
 
\t border-color: #53A3CD; 
 
} 
 
.forgot-password { 
 
\t text-decoration: underline; 
 
\t color: #888; 
 
} 
 
.forgot-password:hover, 
 
.forgot-password:focus { 
 
\t text-decoration: underline; 
 
\t color: #666; 
 
} 
 

 
.btn-register { 
 
\t background-color: #1CB94E; 
 
\t outline: none; 
 
\t color: #fff; 
 
\t font-size: 14px; 
 
\t height: auto; 
 
\t font-weight: normal; 
 
\t padding: 14px 0; 
 
\t text-transform: uppercase; 
 
\t border-color: #1CB94A; 
 
} 
 
.btn-register:hover, 
 
.btn-register:focus { 
 
\t color: #fff; 
 
\t background-color: #1CA347; 
 
\t border-color: #1CA347; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div className="container"> 
 
     <div className="row"> 
 
      <div className="col-md-6 col-md-offset-3"> 
 
      <div className="panel panel-login"> 
 
       <div className="panel-heading"> 
 
       <div className="row"> 
 
        <div className="col-xs-6"> 
 
        <a href="#" className="active" id="login-form-link">Login</a> 
 
        </div> 
 
        <div className="col-xs-6"> 
 
        <a href="#" id="register-form-link">Register</a> 
 
        </div> 
 
       </div> 
 
       <hr /> 
 
       </div> 
 
       <div className="panel-body"> 
 
       <div className="row"> 
 
        <div className="col-lg-12"> 
 
        <form id="login-form" action="http://phpoll.com/login/process" method="post" role="form" style={{display: 'block'}}> 
 
         <div className="form-group"> 
 
         <input type="text" name="username" id="username" tabIndex={1} className="form-control" placeholder="Username" defaultValue /> 
 
         </div> 
 
         <div className="form-group"> 
 
         <input type="password" name="password" id="password" tabIndex={2} className="form-control" placeholder="Password" /> 
 
         </div> 
 
         <div className="form-group text-center"> 
 
         <input type="checkbox" tabIndex={3} className name="remember" id="remember" /> 
 
         <label htmlFor="remember"> Remember Me</label> 
 
         </div> 
 
         <div className="form-group"> 
 
         <div className="row"> 
 
          <div className="col-sm-6 col-sm-offset-3"> 
 
          <input type="submit" name="login-submit" id="login-submit" tabIndex={4} className="form-control btn btn-login" defaultValue="Log In" /> 
 
          </div> 
 
         </div> 
 
         </div> 
 
         <div className="form-group"> 
 
         <div className="row"> 
 
          <div className="col-lg-12"> 
 
          <div className="text-center"> 
 
           <a href="http://phpoll.com/recover" tabIndex={5} className="forgot-password">Forgot Password?</a> 
 
          </div> 
 
          </div> 
 
         </div> 
 
         </div> 
 
        </form> 
 
        <form id="register-form" action="http://phpoll.com/register/process" method="post" role="form" style={{display: 'none'}}> 
 
         <div className="form-group"> 
 
         <input type="text" name="username" id="username" tabIndex={1} className="form-control" placeholder="Username" defaultValue /> 
 
         </div> 
 
         <div className="form-group"> 
 
         <input type="email" name="email" id="email" tabIndex={1} className="form-control" placeholder="Email Address" defaultValue /> 
 
         </div> 
 
         <div className="form-group"> 
 
         <input type="password" name="password" id="password" tabIndex={2} className="form-control" placeholder="Password" /> 
 
         </div> 
 
         <div className="form-group"> 
 
         <input type="password" name="confirm-password" id="confirm-password" tabIndex={2} className="form-control" placeholder="Confirm Password" /> 
 
         </div> 
 
         <div className="form-group"> 
 
         <div className="row"> 
 
          <div className="col-sm-6 col-sm-offset-3"> 
 
          <input type="submit" name="register-submit" id="register-submit" tabIndex={4} className="form-control btn btn-register" defaultValue="Register Now" /> 
 
          </div> 
 
         </div> 
 
         </div> 
 
        </form> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      <Link className="col-lg-3 back-about" to={'./'}>&lt;&lt; Back to HomePage </Link> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div>

Answer 1

私はそれを得た!!!!

componentDidMount() { 
     $(function() { 

    $('#login-form-link').click(function(e) { 
     $("#login-form").delay(100).fadeIn(100); 
     $("#register-form").fadeOut(100); 
     $('#register-form-link').removeClass('active'); 
     $(this).addClass('active'); 
     e.preventDefault(); 
    }); 
    $('#register-form-link').click(function(e) { 
     $("#register-form").delay(100).fadeIn(100); 
     $("#login-form").fadeOut(100); 
     $('#login-form-link').removeClass('active'); 
     $(this).addClass('active'); 
     e.preventDefault(); 
    }); 

}); 

    } 

：

私がやったことをすべて、ファイル

でCMD /ターミナル

とimport $ from 'jquery';で

npm install jquery 

とは、これを追加しました