Javascript 使用reactjs进行渲染

我正在使用reactjs创建一个示例应用程序。我是个新手。我为你准备了所有的东西 1） 巴别塔 2） 网页包

我使用webpack生成一个code.js文件，它包含在所有代码运行的索引文件中

我正在创建我的第一页，但出现了如下错误：

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)

./components/Login/Login.js中的

错误
模块构建失败：语法错误：C:/xampp/htdocs/reactApp/components/Login/Logi
n、 js：预期的对应JSX结束标记（18:33）

我不知道为什么html呈现给我错误。 我的代码如下：

import React，{Component}来自'React'；
从“反应路由器”导入{Link}
导出默认类Home extends组件{
渲染（）{
返回(
登录

或

你还没有账户吗

)
}
}

---

请帮我解决这个问题

错误清楚地提到了需要做什么。在JSX中，您需要关闭单例标记，如

、

和

import React，{Component}来自'React'；
从“反应路由器”导入{Link}
导出默认类Home extends组件{
渲染（）{
返回(
登录

或

你还没有账户吗

)
}
}

至少还有一个问题：您在任何地方都使用class=而不是className=。显然，您确实尝试过复制和粘贴html代码。有一个伟大的在线转换器，我使用。它允许您在没有错误的情况下执行此操作：

import React，{Component}来自'React'；
从“反应路由器”导入{Link}
导出默认类Home extends组件{
渲染（）{
返回(
登录

)
}
}

---

希望你觉得这个有用

只是读取错误

img

未关闭，使用

这也意味着输入标记未关闭？？？@Karan好吧，你要做什么？@Karan-它被命名为JSX是有原因的。这是一种类似XML的语法，因此即使它是br或img等空HTML元素，也要确保它有结束标记。如果您使用适当的presets@ShubhamKhatri哦我不知道这种配置：）无论如何，我发现事实上，

class

在过去是可用的，但是react团队决定停止使用

class

和

for

，转而使用

className

和

htmlFor

：我认为从现在开始避免这种标记是合理的

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>
    )
  }
}

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>
    )
  }
}

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

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

    )
}
}