Logomotion: mise à jour introduction framework javascript

developpement/intro_javascript/ressources/react-demo/.babelrc

@@ -0,0 +1 @@
+{ "presets": ["react", "es2015"] }

developpement/intro_javascript/ressources/react-demo/.gitignore

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

developpement/intro_javascript/ressources/react-demo/app.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import HelloWorld from './components/hello-world'
+import PropsExample from './components/props-example'
+import Clock from './components/clock-lifecycle'
+import Counter from './components/counter'
+
+ReactDOM.render(<HelloWorld />, document.getElementById('app'))
+ReactDOM.render(<Clock />, document.getElementById('clock'))
+ReactDOM.render(<Counter />, document.getElementById('counter'))

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

developpement/intro_javascript/ressources/react-demo/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "react-demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.8",
+    "path": "^0.12.7",
+    "style-loader": "^0.19.1",
+    "webpack": "^3.10.0",
+    "webpack-dev-server": "^2.10.0"
+  },
+  "scripts": {
+    "start": "webpack-dev-server",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

developpement/intro_javascript/ressources/react-demo/public/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>"Simple" React with Webpack</title>
+  </head>
+  <body>
+    <div id='app'></div>
+    ---
+    <div id='props-example'></div>
+    ---
+    <div id='clock'></div>
+    ---
+    <div id='counter'></div>
+    <script src='/bundle.js'></script>
+  </body>
+</html>

developpement/intro_javascript/ressources/react-demo/webpack.config.js

@@ -0,0 +1,20 @@
+var webpack = require('webpack')
+var path = require('path')
+
+module.exports = {
+  entry: path.resolve(__dirname, 'app'),
+  output: {
+    path: __dirname + '/dist',
+    publicPath: '/',
+    filename: 'bundle.js'
+  },
+  devServer: {
+    contentBase: path.resolve(__dirname, 'public')
+  },
+  module: {
+    loaders: [
+      {test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader']},
+      {test: /(\.css)$/, loaders: ['style-loader', 'css-loader']}
+    ]
+  }
+}