Create hello world React app with hot module replacement

7 years ago · 888eff91d8
parent 5f57586a7f
commit 888eff91d8
8 changed files with 105 additions and 3 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,4 @@
+{
+    "presets": ["react"],
+    "plugins": ["react-hot-loader/babel"]
+}
--- a/.gitignore
+++ b/.gitignore
@ -4,7 +4,7 @@
 node_modules/

 # Compiled output
-build
+bundle.js

 # Runtime data
 database.sqlite
@ -25,6 +25,7 @@ yarn-error.log*
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+*.swp

 # Misc
 .DS_Store
--- a/dist/index.html
+++ b/dist/index.html
@ -0,0 +1,9 @@
+<html>
+    <head>
+        <title>LED Toggle Demo</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script src="./bundle.js"></script>
+    </body>
+</html>
--- a/package.json
+++ b/package.json
@ -4,7 +4,22 @@
  "description": "",
  "main": "index.js",
  "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"
+  }
 }
--- a/server.js
+++ b/server.js
@ -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!')
+})
--- a/src/app.js
+++ b/src/app.js
@ -0,0 +1,11 @@
+import React from 'react';
+
+export default class Site extends React.Component {
+    render() {
+        return (
+            <div>
+                Hello React!
+            </div>
+       );
+    }
+}
--- a/src/index.js
+++ b/src/index.js
@ -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) })
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@ -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
+    },
+};