reactjsを使用したレンダリング

Question

私はreactjsを使用してサンプルアプリケーションを作成しています。私はreactjsで非常に新しいです。 のような反応をすべて設定しました。1）Babel 2）Webpack

webpackを使用しています。

私は私の最初のページを作成していますが、私のようなエラーが発生しました：私は、HTMLのレンダリングは私にエラーを与える理由を知らない

ERROR in ./components/Login/Login.js 
Module build failed: SyntaxError: C:/xampp/htdocs/reactApp/components/Login/Logi 
n.js: Expected corresponding JSX closing tag for <img> (18:33) 

。 私のコードは次のようである：

import React, {Component} from 'react'; 
import {Link} from 'react-router' 
export default class Home extends Component { 

     render() { 
    return (
     <div class="page-content container"> 
     <div class="row"> 
      <div class="col-md-4 col-md-offset-4"> 
       <div class="login-wrapper"> 
        <div class="box"> 
         <div class="content-wrap"> 
          <h6>Sign In</h6> 
          <div class="social"> 
           <a class="face_login" href="#"> 
            <span class="face_icon"> 
             <img src="images/facebook.png" alt="fb"> 
            </span> 
            <span class="text">Sign in with Facebook</span> 
           </a> 
           <div class="division"> 
            <hr class="left"> 
            <span>or</span> 
            <hr class="right"> 
           </div> 
          </div> 
          <input class="form-control" type="text" placeholder="E-mail address"> 
          <input class="form-control" type="password" placeholder="Password"> 
          <div class="action"> 
           <a class="btn btn-primary signup" href="index.html">Login</a> 
          </div>     
         </div> 
        </div> 

        <div class="already"> 
         <p>Dont have an account yet?</p> 
         <a href="signup.html">Sign Up</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    ) 
    } 
} 

Answer 1

にエラーが発生し、この問題を解決するために私を助けてください明確に何をすべきか言及しています。 JSXでは、<br>、<img>と<input>

import React, {Component} from 'react'; 
import {Link} from 'react-router' 
export default class Home extends Component { 

     render() { 
    return (
     <div class="page-content container"> 
     <div class="row"> 
      <div class="col-md-4 col-md-offset-4"> 
       <div class="login-wrapper"> 
        <div class="box"> 
         <div class="content-wrap"> 
          <h6>Sign In</h6> 
          <div class="social"> 
           <a class="face_login" href="#"> 
            <span class="face_icon"> 
             <img src="images/facebook.png" alt="fb" /> 
            </span> 
            <span class="text">Sign in with Facebook</span> 
           </a> 
           <div class="division"> 
            <hr class="left"> 
            <span>or</span> 
            <hr class="right"> 
           </div> 
          </div> 
          <input class="form-control" type="text" placeholder="E-mail address" /> 
          <input class="form-control" type="password" placeholder="Password" /> 
          <div class="action"> 
           <a class="btn btn-primary signup" href="index.html">Login</a> 
          </div>     
         </div> 
        </div> 

        <div class="already"> 
         <p>Dont have an account yet?</p> 
         <a href="signup.html">Sign Up</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    ) 
    } 
} 

Answer 2

、少なくとももう1つの問題があるようにシングルトンのタグを閉じる必要があります：あなたはどこにでも=の代わりにクラス名=のクラスを使用していました。明らかに、&のHTMLコードを貼り付けようとしました。私が使用する素晴らしいオンラインコンバータがあります。エラーなしでこれを行うことができます：http://magic.reactjs.net/htmltojsx.htm