commit
d382fdd8fa
11 changed files with 574 additions and 0 deletions
@ -0,0 +1,4 @@ |
||||
{ |
||||
"presets": ["react"], |
||||
"plugins": ["transform-object-rest-spread", "react-hot-loader/babel"] |
||||
} |
@ -0,0 +1,31 @@ |
||||
# See https://help.github.com/ignore-files/ for more about ignoring files. |
||||
|
||||
# Dependencies |
||||
node_modules/ |
||||
|
||||
# Compiled output |
||||
bundle.js |
||||
|
||||
# Runtime data |
||||
database.sqlite |
||||
|
||||
# Test coverage |
||||
coverage |
||||
.nyc_output |
||||
|
||||
# Logs |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
|
||||
# Editors and IDEs |
||||
.idea |
||||
.vscode/* |
||||
!.vscode/settings.json |
||||
!.vscode/tasks.json |
||||
!.vscode/launch.json |
||||
!.vscode/extensions.json |
||||
*.swp |
||||
|
||||
# Misc |
||||
.DS_Store |
@ -0,0 +1,12 @@ |
||||
<html> |
||||
<head> |
||||
<title>LED Toggle Demo</title> |
||||
<link rel="stylesheet" href="semantic.min.css"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
</head> |
||||
<body> |
||||
<div id="root"></div> |
||||
|
||||
<script src="./bundle.js"></script> |
||||
</body> |
||||
</html> |
After Width: | Height: | Size: 6.5 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
@ -0,0 +1,28 @@ |
||||
{ |
||||
"name": "criticaldemo", |
||||
"version": "1.0.0", |
||||
"description": "", |
||||
"main": "index.js", |
||||
"scripts": { |
||||
"start": "node server.js", |
||||
"build": "webpack", |
||||
"dev": "webpack-dev-server" |
||||
}, |
||||
"author": "", |
||||
"devDependencies": { |
||||
"babel-core": "^6.25.0", |
||||
"babel-loader": "^7.0.0", |
||||
"babel-plugin-transform-object-rest-spread": "^6.23.0", |
||||
"babel-preset-react": "^6.24.1", |
||||
"react-hot-loader": "^3.0.0-beta.6", |
||||
"webpack": "^3.0.0", |
||||
"webpack-dev-server": "^2.4.5" |
||||
}, |
||||
"dependencies": { |
||||
"express": "^4.15.3", |
||||
"react": "^15.6.1", |
||||
"react-dom": "^15.6.1", |
||||
"react-fastclick": "^3.0.2", |
||||
"socket.io": "^2.0.3" |
||||
} |
||||
} |
@ -0,0 +1,20 @@ |
||||
const express = require('express'); |
||||
const app = express(); |
||||
|
||||
const server = app.listen(3000, function () { |
||||
console.log('Example app listening on port 3000!'); |
||||
}) |
||||
|
||||
const io = require('socket.io').listen(server); |
||||
|
||||
const update = data => { |
||||
console.log('recieved ' + data); |
||||
} |
||||
|
||||
app.use('/', express.static('dist')) |
||||
|
||||
io.on('connection', socket => { |
||||
socket.on('update', data => { |
||||
update(data); |
||||
}); |
||||
}); |
@ -0,0 +1,64 @@ |
||||
import React from 'react'; |
||||
import io from 'socket.io-client'; |
||||
|
||||
export default class App extends React.Component { |
||||
constructor(props) { |
||||
super(props); |
||||
|
||||
this.state = { |
||||
socket: io.connect() |
||||
} |
||||
} |
||||
|
||||
componentDidMount() { |
||||
this.connect(); |
||||
|
||||
} |
||||
|
||||
componentWillUnmount() { |
||||
this.setState({socket: this.state.socket.removeAllListeners()}); |
||||
} |
||||
|
||||
connect() { |
||||
let socket = this.state.socket; |
||||
|
||||
socket.on('connect', () => { |
||||
console.log('Connected!'); |
||||
}); |
||||
} |
||||
|
||||
sendOn() { |
||||
this.state.socket.emit('update', '1'); |
||||
console.log('On sent.'); |
||||
} |
||||
|
||||
sendOff() { |
||||
this.state.socket.emit('update', '0'); |
||||
console.log('Off sent.'); |
||||
} |
||||
|
||||
render() { |
||||
return ( |
||||
<div className="ui text container"> |
||||
<div className="ui basic center aligned segment"> |
||||
<img className="ui centered image" src="logo.png" /> |
||||
<h3 className="ui header">Remote Control Lightswitch</h3> |
||||
<p>Press the buttons to control the light.</p> |
||||
|
||||
<div className="ui compact raised segments"> |
||||
<div className="ui segment"> |
||||
<i onClick={() => this.sendOn()} className="bordered inverted yellow idea huge icon"></i> |
||||
</div> |
||||
<div className="ui segment"> |
||||
<i onClick={() => this.sendOff()} className="bordered inverted disabled idea huge icon"></i> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div className="ui basic center aligned segment"> |
||||
<p>Created by Tanner Collin <br /> |
||||
tannercollin.com</p> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
@ -0,0 +1,24 @@ |
||||
import React from 'react'; |
||||
import ReactDOM from 'react-dom'; |
||||
import 'react-hot-loader/patch'; |
||||
import { AppContainer } from 'react-hot-loader'; |
||||
|
||||
import App from './app'; |
||||
|
||||
import initReactFastclick from 'react-fastclick'; |
||||
initReactFastclick(); |
||||
|
||||
const render = Component => { |
||||
ReactDOM.render( |
||||
<AppContainer> |
||||
<Component /> |
||||
</AppContainer>, |
||||
document.getElementById('root') |
||||
) |
||||
} |
||||
|
||||
render(App) |
||||
|
||||
if (module.hot) { |
||||
module.hot.accept('./app', () => { render(App) }) |
||||
} |
@ -0,0 +1,27 @@ |
||||
const path = require('path'); |
||||
const webpack = require('webpack'); |
||||
|
||||
module.exports = { |
||||
entry: './src/index.js', |
||||
plugins: [ |
||||
new webpack.HotModuleReplacementPlugin(), |
||||
], |
||||
output: { |
||||
filename: 'bundle.js', |
||||
path: path.resolve(__dirname, 'dist'), |
||||
publicPath: '/' |
||||
}, |
||||
module: { |
||||
rules: [ |
||||
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } |
||||
] |
||||
}, |
||||
stats: "normal", |
||||
devServer: { |
||||
contentBase: path.join(__dirname, "dist"), |
||||
publicPath: '/', |
||||
hot: true, |
||||
host: '0.0.0.0', |
||||
disableHostCheck: true |
||||
}, |
||||
}; |
Loading…
Reference in new issue