[英]Rendering with reactjs
I am creating a sample app using reactjs.我正在使用 reactjs 创建一个示例应用程序。 I am very new in reactjs.
我对 reactjs 很陌生。 I set up all the things for reactjs like 1) Babel 2)Webpack
我为 reactjs 设置了所有东西,比如 1) Babel 2)Webpack
Using webpack I am genrating a file code.js which is included in the index file where all the code runs.使用 webpack 我正在生成一个文件 code.js,它包含在所有代码运行的索引文件中。
I am creating my first page but i got error like:我正在创建我的第一页,但出现如下错误:
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)
I dont know why the html rendering gives me error.我不知道为什么 html 渲染给我错误。 My code is like:
我的代码是这样的:
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>
)
}
}
Please help me to solve this problem请帮我解决这个问题
There is at least one more problem: You used class= instead of className= everywhere.至少还有一个问题:您在任何地方都使用 class= 而不是 className=。 Obviously you did try to copy & paste html code.
显然,您确实尝试复制和粘贴 html 代码。 There is a great online converter which i use.
我使用了一个很棒的在线转换器。 It allows you to do that without errors: http://magic.reactjs.net/htmltojsx.htm
它使您可以毫无错误地做到这一点: http : //magic.reactjs.net/htmltojsx.htm
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>
)
}
}
Hope you found this useful.希望你觉得这很有用。
The error clearly mentions what needs to be done.该错误清楚地提到了需要做什么。 In JSX you need to close the singleton tags like
<br>
, <img>
and <input>
在 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>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.