Feature/2 props

.eslintcache

@@ -1 +1 @@
-[{"/Users/ogiwaramasatoshi/React.training/src/index.js":"1","/Users/ogiwaramasatoshi/React.training/src/reportWebVitals.js":"2","/Users/ogiwaramasatoshi/React.training/src/App.js":"3","/Users/ogiwaramasatoshi/React.training/src/components/Welcome.js":"4","/Users/ogiwaramasatoshi/React.training/src/components/Greet.js":"5"},{"size":500,"mtime":1634311114405,"results":"6","hashOfConfig":"7"},{"size":362,"mtime":1634311114405,"results":"8","hashOfConfig":"7"},{"size":597,"mtime":1634454887455,"results":"9","hashOfConfig":"7"},{"size":178,"mtime":1634311114404,"results":"10","hashOfConfig":"7"},{"size":730,"mtime":1634454762451,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"5277pf",{"filePath":"15","messages":"16","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"17","messages":"18","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"19","messages":"20","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"21","messages":"22","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/ogiwaramasatoshi/React.training/src/index.js",[],["23","24"],"/Users/ogiwaramasatoshi/React.training/src/reportWebVitals.js",[],"/Users/ogiwaramasatoshi/React.training/src/App.js",["25"],"/Users/ogiwaramasatoshi/React.training/src/components/Welcome.js",[],"/Users/ogiwaramasatoshi/React.training/src/components/Greet.js",[],{"ruleId":"26","replacedBy":"27"},{"ruleId":"28","replacedBy":"29"},{"ruleId":"30","severity":1,"message":"31","line":4,"column":8,"nodeType":"32","messageId":"33","endLine":4,"endColumn":15},"no-native-reassign",["34"],"no-negated-in-lhs",["35"],"no-unused-vars","'Welcome' is defined but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]
+[{"/Users/masa/WebstormProjects/React.training/src/index.js":"1","/Users/masa/WebstormProjects/React.training/src/App.js":"2","/Users/masa/WebstormProjects/React.training/src/reportWebVitals.js":"3","/Users/masa/WebstormProjects/React.training/src/components/Greet.js":"4","/Users/masa/WebstormProjects/React.training/src/components/Welcome.js":"5","/Users/masa/WebstormProjects/React.training/src/components/Son.js":"6"},{"size":500,"mtime":1673772278075,"results":"7","hashOfConfig":"8"},{"size":709,"mtime":1673802057846,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":1673772278075,"results":"10","hashOfConfig":"8"},{"size":715,"mtime":1673802044305,"results":"11","hashOfConfig":"8"},{"size":166,"mtime":1673772278075,"results":"12","hashOfConfig":"8"},{"size":138,"mtime":1673872451873,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"zmx66g",{"filePath":"16","messages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"18","messages":"19","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"25","messages":"26","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/masa/WebstormProjects/React.training/src/index.js",[],"/Users/masa/WebstormProjects/React.training/src/App.js",["27","28","29","30"],"/Users/masa/WebstormProjects/React.training/src/reportWebVitals.js",[],"/Users/masa/WebstormProjects/React.training/src/components/Greet.js",["31"],"/Users/masa/WebstormProjects/React.training/src/components/Welcome.js",[],["32","33"],"/Users/masa/WebstormProjects/React.training/src/components/Son.js",[],{"ruleId":"34","severity":1,"message":"35","line":1,"column":16,"nodeType":"36","messageId":"37","endLine":1,"endColumn":25},{"ruleId":"34","severity":1,"message":"38","line":1,"column":27,"nodeType":"36","messageId":"37","endLine":1,"endColumn":35},{"ruleId":"34","severity":1,"message":"39","line":4,"column":8,"nodeType":"36","messageId":"37","endLine":4,"endColumn":15},{"ruleId":"34","severity":1,"message":"40","line":7,"column":13,"nodeType":"36","messageId":"37","endLine":7,"endColumn":22},{"ruleId":"34","severity":1,"message":"41","line":2,"column":8,"nodeType":"36","messageId":"37","endLine":2,"endColumn":11},{"ruleId":"42","replacedBy":"43"},{"ruleId":"44","replacedBy":"45"},"no-unused-vars","'Component' is defined but never used.","Identifier","unusedVar","'useState' is defined but never used.","'Welcome' is defined but never used.","'constants' is defined but never used.","'Son' is defined but never used.","no-native-reassign",["46"],"no-negated-in-lhs",["47"],"no-global-assign","no-unsafe-negation"]

src/App.js

@@ -1,20 +1,22 @@
-import React, { Component } from 'react'
+import React, {Component, useState} from 'react'
 import './App.css'
 import Greet from './components/Greet'
 import Welcome from "./components/Welcome";
 import {Link} from "@material-ui/core";
+import Son from "./components/Son";
+import * as constants from "constants";
 
 
-class App extends Component{
-    render() {
-      return(
-       <div className="App">
-         <Greet name="props"/>
-           {/*<Welcome/>*/}
-         <Link> Fuck you </Link>
-       </div>
-      );
-    }
+function App(){
+    return(
+        <div className="App">
+            <Greet name="oo"/>
+            <Son name="kkk"/>
+            <Son name="kkkh"/>
+            {/*<Welcome/>*/}
+            <Link> Fuck you </Link>
+        </div>
+    )
 }
 
 export default App;

src/components/Greet.js

@@ -1,16 +1,18 @@
 import React from  'react'
+import Son from "./Son";
 
-
-const Greet = props => {
-
-    return <h1>  Hello {props.name} ! </h1>
+const Greet = () => {
+    return(
+        <div>
+            {/*<h1>Hello {props.name} ! </h1>*/}
+            {/*<Son name="funk"/>*/}
+            {/*<h2>test {props.name}</h2>*/}
+        </div>
+    )
 }
 
 export default Greet;
 
-
-
 // 親クラス(App.js)で定義された変数(プロパティ)を子(Componentsファイル群にて)で継承をする。
 // その際,{props.children}と定義してあげることで不確定要素等を全て親ファイルからの継承で呼び出しが可能になる。
-// (そうする場合は必ず<>タグにてラッピングしてあげないとエラるから注意, => <div></div> {props._children}とはならない)
-// ただ、親クラスでのformの入力を行う(Form等)ことで子に渡せると思うがどのようにしてその渡し方を行うかが重要になる。
+// (そうする場合は必ず<>タグにてラッピングしてあげないとエラるから注意, => <div></div> {props._children}とはならない)

src/components/Son.js

@@ -0,0 +1,9 @@
+import React from  'react'
+
+
+const Son = (props) => {
+console.log(props)
+    return <h1>Hello {props.name} ! </h1>
+}
+
+export default Son;

src/components/Welcome.js

@@ -1,11 +1,12 @@
-import React, { Component } from 'react'
+import React from 'react'
 
-class Welcome extends Component{
-    render() {
-     return(
-         <h1> Class Component </h1>
-     )
-    }
+const Welcome = (props) => {
+  console.log(props)
+  return(
+    <div>
+      This is Welcome page.
+    </div>
+  )
 }
 
 export default Welcome;