I created a Reactjs app by create-react-app .
... but the components are not shown in the page, I think it is probably because App.js is not rendering the components?
Here is my code:
App.js
import React, { Component } from 'react';
import './App.css';
import login from "./containers/login/login";
class App extends Component {
render() {
return (
<div className="App">
<login/>
</div>
);
}
}
export default App;
/containers/login/login.js
import React, { Component } from 'react';
import "./login.css";
class login extends Component {
render() {
return (
<div className="headings">
<form action="">
Username <br/>
<input type="text" name="userrname" />
<br/>
Password <br/>
<input type="password" name="password" />
<br/>
<input type="submit" value="Login" />
</form>
</div>
);
}
}
export default login;
The component in the browser is like this:
<login></login>
Your own component need to start with a capital letter, or Babel will treat them as strings .
Rename the variable to Login
and it will work.
import Login from "./containers/login/login";
class App extends Component {
render() {
return (
<div className="App">
<Login />
</div>
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.