tanner/critical-leddemo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Create hello world React app with hot module replacement

Browse Source
This commit is contained in:
Tanner Collin
2017-06-19 19:20:38 +00:00
parent 5f57586a7f
commit 888eff91d8
8 changed files with 105 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.babelrc Normal file
View File

@@ -0,0 +1,4 @@
{
"presets": ["react"],
"plugins": ["react-hot-loader/babel"]
}

3
.gitignore vendored
View File

@@ -4,7 +4,7 @@
node_modules/ node_modules/
# Compiled output # Compiled output
build bundle.js
# Runtime data # Runtime data
database.sqlite database.sqlite
@@ -25,6 +25,7 @@ yarn-error.log*
!.vscode/tasks.json !.vscode/tasks.json
!.vscode/launch.json !.vscode/launch.json
!.vscode/extensions.json !.vscode/extensions.json
*.swp
# Misc # Misc
.DS_Store .DS_Store

9
dist/index.html vendored Normal file
View File

@@ -0,0 +1,9 @@
<html>
<head>
<title>LED Toggle Demo</title>
</head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>

19
package.json
View File

@@ -4,7 +4,22 @@
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "start": "node server.js",
"build": "webpack",
"dev": "webpack-dev-server"
}, },
"author": "" "author": "",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.0.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"
}
} }

12
server.js Normal file
View File

@@ -0,0 +1,12 @@
const express = require('express')
const app = express()
app.use('/', express.static('dist'))
app.get('/hello', function (req, res) {
res.send('Hello World!')
})
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
})

11
src/app.js Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react';
export default class Site extends React.Component {
render() {
return (
<div>
Hello React!
</div>
);
}
}

22
src/index.js Normal file
View File

@@ -0,0 +1,22 @@
import React from 'react';
import ReactDOM from 'react-dom';
import 'react-hot-loader/patch';
import { AppContainer } from 'react-hot-loader';
import App from './app';
const render = Component => {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
document.getElementById('root')
)
}
render(App)
if (module.hot) {
module.hot.accept('./app', () => { render(App) })
}

28
webpack.config.js Normal file
View File

@@ -0,0 +1,28 @@
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: '/',
//inline: true,
hot: true,
host: '0.0.0.0',
disableHostCheck: true
},
};