jreategui07 · jreategui07 · May 29, 2020 · May 5, 2020 · May 5, 2020 · May 5, 2020
diff --git a/public/index.html b/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.

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,26 +1,42 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { Component } from 'react'
+/* import TarjetaFruta from './components/TarjetaFruta';
+import Contador from './components/Contador';
+import GatoPrincipal from './components/Gato'
+import EventoMouse from './components/EventoMouse'
+import EventoInput from './components/EventoInput'
+import ConservarEvento from './components/ConservarEvento'
+import EventoPersonalizadoPrincipal from './components/EventoPersonalizado'
+import Saludo from './components/Saludo'
+import Title from './components/Title';
+import InyectarHTML from './components/InyectarHTML';
+import Fragments from './components/Fragments'; */
+import PortalModalPrincipal from './components/PortalModal';
+
+class App extends Component {
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+  render() {
+
+    return (
+        <div>
+          {/* <TarjetaFruta name={'Manzana'} price={5} />
+          <TarjetaFruta name={'Naranja'} price={4} />
+          <TarjetaFruta name={'Pera'} price={3} />
+          <Contador/>
+          <GatoPrincipal />
+          <EventoMouse />
+          <EventoInput />
+          <ConservarEvento />
+          <EventoPersonalizadoPrincipal />
+          <Saludo saluda name="Jonathan" />
+          <Title uiColor="purple">
+            Ninja <em>PRO</em>!
+          </Title>
+          <InyectarHTML />
+          <Fragments /> */}
+          <PortalModalPrincipal />
+        </div>
+    )
+  }
 }
 
