Logomotion: mise à jour introduction framework javascript

developpement/intro_javascript/ressources/react-demo/components/clock-lifecycle.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+class Clock extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      time: new Date()
+    }
+  }
+
+  componentDidMount() {
+    console.log('mount')
+    this.intervalId = setInterval(this.tick.bind(this), 1000);
+  }
+
+  componentWillUnmount() {
+    console.log('unmount')
+    clearInterval(this.intervalId);
+  }
+
+  render() {
+    return (
+      <div>Time: { this.state.time.toString() }</div>
+    )
+  }
+
+  tick() {
+    this.setState({ time: new Date() });
+  }
+
+}
+
+export default Clock

developpement/intro_javascript/ressources/react-demo/components/clock.js

@@ -0,0 +1,26 @@
+import React from 'react'
+
+class Clock extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      time: new Date()
+    }
+    setInterval(this.tick.bind(this), 1000);
+  }
+
+  render() {
+    return (
+      <div>Time: { this.state.time.toString() }</div>
+    )
+  }
+
+  tick() {
+    this.setState({ time: new Date() });
+  }
+
+}
+
+
+export default Clock

developpement/intro_javascript/ressources/react-demo/components/counter.js

@@ -0,0 +1,41 @@
+// components/counter.js
+
+import React from 'react'
+
+class Counter extends React.Component {
+
+  constructor(props) {
+    // On fait appel au constructeur de la classe
+    // parente
+    super(props)
+
+    // Initialisation du "state" du composant
+    this.state = {
+      count: 0
+    }
+  }
+
+  // Méthode de rendu du composant
+  render() {
+    return (
+      <div>
+      	Count: <span>{ this.state.count }</span>&nbsp;
+        <button onClick={ () => this.increment() }>+1</button>
+        <button onClick={ () => this.decrement() }>-1</button>
+      </div>
+    )
+  }
+
+  // La méthode increment() incrémente la valeur du compteur de 1
+  increment() {
+    this.setState(prevState => ({ count: prevState.count+1 }))
+  }
+
+  // La méthode decrement() incrémente la valeur du compteur de 1
+  decrement() {
+    this.setState(prevState => ({ count: prevState.count-1 }))
+  }
+
+}
+
+export default Counter

developpement/intro_javascript/ressources/react-demo/components/hello-world.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+class HelloWorld extends React.Component {
+
+  render() {
+    return (
+      <div className='hello-world'>
+        <h1>Hello World</h1>
+        <p>Welcome to React</p>
+      </div>
+    )
+  }
+
+}
+
+
+export default HelloWorld

developpement/intro_javascript/ressources/react-demo/components/props-example.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+class PropsExample extends React.Component {
+
+  render() {
+    return (
+      <span>{ this.props.text }</span>
+    )
+  }
+
+}
+
+export default PropsExample