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