From 4366e42a0eae132ccd16c93a403fd8928f452275 Mon Sep 17 00:00:00 2001 From: Zac McClung Date: Wed, 2 Aug 2017 22:40:26 -0600 Subject: [PATCH] Loaded JSON data and SHowCard component --- index.html | 5 +++-- js/ClientApp.jsx | 32 ++++++++++++++++---------------- js/Landing.jsx | 12 ++++++++++++ js/Search.jsx | 12 ++++++++++++ js/ShowCard.jsx | 14 ++++++++++++++ package.json | 1 + webpack.config.js | 24 +++++++++++++++++------- 7 files changed, 75 insertions(+), 25 deletions(-) create mode 100644 js/Landing.jsx create mode 100644 js/Search.jsx create mode 100644 js/ShowCard.jsx diff --git a/index.html b/index.html index 41394a63c..0f8284ae4 100644 --- a/index.html +++ b/index.html @@ -2,10 +2,11 @@ - svideo + zvideo +
- + diff --git a/js/ClientApp.jsx b/js/ClientApp.jsx index 535d741b4..6db2fe9bc 100644 --- a/js/ClientApp.jsx +++ b/js/ClientApp.jsx @@ -1,21 +1,21 @@ import React from 'react'; import { render } from 'react-dom'; +import { BrowserRouter, Route, Switch } from 'react-router-dom'; +import Landing from './Landing'; +import Search from './Search'; -const ce = React.createElement; +const FourOhFour = () =>

404

; -const MyTitle = function(props) { - return ce('div', null, ce('h1', { style: { color: props.color } }, props.title)); -}; +const App = () => ( + +
+ + + + + +
+ +); -const MyFirstComponent = function() { - return ce( - 'div', - { id: 'my-first-component' }, - ce(MyTitle, { title: 'Game of Thrones', color: 'YellowGreen' }), - ce(MyTitle, { title: 'Stranger Things', color: 'GreenYellow' }), - ce(MyTitle, { title: 'Rick and Morty', color: 'LimeGreen' }), - ce(MyTitle, { title: 'House of Cards', color: 'peru' }) - ); -}; - -render(ce(MyFirstComponent), document.getElementById('app')); +render(, document.getElementById('app')); diff --git a/js/Landing.jsx b/js/Landing.jsx new file mode 100644 index 000000000..4a722ff33 --- /dev/null +++ b/js/Landing.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +const Landing = () => ( +
+

zvideo

+ + or Browse All +
+); + +export default Landing; diff --git a/js/Search.jsx b/js/Search.jsx new file mode 100644 index 000000000..941b90554 --- /dev/null +++ b/js/Search.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import ShowCard from './ShowCard'; +import preload from '../data.json'; + + +const Search = () => ( +
+ {preload.shows.map(show => ) } +
+); + +export default Search; diff --git a/js/ShowCard.jsx b/js/ShowCard.jsx new file mode 100644 index 000000000..67f7bef5a --- /dev/null +++ b/js/ShowCard.jsx @@ -0,0 +1,14 @@ +import React from 'react' + +const ShowCard = props => ( +
+ {`${props.show.title} +
+

{props.show.title}

+

({props.show.year})

+

{props.show.description}

+
+
+); + +export default ShowCard; diff --git a/package.json b/package.json index dbb4bb7a6..e74606c20 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "scripts": { "api": "node ratingsAPI.js", "build": "webpack", + "dev": "webpack-dev-server", "format": "prettier --write --single-quote --print-width=120 --parser=flow --tab-width=2 \"js/**/*.{js,jsx}\"", "lint": "eslint **/*.{js,jsx} --quiet", "watch": "webpack --watch" diff --git a/webpack.config.js b/webpack.config.js index 6a66b13eb..0367fb50c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,22 +6,32 @@ module.exports = { devtool: 'cheap-eval-source-map', output: { path: path.join(__dirname, 'public'), - filename: 'bundle.js' + filename: 'bundle.js', + }, + devServer: { + publicPath: '/public/', + historyApiFallback: true, }, resolve: { - extensions: ['.js', '.jsx', '.json'] + extensions: ['.js', '.jsx', '.json'], }, stats: { colors: true, reasons: true, - chunks: true + chunks: true, }, module: { rules: [ + { + enforce: 'pre', + test: /\.jsx?$/, + loader: 'eslint-loader', + exclude: /node_modules/, + }, { test: /\.jsx?$/, - loader: 'babel-loader' - } - ] - } + loader: 'babel-loader', + }, + ], + }, };