hugo

src/App.js

@@ -3,10 +3,10 @@ import {
     Route, NavLink, HashRouter
 } from 'react-router-dom'
 import './app.css';
-import Modern from './Militaer';
+import PlaneList from './PlaneList';
 import Home from './Home';
 import UeberHugo from './UeberHugo'
-import Planes from "./Planes";
+import Planes from "./PlaneInfo";
 
 class App extends Component {
     render() {
@@ -20,7 +20,8 @@ class App extends Component {
                     <main>
                         <Route exact path="/" component={Home}/>
                         <Route exact path="/hugo" component={UeberHugo}/>
-                        <Route path="/militaer/modern" component={Modern}/>
+                        <Route path="/militaer/modern" component={PlaneList}/>
+                        <Route path="/flugzeuge" component={Planes}/>
                         <Route path="/flugzeug" component={Planes}/>
                     </main>
                     <Footer/>

src/Home.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import ModelImage from './Plane';
+import ModelImage from './PlanePreview';
 import planes from './planes.json'
 
 class Home extends Component {

src/PlaneInfo.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
-import planes from './planes.json'
+import planes from './planes.json';
+import './plane.css';
 
 class Planes extends Component {
     render() {
@@ -25,7 +26,7 @@ class Planes extends Component {
             content =
                 <div>
                     <h2>{plane.name}</h2>
-                    <img src={imgPath} alt={'Bild von ' + plane.name}/>
+                    <img src={imgPath} alt={'Bild von ' + plane.name} className="plane-image"/>
                     <p>{plane.description}</p>
                 </div>
             ;

src/PlaneList.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import ModelImage from './Plane'
+import React, {Component} from 'react';
+import ModelImage from './PlanePreview'
 
 
-class Modern extends React.Component {
+class PlaneList extends Component {
     render() {
         const items = Array(100).fill(1).map((x, y) => x + y)
             .map(x => <ModelImage src="military/modern/f22.png" name={'F' + (20 + x) + ' Raptor'}/>);
@@ -16,4 +16,4 @@ class Modern extends React.Component {
     }
 }
 
-export default Modern;
+export default PlaneList;

src/PlanePreview.js

@@ -1,8 +1,8 @@
 import React, {Component} from 'react';
 import {
-    Route, NavLink, HashRouter
+    NavLink
 } from 'react-router-dom'
-import './Plane.css'
+import './plane_preview.css'
 
 
 class ModelImage extends Component {

src/plane.css

@@ -0,0 +1,3 @@
+.plane-image {
+    height: 500px;
+}