home.js

import React, {Component} from 'react';

class Home extends Component {
    render() {
        return (
            <div className='home'>
                <p>Komt nog</p>
            </div>
        );
    }
}

export default Home;

index.js

import React from 'react';
import { render } from 'react-dom';
import './style.css'
import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch
} from 'react-router-dom'

import Login from './components/Login/login';
import Home from './components/Home/home'

render((
    <Router>
        <Switch>
            <Route exact path="/" component={Login}/>
            <Route path="/home" component={Home}/>
            /* Meer wordt toegevoegd als er meer pagina's klaar zijn */

        </Switch>
    </Router>
), document.getElementById('root'))

login.js

import React, {Component} from 'react';
import { Link } from 'react-router-dom'

const props = {
    schoolName: "Ludger College"
};

class Login extends Component {
    render() {


        return (
            <div className='login'>
                <div className="login-container">
                  <div className="login-box">
                    <a className="dalta-title">DALTA</a>
                    <a className="school-name">{props.schoolName}</a>
                    <form>
                      <div className="inputs">
                        <input type="text" placeholder="Gebruikersnaam"/>
                          <input type="password" placeholder="Wachtwoord"/>
                      </div>
                        <button>Doorgaan ></button>
                        <a className="forgotPswrd">Wachtwoord vergeten?</a>
                    </form>

                  </div>
                </div>
            </div>
    );

    }
}

export default Login;

// Later doorlinken naar '/home' !!