diff --git a/.eslintcache b/.eslintcache index 03555f0..75d0ab6 100644 --- a/.eslintcache +++ b/.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",[]] \ No newline at end of file +[{"/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) =>

{index} {name}

)\n return
{nameList}
\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"] \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml index 0d8d066..1ed1b68 100644 --- a/.idea/inspectionProfiles/Project_Default.xml +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -5,6 +5,10 @@ + + + + @@ -20,6 +24,7 @@ + @@ -73,6 +78,10 @@ + + diff --git a/src/App.js b/src/App.js index a76bdfc..e7f8f28 100644 --- a/src/App.js +++ b/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(
- - +

Error

+

Success

+ + {/**/} + {/**/} + {/**/} + {/**/} + {/**/} + {/**/} + {/**/} + {/**/} + {/**/} + {/* */} + {/* */} + {/* */} + {/* */} + {/* */} + + {/**/} + {/**/}
); } diff --git a/src/appStyles.css b/src/appStyles.css new file mode 100644 index 0000000..9fc7b1e --- /dev/null +++ b/src/appStyles.css @@ -0,0 +1,3 @@ +.error { + color: red; +} \ No newline at end of file diff --git a/src/appStyles.module.css b/src/appStyles.module.css new file mode 100644 index 0000000..9e1144a --- /dev/null +++ b/src/appStyles.module.css @@ -0,0 +1,3 @@ +.success { + color: blue; +} \ No newline at end of file diff --git a/src/components/BindingHandler.js b/src/components/BindingHandler.js new file mode 100644 index 0000000..cffcc7a --- /dev/null +++ b/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( +
+
{this.state.message}
+ {/**/} + +
+ ) + } +} + +export default BindingHandler ; \ No newline at end of file diff --git a/src/components/Children.js b/src/components/Children.js new file mode 100644 index 0000000..91760a1 --- /dev/null +++ b/src/components/Children.js @@ -0,0 +1,11 @@ +import React from 'react' + +function ChildrenComponent(props) { + return( +
+ +
+ ) +} + +export default ChildrenComponent; \ No newline at end of file diff --git a/src/components/ClassClick.js b/src/components/ClassClick.js new file mode 100644 index 0000000..58d26db --- /dev/null +++ b/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( +
+ +
+ ) + } +} + +export default ClassClick; \ No newline at end of file diff --git a/src/components/Function.js b/src/components/Function.js new file mode 100644 index 0000000..7653178 --- /dev/null +++ b/src/components/Function.js @@ -0,0 +1,14 @@ +import React from 'react' + +function Function() { + function clickHandler() { + console.log('Push') + } + return( +
+ +
+ ) +} + +export default Function; \ No newline at end of file diff --git a/src/components/Greet.js b/src/components/Greet.js index 131c098..6b60066 100644 --- a/src/components/Greet.js +++ b/src/components/Greet.js @@ -1,7 +1,8 @@ import React from 'react' -function Greet() { - return

Hello World !

-} +const Greet = (props) => { + console.log(props) + return

Bonjour {props.name} to {props.hero}

+ } export default Greet; \ No newline at end of file diff --git a/src/components/Inline.js b/src/components/Inline.js new file mode 100644 index 0000000..e6f47cb --- /dev/null +++ b/src/components/Inline.js @@ -0,0 +1,17 @@ +import React from 'react' + +const heading = { + fontsize: '75px', + color: 'orange' +} + +function Inline() { + return( +
+

Error

+

Inline

+
+ ) +} + +export default Inline \ No newline at end of file diff --git a/src/components/Message.js b/src/components/Message.js new file mode 100644 index 0000000..6c76644 --- /dev/null +++ b/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( +
+

{ this.state.message}

+ +
+ ) + } +} + +export default Message; \ No newline at end of file diff --git a/src/components/NameList.js b/src/components/NameList.js new file mode 100644 index 0000000..cdb7714 --- /dev/null +++ b/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) =>

{index} {name}

) + return
{nameList}
+} + +export default NameList ; \ No newline at end of file diff --git a/src/components/Parent.js b/src/components/Parent.js new file mode 100644 index 0000000..9700fd4 --- /dev/null +++ b/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( +
+ +
+ ) + } +} + +export default Parent \ No newline at end of file diff --git a/src/components/Person.js b/src/components/Person.js new file mode 100644 index 0000000..9426de3 --- /dev/null +++ b/src/components/Person.js @@ -0,0 +1,14 @@ +import React from 'react' + + +function Person({person,key}) { + return( +
+

+ {key} I am {person.name}. I am {person.age}. My position is {person.skill}. +

+
+ ) +} + +export default Person ; \ No newline at end of file diff --git a/src/components/Stylesheet.js b/src/components/Stylesheet.js new file mode 100644 index 0000000..5651f4b --- /dev/null +++ b/src/components/Stylesheet.js @@ -0,0 +1,13 @@ +import React from 'react' +import './myStyles.css' + +function Stylesheet(props) { + let className = props.primary? 'primary' : '' + return( +
+

Stylesheet

+
+ ) +} + +export default Stylesheet ; \ No newline at end of file diff --git a/src/components/UserGreeting.js b/src/components/UserGreeting.js new file mode 100644 index 0000000..113a171 --- /dev/null +++ b/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 &&
Fuck you !!!
+ ) + } + } + + export default UserGreeting; \ No newline at end of file diff --git a/src/components/Welcome.js b/src/components/Welcome.js index af47269..f9f8aa1 100644 --- a/src/components/Welcome.js +++ b/src/components/Welcome.js @@ -1,9 +1,10 @@ import React, { Component } from 'react' -class Welcome extends Component{ - render() { + +class Welcome extends Component { + render(){ return( -

Class Component

+

Welcome {this.props.name} to {this.props.name}

) } } diff --git a/src/components/myStyles.css b/src/components/myStyles.css new file mode 100644 index 0000000..77cec43 --- /dev/null +++ b/src/components/myStyles.css @@ -0,0 +1,9 @@ + + +.primary{ + color: orange; +} + +.font-xl { + font-size: 72px; +}