add router; add a template;

Author: invincibleyolk

config/webpack.config.js

@@ -328,6 +328,7 @@ module.exports = function (webpackEnv) {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
         'react-native': 'react-native-web',
+        '@': path.resolve(__dirname, '../src'),
         // Allows for better profiling with ReactDevTools
         ...(isEnvProductionProfile && {
           'react-dom$': 'react-dom/profiling',

package-lock.json

@@ -35,6 +35,7 @@
     "eslint-webpack-plugin": "^2.5.2",
     "file-loader": "6.1.1",
     "fs-extra": "^9.0.1",
+    "history": "^5.0.1",
     "html-webpack-plugin": "4.5.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "26.6.0",

package.json

@@ -1,12 +1,24 @@
 import styles from './App.module.less';
-import Sample from './components/sample/Sample';
+import HomePage from './pages/HomePage';
+import PageOne from './pages/PageOne';
+import PageTwo from './pages/PageTwo';
+import PageThree from './pages/PageThree';
+import PageFour from './pages/PageFour';
+import { withRouter, Route, Switch } from 'react-router-dom';
+
 
 function App() {
   return (
     <div className={styles.App}>
-      <Sample/>
+      <Switch>
+        <Route path="/" component={HomePage} exact />
+        <Route path="/page1" component={PageOne} />
+        <Route path="/page2" component={PageTwo} />
+        <Route path="/page3" component={PageThree} />
+        <Route path="/page4" component={PageFour} />
+      </Switch>
     </div>
   );
 }
 
-export default App;
+export default withRouter(App);

src/App.js

@@ -1,6 +1,6 @@
 .App {
+  padding: 16px;
   text-align: center;
-  margin-top: 100px;
   display: flex;
   flex-direction: column;
   align-items: center;

src/App.module.less

@@ -0,0 +1,75 @@
+import React from 'react';
+import styles from './index.module.less';
+
+class Template extends React.Component {
+    // init data
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            // data that will be used/changed in render function,
+            // here to initiate them
+            // you can see "state" as an Object.
+            
+            isButtonClicked: false,
+            count: 0,
+
+        }
+        // Every function that interfaces with UI and data used 
+        // in this class needs to bind like this:
+        this.someFunction1 = this.someFunction1.bind(this);
+        this.someFunction2 = this.someFunction2.bind(this);
+        this.handleOnClickBtn = this.handleOnClickBtn.bind(this);
+    }
+
+    someFunction1() {
+        return
+    }
+
+    someFunction2() {
+        return
+    }
+
+    handleOnClickBtn() {
+        console.log('count =',this.state.count);
+        let currentCount = this.state.count;
+        // Every time you wants to modify the variables you declared in this.state,
+        // You need to use this function.
+        this.setState({
+            isButtonClicked: true,
+            count: currentCount + 1,
+        });
+    }
+
+    componentDidMount() {
+        // this is a function that will automatically be called the first time the component renders 
+    }
+
+    componentDidUpdate() {
+        // this is a function that will automatically be called each time the component renders
+    }
+
+    render() {
+        return (
+            <div className={styles.template}>
+                <p>this is a template component!</p>
+                <span>this is a link to <a href="/">homepage</a></span>
+                <div>
+                    <div>Here is a count button</div>
+                    <div>
+                        <button onClick={this.handleOnClickBtn}>
+                        {
+                            this.state.isButtonClicked?
+                            "clicked!":"click me"
+                        }
+                        </button>
+                    </div>
+                    <div>You have clicked {this.state.count} time(s)!</div>                
+                </div>
+            </div>
+          );
+    }
+    
+  }
+  
+  export default Template;

src/components/Template/index.js

@@ -0,0 +1,3 @@
+.template {
+    background: skyblue;
+}

src/components/Template/index.module.less

@@ -2,7 +2,7 @@ import React from 'react';
 import { Stage, Container, withPixiApp, Sprite, Graphics, useTick } from '@inlet/react-pixi';
 import styles from './Sample.module.less';
 
-const Inner = () => {
+function Inner () {
     const [x, setX] = React.useState(0);
     const mask = React.useRef();
     const i = React.useRef(0);
@@ -13,7 +13,7 @@ const Inner = () => {
     });
 
     return (
-      <Container position={[750, 250]}>
+      <Container position={[250, 250]}>
         <Sprite
           image="https://s3-us-west-2.amazonaws.com/s.cdpn.io/693612/IaUrttj.png"
           scale={[4, 4]}
@@ -32,13 +32,13 @@ const Inner = () => {
         />
       </Container>
     );
-  };
+};
 
 function Sample() {
     return (
       <div className={styles.sampleBox}>
         <a>learn react</a>
-        <Stage width={1500} height={500} options={{ backgroundColor: 0xcccccc }}>
+        <Stage width={500} height={500} options={{ backgroundColor: 0xcccccc }}>
           <Inner />
         </Stage>
       </div>

src/components/sample/Sample.js

@@ -1,4 +1,4 @@
 .sampleBox {
-    background-color: red;
-    width: 1800px;
+    background-color: #123;
+    width: 800px;
 }

src/components/sample/Sample.module.less

@@ -3,10 +3,13 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter as Router } from 'react-router-dom';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Router>
+      <App />
+    </Router>
   </React.StrictMode>,
   document.getElementById('root')
 );