React Component пуст на веб-странице

Question

Я создал приложение Reactjs с помощью create-Reaction-app .

... но компоненты не отображаются на странице, я думаю, что это, вероятно, потому что App.jsне рендерит компоненты?

Вот мой код:

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;

/ container / 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;

Компонент в браузере выглядит так:

<login></login>

Answer 1

Ваш собственный компонент должен начинаться с заглавной буквы, или Babel будет рассматривать их как строки .

Переименуйте переменную в Login, и она будет работать.

import Login from "./containers/login/login";

class App extends Component {
  render() {
    return (
      <div className="App">
        <Login />
      </div>
    );
  }
}