Merge pull request #1 from spartansystems/feature/display-image

Feature/display image

js/components/Image/component.js

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class Image extends Component {
+  render() {
+    return (
+      <section className={this.props.className}>
+        <img src={this.props.file} />
+      </section>
+    )
+  }
+}

js/components/Image/index.js

@@ -0,0 +1,3 @@
+import component from './component'
+
+export default component

js/pages/Main/component.js

@@ -1,12 +1,16 @@
 import React from 'react'
 import Links from '../../components/Links'
+import Image from '../../components/Image'
+import bigCat from './assets/big_cat.jpeg'
+import styles from './styles.css'
 
 class Main extends React.Component {
   render() {
     return (
       <div>
         <Links />
         {this.props.children}
+        <Image className={styles.imageSize} file={bigCat} />
       </div>
     )
   }

js/pages/Main/styles.css

@@ -1,3 +1,8 @@
 .body {
   background: blue;
 }
+
+.imageSize img {
+  max-height: 200px;
+  max-width: 200px;
+}

package.json

@@ -15,7 +15,9 @@
   "devDependencies": {
     "autoprefixer": "^6.5.0",
     "babel-loader": "^6.2.5",
+    "babel-preset-es2015": "^6.16.0",
     "css-loader": "^0.25.0",
+    "file-loader": "^0.9.0",
     "html-webpack-plugin": "^2.22.0",
     "jsx-loader": "^0.13.2",
     "postcss-loader": "^0.13.0",

webpack.config.js

@@ -38,6 +38,10 @@ module.exports = {
         ),
         include: __dirname + '/js'
       },
+      {
+        test: /\.jpeg$/,
+        loader: 'file-loader'
+      },
       {
         test: /\.js$/,
         exclude: /node_modules/,