Feature/16 portals

.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/ReactPractice/src/index.js":"1","/Users/ogiwaramasatoshi/ReactPractice/src/App.js":"2","/Users/ogiwaramasatoshi/ReactPractice/src/reportWebVitals.js":"3","/Users/ogiwaramasatoshi/ReactPractice/src/components/Greet.js":"4","/Users/ogiwaramasatoshi/ReactPractice/src/components/Welcome.js":"5","/Users/ogiwaramasatoshi/ReactPractice/src/components/Columns.js":"6","/Users/ogiwaramasatoshi/ReactPractice/src/components/PureComp.js":"7","/Users/ogiwaramasatoshi/ReactPractice/src/components/Table.js":"8","/Users/ogiwaramasatoshi/ReactPractice/src/components/RefsDemo.js":"9","/Users/ogiwaramasatoshi/ReactPractice/src/components/FocusInput.js":"10","/Users/ogiwaramasatoshi/ReactPractice/src/components/Input.js":"11","/Users/ogiwaramasatoshi/ReactPractice/src/components/FRInput.js":"12","/Users/ogiwaramasatoshi/ReactPractice/src/components/FRParentInput.js":"13","/Users/ogiwaramasatoshi/ReactPractice/src/components/PortalDemo.js":"14"},{"size":500,"mtime":1611136676035,"results":"15","hashOfConfig":"16"},{"size":2819,"mtime":1612877934958,"results":"17","hashOfConfig":"16"},{"size":362,"mtime":1611136676036,"results":"18","hashOfConfig":"16"},{"size":164,"mtime":1611322453240,"results":"19","hashOfConfig":"16"},{"size":205,"mtime":1611323259102,"results":"20","hashOfConfig":"16"},{"size":167,"mtime":1612444416336,"results":"21","hashOfConfig":"16"},{"size":205,"mtime":1612789029547,"results":"22","hashOfConfig":"23"},{"size":223,"mtime":1612443509079,"results":"24","hashOfConfig":"16"},{"size":850,"mtime":1612791202217,"results":"25","hashOfConfig":"16"},{"size":475,"mtime":1612791938116,"results":"26","hashOfConfig":"16"},{"size":367,"mtime":1612791923406,"results":"27","hashOfConfig":"16"},{"size":304,"mtime":1612877128356,"results":"28","hashOfConfig":"16"},{"size":496,"mtime":1612877186558,"results":"29","hashOfConfig":"16"},{"size":229,"mtime":1612878139159,"results":"30","hashOfConfig":"16"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"33"},"n3itvi",{"filePath":"34","messages":"35","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"33"},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"33"},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"33"},{"filePath":"42","messages":"43","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"44","usedDeprecatedRules":"45"},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"3ag8f0",{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"50","messages":"51","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"33"},{"filePath":"52","messages":"53","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"33"},{"filePath":"54","messages":"55","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"33"},{"filePath":"56","messages":"57","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"33"},{"filePath":"58","messages":"59","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"33"},{"filePath":"60","messages":"61","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/ogiwaramasatoshi/ReactPractice/src/index.js",[],["62","63"],"/Users/ogiwaramasatoshi/ReactPractice/src/App.js",["64","65","66","67"],"/Users/ogiwaramasatoshi/ReactPractice/src/reportWebVitals.js",[],"/Users/ogiwaramasatoshi/ReactPractice/src/components/Greet.js",[],"/Users/ogiwaramasatoshi/ReactPractice/src/components/Welcome.js",[],"/Users/ogiwaramasatoshi/ReactPractice/src/components/Columns.js",["68"],"import React from 'react'\n\nfunction Columns() {\n  const items = []\n  return(\n     <>\n      <td>Name</td>\n       <td> Shit</td>\n    </>\n\n  )\n}\n\nexport default Columns ;",["69","70"],"/Users/ogiwaramasatoshi/ReactPractice/src/components/PureComp.js",[],"/Users/ogiwaramasatoshi/ReactPractice/src/components/Table.js",[],"/Users/ogiwaramasatoshi/ReactPractice/src/components/RefsDemo.js",[],"/Users/ogiwaramasatoshi/ReactPractice/src/components/FocusInput.js",[],"/Users/ogiwaramasatoshi/ReactPractice/src/components/Input.js",[],"/Users/ogiwaramasatoshi/ReactPractice/src/components/FRInput.js",[],"/Users/ogiwaramasatoshi/ReactPractice/src/components/FRParentInput.js",[],"/Users/ogiwaramasatoshi/ReactPractice/src/components/PortalDemo.js",[],{"ruleId":"71","replacedBy":"72"},{"ruleId":"73","replacedBy":"74"},{"ruleId":"75","severity":1,"message":"76","line":7,"column":8,"nodeType":"77","messageId":"78","endLine":7,"endColumn":16},{"ruleId":"75","severity":1,"message":"79","line":8,"column":8,"nodeType":"77","messageId":"78","endLine":8,"endColumn":18},{"ruleId":"75","severity":1,"message":"80","line":9,"column":8,"nodeType":"77","messageId":"78","endLine":9,"endColumn":15},{"ruleId":"75","severity":1,"message":"81","line":10,"column":8,"nodeType":"77","messageId":"78","endLine":10,"endColumn":21},{"ruleId":"75","severity":1,"message":"82","line":4,"column":9,"nodeType":"77","messageId":"78","endLine":4,"endColumn":14},{"ruleId":"71","replacedBy":"83"},{"ruleId":"73","replacedBy":"84"},"no-native-reassign",["85"],"no-negated-in-lhs",["86"],"no-unused-vars","'RefsDemo' is defined but never used.","Identifier","unusedVar","'FocusInput' is defined but never used.","'FRInput' is defined but never used.","'FRParentInput' is defined but never used.","'items' is assigned a value but never used.",["85"],["86"],"no-global-assign","no-unsafe-negation"]

