Merge pull request #37 from chingu-voyage4/feature-pageHeader-#31

Feature page header #31

src/app.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PageHeader from './components/PageHeader';
+
+ReactDOM.render(<PageHeader />, document.getElementById('app'));

src/components/PageHeader.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const PageHeader = () => (
+  <div>
+    <img
+      src="https://i.imgur.com/j7ArnQ5.png"
+      alt="logo goes here"
+      style={{ height: '50px', width: '50px', float: 'left' }}
+    />
+    <div style={{ float: 'right' }}>
+      <button>Sign in</button>
+      <button>Create account</button>
+    </div>
+  </div>
+);
+
+export default PageHeader;

webpack.config.js

@@ -1,27 +1,31 @@
 // entry point -> output file
 
-const path = require("path");
+const path = require('path');
 
 module.exports = {
-  entry: "./src/app.js",
+  entry: './src/app.jsx',
   output: {
-    path: path.join(__dirname, "public"),
-    filename: "bundle.js"
+    path: path.join(__dirname, 'public'),
+    filename: 'bundle.js',
   },
   module: {
     rules: [
       {
-        loader: "babel-loader",
-        test: /\.js$/,
-        exclude: /node_modules/
+        loader: 'babel-loader',
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
       },
       {
         test: /\.s?css$/,
-        use: ["style-loader", "css-loader", "sass-loader"]
-      }
-    ]
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      },
+    ],
   },
   devServer: {
-    contentBase: path.join(__dirname, "public")
-  }
+    contentBase: path.join(__dirname, 'public'),
+  },
+  resolve: {
+    modules: ['node_modules'],
+    extensions: ['.js', '.json', '.jsx'],
+  },
 };