tanner/protospace-lcars
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-24 19:31:52 -06:00
parent c0774cdcb1
commit 18bae1f3d4
9 changed files with 113 additions and 2 deletions
Show Stats 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"]
}

2
.gitignore vendored
View File

@ -28,3 +28,5 @@ build/Release
# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
node_modules node_modules
# builds
dist/bundle.js

3
README.md
View File

@ -1,2 +1 @@
# protospace-lcars # Hello World

9
dist/index.html vendored Normal file
View File

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

25
package.json Normal file
View File

@ -0,0 +1,25 @@
{
"name": "helloworld",
"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-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) })
}

27
webpack.config.js Normal file
View File

@ -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
},
};