-export default App;
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/ConservarEvento/ConservarEvento.js b/src/components/ConservarEvento/ConservarEvento.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import { Component } from "react";
+
+export class ConservarEvento extends Component {
+
+  state = {
+    color: 'blue'
+  }
+
+  handlerChange = (event) => {
+
+    const color = event.target.value;
+
+    this.setState({
+      color
+    })
+
+  }
+
+  render() {
+    return (
+      <div>
+        <input 
+          type="text"
+          onChange={this.handlerChange}
+        />
+        <h1 style={{color: this.state.color}}>
+          {this.state.color}
+        </h1>
+      </div>
+    )
+  }
+
+}
+
+export default ConservarEvento
diff --git a/src/components/ConservarEvento/index.js b/src/components/ConservarEvento/index.js
@@ -0,0 +1 @@
+export { default } from './ConservarEvento'
diff --git a/src/components/Contador/Contador.js b/src/components/Contador/Contador.js
@@ -0,0 +1,30 @@
+import React, { Component } from "react";
+
+export class Contador extends Component {
+  state = {
+    video: {
+      title: "Super video",
+      likes: 0,
+    },
+  };
+
+  add = () => {
+    this.setState((state) => ({
+      video: {
+        ...state.video,
+        likes: this.state.video.likes + 1,
+      },
+    }));
+  };
+
+  render() {
+    return (
+      <div>
+        <h1>{this.state.video.title}</h1>
+        <button onClick={this.add}>Clicks: ({this.state.video.likes})</button>
+      </div>
+    );
+  }
+}
+
+export default Contador;
diff --git a/src/components/Contador/index.js b/src/components/Contador/index.js
@@ -0,0 +1 @@
+export {default} from './Contador';
diff --git a/src/components/EventoInput/EventoInput.js b/src/components/EventoInput/EventoInput.js
@@ -0,0 +1,40 @@
+import React from 'react'
+import { Component } from "react"
+
+export class EventoInput extends Component {
+
+  state = {
+    text: '',
+    evento: ''
+  }
+
+  manejador = (event) => {
+    this.setState({
+      text: event.target.value,
+      evento: event.type
+    })
+  }
+
+  render() {
+    return (
+      <div>
+        <input 
+          type="text" 
+          onChange={this.manejador} 
+          onCopy={this.manejador}
+          onPaste={this.manejador}
+        />
+        <br/>
+        <h1>
+          {this.state.text}
+        </h1>
+        <h2>
+          {this.state.evento}
+        </h2>
+      </div>
+    )
+  }
+
+}
+
+export default EventoInput
diff --git a/src/components/EventoInput/index.js b/src/components/EventoInput/index.js
@@ -0,0 +1 @@
+export {default} from './EventoInput'
diff --git a/src/components/EventoMouse/EventoMouse.js b/src/components/EventoMouse/EventoMouse.js
@@ -0,0 +1,40 @@
+import React from 'react'
+import { Component } from "react";
+
+const styles = {
+  height: '200px',
+  background: 'gold',
+  padding: '1em',
+  boxSizing: 'border-box'
+}
+
+export class EventoMouse extends Component {
+
+  state = {
+    x: 0,
+    y: 0
+  }
+
+  manejador = (event) => {
+    this.setState({
+      x: event.clientX,
+      y: event.clientY
+    });
+  }
+
+  render() {
+    return (
+      <div  style={styles} onMouseMove={this.manejador}>
+        <div>
+          x: {this.state.x}
+        </div>
+        <div>
+          y: {this.state.y}
+        </div>
+      </div>
+    )
+  }
+
+}
+
+export default EventoMouse
diff --git a/src/components/EventoMouse/index.js b/src/components/EventoMouse/index.js
@@ -0,0 +1 @@
+export {default} from './EventoMouse'
diff --git a/src/components/EventoPersonalizado/EventoPersonalizado.js b/src/components/EventoPersonalizado/EventoPersonalizado.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Component } from "react";
+import './global.css'
+
+class EventoPersonalizado extends Component {
+
+  manejadorClick = () => {
+    this.props.onSaludar('Ninja en React!!!')
+  }
+
+  render() {
+    return (
+      <div className="box blue">
+        <h1>Hola!</h1>
+        <button type="text" onClick={this.manejadorClick}>Click!</button>
+      </div>
+    )
+  }
+
+}
+
+export default EventoPersonalizado
diff --git a/src/components/EventoPersonalizado/EventoPersonalizadoPrincipal.js b/src/components/EventoPersonalizado/EventoPersonalizadoPrincipal.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Component } from 'react'
+
+import EventoPersonalizado from './EventoPersonalizado'
+import './global.css'
+
+class EventoPersonalizadoPrincipal extends Component {
+
+  state = {
+    mensaje: ''
+  }
+
+  manejador = (event) => {
+    this.setState({
+      mensaje: event
+    })
+  }
+
+  render() {
+    return (
+      <div className="box red">
+        <EventoPersonalizado onSaludar={this.manejador} />
+        <h1>
+          Mensaje: {this.state.mensaje}
+        </h1>
+      </div>
+    )
+  }
+
+}
+
+export default EventoPersonalizadoPrincipal
diff --git a/src/components/EventoPersonalizado/global.css b/src/components/EventoPersonalizado/global.css
@@ -0,0 +1,13 @@
+.box {
+  padding: 1em;
+  box-sizing: border-box;
+  border-radius: 0.2em;
+}
+
+.red {
+  border: 1px solid red;
+}
+
+.blue {
+  border: 1px solid blue;
+}
diff --git a/src/components/EventoPersonalizado/index.js b/src/components/EventoPersonalizado/index.js
@@ -0,0 +1 @@
+export {default} from './EventoPersonalizadoPrincipal'
diff --git a/src/components/Fragments/Fragments.js b/src/components/Fragments/Fragments.js
@@ -0,0 +1,34 @@
+import React from 'react'
+
+const Computacion = () => (
+  <React.Fragment>
+    <li>Monitor</li>
+    <li>Mouse</li>
+    <li>Teclado</li>
+  </React.Fragment>
+)
+
+const Ropa = () => (
+  <React.Fragment>
+    <li>Playera</li>
+    <li>Jeans</li>
+    <li>Shorts</li>
+  </React.Fragment>
+)
+
+class Fragments extends React.Component {
+
+  render() {
+    return (
+      <div>
+        <ul>
+          <Computacion />
+          <Ropa />
+        </ul>
+      </div>
+    )
+  }
+
+}
+
+export default Fragments
diff --git a/src/components/Fragments/index.js b/src/components/Fragments/index.js
@@ -0,0 +1 @@
+export {default} from './Fragments'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export {default} from './EventoPersonalizadoPrincipal'