Merge pull request #1037 from gaearon/mobx-example

Mobx example

Author: theKashey

examples/mobx/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["env", "react"],
+  "plugins": ["react-hot-loader/babel", "transform-class-properties", "transform-decorators-legacy"]
+}

examples/mobx/.gitignore

@@ -0,0 +1 @@
+node_modules

examples/mobx/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "hot-mobx",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack-dev-server --hot"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "html-webpack-plugin": "^2.30.1",
+    "webpack": "^3.10.0",
+    "webpack-dev-server": "^2.9.7"
+  },
+  "dependencies": {
+    "autobind-decorator": "^2.1.0",
+    "mobx": "^5.0.3",
+    "mobx-react": "^5.2.3",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-hot-loader": "next"
+  }
+}

examples/mobx/src/App.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { hot, setConfig } from 'react-hot-loader'
+import Counter from './Counter'
+
+const Element1 = ({ children }) => <div>Block1 {children}</div>
+
+const Element2 = () => (
+  <div>
+    Block2 <Counter />
+  </div>
+)
+
+const App = () => (
+  <h1>
+    Hello, mobx<br />
+    <Counter />
+    <Element1>
+      <Counter />
+    </Element1>
+    <Element2 />
+  </h1>
+)
+
+setConfig({ logLevel: 'debug' })
+
+export default hot(module)(App)

examples/mobx/src/Counter.js

@@ -0,0 +1,67 @@
+import React, { Component } from 'react'
+import { hot } from 'react-hot-loader'
+import { observer } from 'mobx-react'
+import { observable } from 'mobx'
+
+class Counter extends React.Component {
+  state = { count: Math.round(Math.random() * 1000) }
+
+  componentDidMount() {
+    //this.interval = setInterval(this.increment, 200)
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval)
+  }
+
+  increment = () => {
+    this.setState(prevState => ({ count: prevState.count + 1 }))
+  }
+
+  render() {
+    return this.state.count
+  }
+}
+
+class Comp extends Component {
+  state = {
+    obsObj: null,
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    return { obsObj: nextProps.obsObj }
+  }
+
+  componentDidMount() {
+    //setInterval(() => this.setState({update: 1}), 5000);
+  }
+
+  render() {
+    const { prop1 } = this.state.obsObj || {}
+    return (
+      <div style={{ border: '10px solid red' }}>
+        {prop1}
+        <Counter />
+      </div>
+    )
+  }
+}
+
+const ObsComp = observer(Comp)
+
+class App extends Component {
+  @observable
+  obj = {
+    prop1: 'Example',
+  }
+
+  render() {
+    return (
+      <div>
+        <ObsComp obsObj={this.obj} />
+      </div>
+    )
+  }
+}
+
+export default App

examples/mobx/src/index.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { render } from 'react-dom'
+import App from './App'
+
+const root = document.createElement('div')
+document.body.appendChild(root)
+
+render(<App />, root)

examples/mobx/webpack.config.babel.js

@@ -0,0 +1,31 @@
+/* eslint-disable */
+const path = require('path')
+const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  entry: ['./src/index'],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        exclude: /node_modules|packages/,
+        test: /\.js$/,
+        use: 'babel-loader',
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    alias: {
+      react: path.resolve(path.join(__dirname, './node_modules/react')),
+      'babel-core': path.resolve(
+        path.join(__dirname, './node_modules/@babel/core'),
+      ),
+    },
+  },
+  plugins: [new HtmlWebpackPlugin(), new webpack.NamedModulesPlugin()],
+}