adding React JSS

Author: joeshub

11-react-jss/button/App.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import pkg from './package.json'
+import Button from './Button'
+
+export default class App extends Component {
+
+  state = {
+    depressed: false
+  }
+
+  onButtonClicked = () => this.setState({
+    depressed: !this.state.depressed
+  })
+
+  render () {
+    const { depressed } = this.state
+
+    return (
+      <main>
+        <p>{pkg.description}</p>
+        <Button
+          onClick={ this.onButtonClicked }
+          depressed={ depressed }
+        >Button</Button>
+      </main>
+    )
+  }
+}

11-react-jss/button/Button.js

@@ -0,0 +1,49 @@
+import React, { Component } from 'react'
+import injectSheet  from 'react-jss'
+
+const styles = {
+  btn: {
+    display: 'inline-block',
+    outline: 'none',
+    textAlign: 'center',
+    font: 'bold 32px helvetica',
+    padding: '20px 40px',
+    border: 0,
+    cursor: 'pointer',
+    color: '#fff',
+    transition: 'background-color 300ms',
+    transform: 'translateZ(0)',
+    backfaceVisibility: 'visible',
+    backgroundColor: props => props.depressed ? props.bgDepressed : props.bgColor,
+    '&:hover': {
+      backgroundColor: props => props.depressed ? props.bgDepressed : props.bgHover
+    }
+  }
+}
+
+class Button extends Component {
+
+  static defaultProps = {
+    bgColor: '#ec4800',
+    bgHover: '#f98d00',
+    bgDepressed: '#bebebe'
+  }
+
+  onButtonClicked = () => {
+    this.props.onClick && this.props.onClick()
+  }
+
+  render () {
+    const { depressed, classes, bgColor, bgHover, bgDepressed, ...otherProps } = this.props
+
+    return (
+      <button
+        className={ classes.btn }
+        onClick={ this.onButtonClicked }
+        { ...otherProps }
+      />
+    )
+  }
+}
+
+export default injectSheet(styles)(Button)

11-react-jss/button/entry.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { AppContainer } from 'react-hot-loader'
+import App from './App'
+
+render (
+  <AppContainer>
+    <App />
+  </AppContainer>, 
+  document.getElementById('app')
+)
+
+// Hot Module Replacement API
+if (module.hot) {
+  module.hot.accept('./App', () => {
+    const NextApp = require('./App').default
+    render(
+      <AppContainer>
+        <NextApp/>
+      </AppContainer>,
+      document.getElementById('app')
+    )
+  })
+}

11-react-jss/button/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "react-jss-button",
+  "version": "1.0.0",
+  "description": "Button - React JSS",
+  "author": "Joe Seifi",
+  "license": "ISC",
+  "main": "build/app.js",
+  "scripts": {
+    "start": "../../node_modules/.bin/cross-env NODE_ENV=development node ../../scripts/server-button.js",
+    "build": "../../node_modules/.bin/cross-env NODE_ENV=production ../../node_modules/.bin/webpack --config webpack.build.js --progress --colors"
+  },
+  "devDependencies": {
+    "babel-core": "^6.23.1",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.3.2",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-polyfill": "^6.23.0",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-react": "^6.23.0",
+    "babel-preset-stage-0": "^6.22.0",
+    "cross-env": "^3.1.4",
+    "css-loader": "^0.26.1",
+    "eslint": "^3.15.0",
+    "eslint-plugin-react": "^6.10.0",
+    "express": "^4.14.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "html-webpack-plugin": "^2.28.0",
+    "json-loader": "^0.5.4",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "react-jss": "^8.3.3",
+    "style-loader": "^0.13.1",
+    "webpack": "^2.2.1",
+    "webpack-dev-middleware": "^1.10.1",
+    "webpack-hot-middleware": "^2.17.0"
+  }
+}

11-react-jss/button/webpack.build.js

@@ -0,0 +1,38 @@
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  entry: ['babel-polyfill','./entry.js'],
+  output: {
+    path: path.join(__dirname + '/build'),
+    filename: 'app.js',
+    publicPath: ''
+  },
+  plugins: [
+    new HtmlWebpackPlugin({ inject: true, template: '../../templates/plain.ejs' }),
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': {
+        'NODE_ENV': JSON.stringify('production')
+      }
+    })
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: 'babel-loader'
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader','css-loader']
+      },
+      {
+        test: /\.json$/,
+        use: 'json-loader'
+      }
+    ]
+  }
+}

11-react-jss/button/webpack.config.js

@@ -0,0 +1,43 @@
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var settings = require('../../scripts/settings.js')
+var devServer = settings.devServer
+
+module.exports = {
+  devServer: devServer,
+  devtool: 'source-map',
+  entry: [
+    'react-hot-loader/patch',
+    'webpack-hot-middleware/client?reload=1',
+    'babel-polyfill',
+    './entry'
+  ],
+  output: {
+    path: path.join(__dirname),
+    filename: 'bundle.js',
+    publicPath: '/'
+  },
+  plugins: [
+    new HtmlWebpackPlugin({ inject: true, template: '../../templates/server.ejs' }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin()
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: 'babel-loader'
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader','css-loader']
+      },
+      {
+        test: /\.json$/,
+        use: 'json-loader'
+      }
+    ]
+  }
+}