Basically CSS and Modules.

.eslintcache

@@ -1 +1 @@
-[{"/Users/ogiwaramasatoshi/untitled1/src/index.js":"1","/Users/ogiwaramasatoshi/untitled1/src/App.js":"2","/Users/ogiwaramasatoshi/untitled1/src/reportWebVitals.js":"3","/Users/ogiwaramasatoshi/untitled1/src/components/Greet.js":"4","/Users/ogiwaramasatoshi/untitled1/src/components/Welcome.js":"5"},{"size":500,"mtime":1611136676035,"results":"6","hashOfConfig":"7"},{"size":320,"mtime":1611236828564,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1611136676036,"results":"9","hashOfConfig":"7"},{"size":108,"mtime":1611235745555,"results":"10","hashOfConfig":"7"},{"size":178,"mtime":1611236840054,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"15abmaf",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/ogiwaramasatoshi/untitled1/src/index.js",[],"/Users/ogiwaramasatoshi/untitled1/src/App.js",[],"/Users/ogiwaramasatoshi/untitled1/src/reportWebVitals.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/Greet.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/Welcome.js",[]]
+[{"/Users/ogiwaramasatoshi/untitled1/src/index.js":"1","/Users/ogiwaramasatoshi/untitled1/src/App.js":"2","/Users/ogiwaramasatoshi/untitled1/src/reportWebVitals.js":"3","/Users/ogiwaramasatoshi/untitled1/src/components/Greet.js":"4","/Users/ogiwaramasatoshi/untitled1/src/components/Welcome.js":"5","/Users/ogiwaramasatoshi/untitled1/src/components/Message.js":"6","/Users/ogiwaramasatoshi/untitled1/src/components/Function.js":"7","/Users/ogiwaramasatoshi/untitled1/src/components/ClassClick.js":"8","/Users/ogiwaramasatoshi/untitled1/src/components/BindingHandler.js":"9","/Users/ogiwaramasatoshi/untitled1/src/components/Parent.js":"10","/Users/ogiwaramasatoshi/untitled1/src/components/Children.js":"11","/Users/ogiwaramasatoshi/untitled1/src/components/UserGreeting.js":"12","/Users/ogiwaramasatoshi/untitled1/src/components/NameList.js":"13","/Users/ogiwaramasatoshi/untitled1/src/components/Person.js":"14","/Users/ogiwaramasatoshi/untitled1/src/components/Stylesheet.js":"15","/Users/ogiwaramasatoshi/untitled1/src/components/Inline.js":"16"},{"size":500,"mtime":1611136676035,"results":"17","hashOfConfig":"18"},{"size":1624,"mtime":1612271386838,"results":"19","hashOfConfig":"18"},{"size":362,"mtime":1611136676036,"results":"20","hashOfConfig":"18"},{"size":164,"mtime":1611322453240,"results":"21","hashOfConfig":"18"},{"size":205,"mtime":1611323259102,"results":"22","hashOfConfig":"18"},{"size":510,"mtime":1611590166780,"results":"23","hashOfConfig":"18"},{"size":247,"mtime":1611666895505,"results":"24","hashOfConfig":"18"},{"size":321,"mtime":1611668020758,"results":"25","hashOfConfig":"18"},{"size":859,"mtime":1611754865555,"results":"26","hashOfConfig":"18"},{"size":558,"mtime":1611840504513,"results":"27","hashOfConfig":"18"},{"size":224,"mtime":1611839137506,"results":"28","hashOfConfig":"18"},{"size":333,"mtime":1611842011380,"results":"29","hashOfConfig":"18"},{"size":272,"mtime":1612185321569,"results":"30","hashOfConfig":"18"},{"size":260,"mtime":1612097167923,"results":"31","hashOfConfig":"18"},{"size":273,"mtime":1612187425049,"results":"32","hashOfConfig":"18"},{"size":271,"mtime":1612271357327,"results":"33","hashOfConfig":"18"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},"15abmaf",{"filePath":"37","messages":"38","errorCount":0,"warningCount":6,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"43","messages":"44","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"45","messages":"46","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"47","messages":"48","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"49","messages":"50","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"51","messages":"52","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"53","messages":"54","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"55","messages":"56","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"57"},{"filePath":"58","messages":"59","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"60","messages":"61","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"62","usedDeprecatedRules":"36"},{"filePath":"63","messages":"64","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},{"filePath":"65","messages":"66","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"67","messages":"68","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"36"},"/Users/ogiwaramasatoshi/untitled1/src/index.js",[],["69","70"],"/Users/ogiwaramasatoshi/untitled1/src/App.js",["71","72","73","74","75","76"],"/Users/ogiwaramasatoshi/untitled1/src/reportWebVitals.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/Greet.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/Welcome.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/Message.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/Function.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/ClassClick.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/BindingHandler.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/Parent.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/Children.js",[],["77","78"],"/Users/ogiwaramasatoshi/untitled1/src/components/UserGreeting.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/NameList.js",["79"],"import React from 'react'\nimport Person from \"./Person\";\n\n\nfunction NameList() {\n   const names =['Buffon','Ronaldo','Dybala']\n   const nameList = names.map((name,index) =><h2 key={index}>{index} {name}</h2>)\n    return <div> {nameList} </div>\n}\n\nexport default NameList ;","/Users/ogiwaramasatoshi/untitled1/src/components/Person.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/Stylesheet.js",[],"/Users/ogiwaramasatoshi/untitled1/src/components/Inline.js",[],{"ruleId":"80","replacedBy":"81"},{"ruleId":"82","replacedBy":"83"},{"ruleId":"84","severity":1,"message":"85","line":9,"column":8,"nodeType":"86","messageId":"87","endLine":9,"endColumn":16},{"ruleId":"84","severity":1,"message":"88","line":10,"column":8,"nodeType":"86","messageId":"87","endLine":10,"endColumn":18},{"ruleId":"84","severity":1,"message":"89","line":11,"column":9,"nodeType":"86","messageId":"87","endLine":11,"endColumn":23},{"ruleId":"84","severity":1,"message":"90","line":14,"column":8,"nodeType":"86","messageId":"87","endLine":14,"endColumn":20},{"ruleId":"84","severity":1,"message":"91","line":15,"column":8,"nodeType":"86","messageId":"87","endLine":15,"endColumn":16},{"ruleId":"84","severity":1,"message":"92","line":16,"column":8,"nodeType":"86","messageId":"87","endLine":16,"endColumn":18},{"ruleId":"80","replacedBy":"93"},{"ruleId":"82","replacedBy":"94"},{"ruleId":"84","severity":1,"message":"95","line":2,"column":8,"nodeType":"86","messageId":"87","endLine":2,"endColumn":14},"no-native-reassign",["96"],"no-negated-in-lhs",["97"],"no-unused-vars","'Function' is defined but never used.","Identifier","unusedVar","'ClassClick' is defined but never used.","'BindingHandler' is defined but never used.","'UserGreeting' is defined but never used.","'NameList' is defined but never used.","'Stylesheet' is defined but never used.",["96"],["97"],"'Person' is defined but never used.","no-global-assign","no-unsafe-negation"]

src/App.js

@@ -1,14 +1,50 @@
 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'
+
+
+
 
 class App extends Component{
     render() {
       return(
        <div className="App">
-         <Greet/>
-         <Welcome/>
+           <h1 className='error'>Error</h1>
+           <h1 className={styles.success}>Success</h1>
+           <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/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/Message.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+
+
+class Message extends Component {
+    constructor() {
+        super()
+        this.state= {
+            message: 'Welcome haha!'
+        }
+    }
+
+    changeMessage() {
+        this.setState({
+            message: 'Thank you!'
+        })
+    }
+
+    render() {
+      return(
+          <div>
+              <h1>{ this.state.message}</h1>
+              <button onClick={ ()=> this.changeMessage()}> click </button>
+          </div>
+      )
+    }
+}
+
+export default Message;

src/components/NameList.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import Person from "./Person";
+
+
+function NameList() {
+   const names =['Buffon','Ronaldo','Dybala']
+   const nameList = names.map((name,index) =><h2 key={index}>{index} {name}</h2>)
+    return <div> {nameList} </div>
+}
+
+export default NameList ;

src/components/Parent.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import ChildrenComponent from "./Children";
+
+
+class Parent extends Component{
+    constructor(props) {
+      super(props)
+        this.state= {
+          parentName: 'Parent'
+        }
+
+        this.greetParent= this.greetParent.bind(this)
+    }
+
+
+    greetParent (childName) {
+        alert(`Bonjour ${this.state.parentName} from ${childName}`)
+    }
+
+    render() {
+      return(
+          <div>
+           <ChildrenComponent greetHandler={this.greetParent}/>
+          </div>
+      )
+    }
+}
+
+export default Parent

src/components/Person.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+
+function Person({person,key}) {
+    return(
+        <div>
+            <h2>
+                {key} I am {person.name}. I am {person.age}. My position is {person.skill}.
+            </h2>
+        </div>
+    )
+}
+
+export default Person ;

src/components/Stylesheet.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import './myStyles.css'
+
+function Stylesheet(props) {
+    let className = props.primary?  'primary' : ''
+    return(
+        <div>
+          <h1 className={`${className} font-xl`}>Stylesheet</h1>
+        </div>
+    )
+}
+
+export default Stylesheet ;

src/components/UserGreeting.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+
+
+class UserGreeting extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            isLoggedIn: true
+        }
+    }
+
+   render() {
+      return(
+      this.state.isLoggedIn && <div> Fuck you !!!</div>
+      )
+    }
+   }
+
+    export default UserGreeting;

src/components/Welcome.js

@@ -1,9 +1,10 @@
 import React, { Component } from 'react'
 
-class Welcome extends Component{
-    render() {
+
+class Welcome extends Component {
+    render(){
      return(
-         <h1> Class Component </h1>
+      <h2>Welcome {this.props.name} to {this.props.name}</h2>
      )
     }
 }

src/components/myStyles.css

@@ -0,0 +1,9 @@
+
+
+.primary{
+  color: orange;
+}
+
+.font-xl {
+    font-size: 72px;
+}