Feature/11 mountind methods

src/App.js

@@ -1,14 +1,56 @@
 import React, { Component } from 'react'
 import './App.css'
+// eslint-disable-next-line
 import Greet from './components/Greet'
+// eslint-disable-next-line
 import Welcome from "./components/Welcome";
+// eslint-disable-next-line
+import Message from "./components/Message";
+import Function from "./components/Function";
+import ClassClick from "./components/ClassClick";
+import  BindingHandler from "./components/BindingHandler"
+// import Parent from "./components/Parent";
+// import ChildrenComponent from "./components/Children";
+import UserGreeting from "./components/UserGreeting";
+import NameList from "./components/NameList";
+import Stylesheet from "./components/Stylesheet";
+import Inline from "./components/Inline";
+import './appStyles.css';
+import styles from  './appStyles.module.css'
+import Form from "./components/Form";
+import LifecycleA from "./components/LifecycleA";
+import LifecycleB from "./components/LifecycleB";
+
+
+
 
 class App extends Component{
     render() {
       return(
        <div className="App">
-         <Greet/>
-         <Welcome/>
+           {/*<h1 className='error'>Error</h1>*/}
+           {/*<h1 className={styles.success}>Success</h1>*/}
+           <LifecycleA/>
+           <LifecycleB/>
+           {/*<Form/>*/}
+           {/*<Inline/>*/}
+           {/*<Stylesheet primary={ false }/>*/}
+           {/*<NameList/>*/}
+           {/*<BindingHandler/>*/}
+           {/*<UserGreeting/>*/}
+           {/*<Parent/>*/}
+           {/*<ChildrenComponent/>*/}
+          {/*<ClassClick/>*/}
+          {/*<Function/>*/}
+         {/*<Message/>*/}
+        {/* <Greet name="ronaldo" hero="Bad Man"/>*/}
+        {/*   <Greet name="Chan"/>*/}
+        {/*   <button>Push</button>*/}
+        {/*    <Greet/>*/}
+        {/*   <Greet name="Eda"/>*/}
+
+        {/*<Welcome name="Matthew"/>*/}
+        {/*<Welcome name="ronaldo"/>*/}
        </div>
       );
     }

src/appStyles.css

@@ -0,0 +1,3 @@
+.error {
+    color: red;
+}

src/appStyles.module.css

@@ -0,0 +1,3 @@
+.success {
+    color: blue;
+}

src/components/BindingHandler.js

@@ -0,0 +1,42 @@
+import React, { Component } from 'react'
+
+export class BindingHandler extends Component{
+    constructor(props) {
+      super(props)
+
+      this.state={
+          message: 'shut fuck up !'
+      }
+     //
+     //    #1
+     //    this.clickHandler= this.clickHandler.bind(this)
+    }
+     //
+     // #2
+    //
+    // clickHandler() {
+     //    this.setState({
+     //       message: 'Joe Cola'
+     //    })
+     //   console.log(this)
+     // }
+
+       // #3
+         clickHandler = () => {
+          this.setState({
+            message: 'fuck off!'
+        })
+       }
+
+    render() {
+     return(
+        <div>
+            <div>{this.state.message}</div>
+            {/*<button onClick={() => this.clickHandler()}>Push</button>*/}
+            <button onClick={this.clickHandler}>Push</button>
+        </div>
+     )
+    }
+}
+
+export default BindingHandler ;

src/components/Children.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+function ChildrenComponent(props) {
+    return(
+      <div>
+        <button onClick={() => props.greetHandler('child')}>Greet parent</button>
+      </div>
+    )
+}
+
+export default ChildrenComponent;

src/components/ClassClick.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+
+export class ClassClick extends Component {
+    clickHandler() {
+        console.log('fuck you')
+    }
+     render() {
+        return(
+          <div>
+           <button onClick={this.clickHandler}>Click here!</button>
+          </div>
+      )
+    }
+}
+
+export default ClassClick;

src/components/Form.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react'
+
+ class Form extends  Component{
+    constructor(props) {
+     super(props)
+       this.state = {
+         username: '',
+         comments: '',
+         topics: ''
+
+       }
+    }
+
+    handleUsernameChange = (event) => {
+      this.setState({
+       username: event.target.value
+      })
+    }
+
+    handleCommentsChange = (event) => {
+        this.setState({
+            comments: event.target.value
+        })
+    }
+
+    handleTopicsChange = (event) => {
+        this.setState({
+            topics: event.target.value
+        })
+    }
+
+
+     render() {
+      const { username, comments, topic }  = this.state
+      return(
+       <form>
+         <div>
+             <labal>Username</labal>
+             <input type="text" value={username}  onChange={this.handleUsernameChange}/>
+         </div>
+
+         <div>
+             <label>Comments</label>
+             <textarea value={comments} onChange={this.handleCommentsChange}/>
+         </div>
+
+         <div>
+             <label>Topic</label>
+             <select value={topic} onChange={this.handleTopicsChange}>
+              <option value="fuck">Fuck</option>
+              <option value="shit">Shit</option>
+              <option value="fuckin">Fuckin</option>
+         </select>
+         </div>
+
+         <div>
+           <button type="submit">Submit</button>
+         </div>
+       </form>
+      )
+     }
+}
+
+export default Form ;

src/components/Function.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+function Function() {
+    function clickHandler() {
+        console.log('Push')
+    }
+    return(
+        <div>
+         <button onClick= {clickHandler('')}>Click</button>
+        </div>
+    )
+}
+
+export default Function;

src/components/Greet.js

@@ -1,7 +1,8 @@
 import React from  'react'
 
-function Greet() {
-    return <h1>  Hello World ! </h1>
-}
 
+const Greet = (props) => {
+    console.log(props)
+    return <h2> Bonjour {props.name} to {props.hero}</h2>
+    }
 export default Greet;

src/components/Inline.js

@@ -0,0 +1,17 @@
+import React from  'react'
+
+const heading = {
+    fontsize: '75px',
+    color: 'orange'
+}
+
+function Inline() {
+    return(
+        <div>
+            <h1 className='error'>Error</h1>
+            <h1 style={heading}>Inline</h1>
+        </div>
+    )
+}
+
+export default Inline

src/components/LifecycleA.js

@@ -0,0 +1,52 @@
+import  React, { Component } from 'react'
+import LifecycleB from "./LifecycleB";
+
+export class LifecycleA extends Component{
+    constructor(props) {
+     super(props)
+      this.state = {
+         name: 'Buffon'
+       }
+     console.log('LifecycleA constructor')
+    }
+     static getDerivedStateFromProps(props, state) {
+       console.log('LifecycleA getDerivedStateFromProps')
+      return "Ronaldo"
+     }
+
+     componentDidMount() {
+       console.log('LifecycleA componentDidMount')
+     }
+
+     shouldComponentUpdate() {
+       console.log('LifecycleA shouldComponentUpdate')
+        return true
+     }
+
+     getSnapshotBeforeUpdate() {
+        console.log('LifecycleA  getSnapshotBeforeUpdate')
+         return null
+     }
+
+     componentDidUpdate() {
+         console.log('LifecycleA componentDidUpdate')
+     }
+
+     changeState = ()  => {
+        this.setState({
+            name: 'Fuckin Jesus!!'
+        })
+     }
+
+    render() {
+      return(
+        <div>
+            <button onClick={this.changeState}>Change state</button>
+             <h1>Fuck you!!!!! Buffon</h1>
+              <LifecycleB/>
+        </div>
+      )
+    }
+}
+
+export default LifecycleA ;

src/components/LifecycleB.js

@@ -0,0 +1,29 @@
+import  React, { Component } from 'react'
+
+export class LifecycleB extends Component{
+    constructor(props) {
+        super(props)
+        this.state = {
+            name: 'Buffon'
+        }
+        console.log('LifecycleB constructor')
+    }
+    static getDerivedStateFromProps(props,state) {
+        console.log('LifecycleB getDerivedStateFromProps')
+        return null
+    }
+
+    componentDidMount() {
+        console.log('Fuck')
+    }
+
+    render() {
+        return(
+            <div>
+                <h1>Fuck you!!!!!</h1>
+            </div>
+        )
+    }
+}
+
+export default LifecycleB ;