Strona główna Odkrywaj Pomoc
Zaloguj się
fgm
/
front__codeschool-react
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

L3.1: lifecycle methods, data loading/refreshing.

Frederic G. MARAND 8 lat temu
rodzic
5e14f24e98
commit
f63318ebea
5 zmienionych plików z 38 dodań i 5 usunięć
Zunifikowany widok Pokaż statystyki zmian
  1. 1 0
      .eslintrc.json
  2. 1 0
      index.html
  3. 1 0
      package.json
  4. 31 5
      src/comments.js
  5. 4 0
      static/comments.json

+ 1 - 0
.eslintrc.json
Wyświetl plik 

@@ -5,6 +5,7 @@
 
     "es6": true
 
     "es6": true
 
   },
 
   },
 
   "globals": {
 
   "globals": {
 
+    "jQuery": false,
 
     "React": false,
 
     "React": false,
 
     "ReactDOM": false
 
     "ReactDOM": false
 
   },
 
   },

+ 1 - 0
index.html
Wyświetl plik 

@@ -8,6 +8,7 @@
 
   <body>
 
   <body>
 
     <div id="comments-app"></div>
 
     <div id="comments-app"></div>
 
 
 
+    <script src="node_modules/jquery/dist/jquery.js"></script>
 
     <script src="node_modules/react/dist/react.js"></script>
 
     <script src="node_modules/react/dist/react.js"></script>
 
     <script src="node_modules/react-dom/dist/react-dom.js"></script>
 
     <script src="node_modules/react-dom/dist/react-dom.js"></script>
 
     <script src="lib/comments.js"></script>
 
     <script src="lib/comments.js"></script>

+ 1 - 0
package.json
Wyświetl plik 

@@ -1,6 +1,7 @@
 
 {
 
 {
 
   "dependencies": {
 
   "dependencies": {
 
     "eslint": "^3.10.2",
 
     "eslint": "^3.10.2",
 
+    "jquery": "^3.1.1",
 
     "react": "^15.4.1",
 
     "react": "^15.4.1",
 
     "react-dom": "^15.4.1"
 
     "react-dom": "^15.4.1"
 
   },
 
   },

+ 31 - 5
src/comments.js
Wyświetl plik 

@@ -6,7 +6,8 @@ Good practices:
 
 
 
 State
 
 State
 
 - direct reads, write through setState()
 
 - direct reads, write through setState()
 
-- declare initial state in constructo()
 
+- declare initial state in constructor()
 
+- setState() calls render(): beware loops = avoid it in render()
 
 
 
 Refs:
 
 Refs:
 
 - are called by React during render()
 
 - are called by React during render()
 
@@ -16,6 +17,11 @@ Events:
 
 - React events are "synthetic" events, masking the browser behaviour differences
 
 - React events are "synthetic" events, masking the browser behaviour differences
 
 - https://facebook.github.io/react/docs/events.html
 
 - https://facebook.github.io/react/docs/events.html
 
 
 
+Lifecycle methods:
 
+- Main: componentWillMount / componentDidMount / componentWillUnmount
 
+- fetch initial data from cWM, start a refresh poll loop from cDM, stop loop from cWU
 
+ - https://facebook.github.io/react/docs/react-component.html
 
+
 
 JSX:
 
 JSX:
 
 - "className", not "class"
 
 - "className", not "class"
 
 - knows how to render an array of JSX elements, not just one.
 
 - knows how to render an array of JSX elements, not just one.
 
@@ -74,10 +80,7 @@ class CommentBox extends React.Component {
 
     super();
 
     super();
 
     this.state = {
 
     this.state = {
 
       showComments: false,
 
       showComments: false,
 
-      comments: [
 
-        { id: 1, author: "Morgan McCircuit", body: "great picture!" },
 
-        { id: 2, author: "Bending Bender", body: "Excellent stuff" }
 
-      ]
 
+      comments: []
 
     };
 
     };
 
   }
 
   }
 
 
 
@@ -92,6 +95,17 @@ class CommentBox extends React.Component {
 
     this.setState({comments: this.state.comments.concat([comment])});
 
     this.setState({comments: this.state.comments.concat([comment])});
 
   }
 
   }
 
 
 
+  _fetchComments() {
 
+    jQuery.ajax({
 
+      method: "GET",
 
+      url: "/static/comments.json",
 
+      // Arrow function: keep "this" binding to the class instance.
 
+      success: (comments) => {
 
+        this.setState({comments});
 
+      }
 
+    });
 
+  }
 
+
 
   _getComments() {
 
   _getComments() {
 
     return this.state.comments.map((comment) => {
 
     return this.state.comments.map((comment) => {
 
       return (<Comment
 
       return (<Comment
 
@@ -117,6 +131,18 @@ class CommentBox extends React.Component {
 
     });
 
     });
 
   }
 
   }
 
 
 
+  componentDidMount() {
 
+    this._timer = setInterval(() => this._fetchComments(), 5000);
 
+  }
 
+
 
+  componentWillMount() {
 
+    this._fetchComments();
 
+  }
 
+
 
+  componentWillUnmount() {
 
+    clearInterval(this._timer);
 
+  }
 
+
 
   render() {
 
   render() {
 
     const comments = this._getComments();
 
     const comments = this._getComments();
 
     let buttonText = "Show comments";
 
     let buttonText = "Show comments";

+ 4 - 0
static/comments.json
Wyświetl plik 

@@ -0,0 +1,4 @@
 
+[
 
+  { "id": 1, "author": "Morgan McCircuit", "body": "great picture!" },
 
+  { "id": 2, "author": "Bending Bender", "body": "Excellent stuff" }
 
+]