public/index.html

@@ -29,6 +29,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="modal-root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

src/App.js

@@ -1,17 +1,88 @@
 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";
+import RefsDemo from "./components/RefsDemo";
+import FocusInput from "./components/FocusInput";
+import FRInput from "./components/FRInput";
+import FRParentInput from "./components/FRParentInput";
+import PortalDemp from "./components/PortalDemo";
+// 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";
+// import FragmentDemo from "./components/FragmentDemo";
+// import Table from "./components/Table";
+// import Columns from "./components/Columns";
+// import PureComp from "./components/PureComp";
 
-class App extends Component{
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+class App extends Component {
     render() {
-      return(
-       <div className="App">
-         <Greet/>
-         <Welcome/>
-       </div>
-      );
+        return (
+            <div className="App">
+                <PortalDemp/>
+                {/*<FRParentInput/>*/}
+                {/*<FRInput/>*/}
+                {/*<FocusInput/>*/}
+                {/*<RefsDemo/>*/}
+                {/*<PureComp/>*/}
+                {/*<Columns/>*/}
+                {/*<Table/>*/}
+                {/*<FragmentDemo/>*/}
+                {/*<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>
+        );
     }
 }
 
-export default App;
+export default App ;

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/Columns.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+function Columns() {
+  const items = []
+  return(
+     <>
+      <td>Name</td>
+       <td> Shit</td>
+    </>
+
+  )
+}
+
+export default Columns ;

src/components/FRInput.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+// function FRInput() {
+//     return(
+//      <div>
+//        <input type='text'/>
+//      </div>
+//     )
+// }
+
+const FRInput = React.forwardRef ((props, ref) => {
+    return(
+      <div>
+        <input type='text' ref={ref}/>
+      </div>
+    )
+})
+
+
+export default FRInput ;

src/components/FRParentInput.js

@@ -0,0 +1,24 @@
+import React, { Component } from  'react'
+import FRInput from "./FRInput";
+
+export class FRParentInput extends Component{
+    constructor(props){
+      super(props)
+        this.inputRef = React.createRef
+    }
+
+    clickHandler = () => {
+        this.inputRef.current.focus()
+    }
+
+    render() {
+      return(
+        <div>
+          <FRInput ref={this.inputRef}/>
+           <button onClick={this.clickHandler}>Focus Input</button>
+        </div>
+      )
+    }
+}
+
+export default FRParentInput

src/components/FocusInput.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react'
+import Input from "./Input";
+
+
+class FocusInput extends  Component{
+   constructor(props) {
+    super(props)
+     this.componentRef = React.createRef()
+   }
+
+   clickHandler= () => {
+     this.componentRef.current.focusInput()
+   }
+
+    render() {
+      return(
+      <div>
+       <Input ref={this.componentRef}/>
+       <button onClick={this.clickHandler}>Focus Input</button>
+      </div>
+     )
+    }
+}
+
+export default FocusInput ;

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 ;