r-argentina-programa · AChareun · Mar 12, 2020
diff --git a/index-mio.html b/index-mio.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>React clase uno</title>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+  </head>
+  <body>
+    <div id="react-app"></div>
+    <script src="node_modules/react/umd/react.development.js" crossorigin></script>
+    <script src="node_modules/react-dom/umd/react-dom.development.js" crossorigin></script>
+    <script src="lib/index-mio.js" type="module"></script>
+  </body>
+</html>
diff --git a/src/index-mio.js b/src/index-mio.js
@@ -0,0 +1,115 @@
+import {
+  Tarjeta,
+  BlogPost,
+} from './tarea/Tarea1.js'
+
+import {
+  MatchNombre,
+  PasswordInput,
+  ValidationInput,
+} from './tarea/Tarea2.js'
+
+import {
+  UncontrolledCheckbox,
+  CheckboxList,
+} from './tarea/Tarea3.js'
+
+import {
+  ControlledCheckbox,
+  CheckboxListWithState,
+} from './tarea/Tarea4.js'
+
+const $REACT_APP = document.getElementById('react-app');
+
+//TAREA 1
+
+ReactDOM.render(
+<Tarjeta
+    autor={{
+        nombre: "Alonso Chareun",
+        titulo: "Dev in dev",
+        imagen: "https://avatars3.githubusercontent.com/u/55903156?s=460&v=4",
+    }}/>,
+$REACT_APP);
+
+ReactDOM.render(
+  <BlogPost
+  titulo="Ardillas"
+  parrafos={`Hoy vi una ardilla.\n
+  La ardilla era negra, era más grande que otras ardillas, tenía muchos dientes grandes y encima andaba siempre en cuatro patas, moviendo la cola.\n
+  Creo que puede haber sido un perro, dado que en Argentina no hay ardillas.`}
+  autor={{
+    nombre: "Alonso Chareun",
+    titulo: "Dev in dev",
+    imagen: "https://avatars3.githubusercontent.com/u/55903156?s=460&v=4"
+  }}
+/>,
+    $REACT_APP
+);
+
+//TAREA 2
+
+ReactDOM.render(
+  <MatchNombre
+  nombre="Alonso"
+  />,
+  $REACT_APP
+)
+
+ReactDOM.render(
+  <PasswordInput
+  minLength={6}
+  />,
+  $REACT_APP
+)
+
+ReactDOM.render(
+  <ValidationInput
+  isPassword={false}
+  validation={(value) => value.match(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)}
+  />,
+  $REACT_APP
+)
+
+//TAREA 3
+
+ReactDOM.render(
+  <UncontrolledCheckbox
+  name="Está checkeado?"
+  initialValue={true}
+  />,
+  $REACT_APP
+)
+
+ReactDOM.render(
+  <CheckboxList
+  items={{
+  uno: false,
+  dos: true,
+  tres: false,
+  }}
+  />,
+  $REACT_APP
+)
+
+//TAREA 4
+
+ReactDOM.render(
+  <ControlledCheckbox
+  name="Está checkeado?"
+  value={true}
+  onChange={() => alert("Lo checkeaste")}
+  />,
+  $REACT_APP
+)
+
+ReactDOM.render(
+  <CheckboxListWithState
+  items={{
+    uno: false,
+    dos: true,
+    tres: false,
+  }}
+  />,
+  $REACT_APP
+)
diff --git a/src/tarea/Tarea1.js b/src/tarea/Tarea1.js
@@ -13,7 +13,6 @@
  *   <span>Programador Front End</span>
  *  </div>
  * </div>
- *
  * Luego, refactoricen el componente para que en vez de tener mi nombre, titulo e imagen, tengan los suyos.
  * Para hacer esto, usaremos las props del componente.
  * Este componente recibirá 3 props: nombre, titulo e imagen.
@@ -34,7 +33,17 @@
  * Si no quieren poner una foto suya, pueden tomar la URL de su imagen de perfil de github, como hice yo.
  */
 
-export function Tarjeta(props) {}
+export function Tarjeta(props) {
+  return (
+    <div className="tarjeta">
+      <img src={props.imagen} alt="Foto de perfil" className="tarjeta-img"/>
+      <div className="tarjeta-data">
+        <header className="tarjeta-data-header">{props.nombre}</header>
+        <span>{props.titulo}</span>
+      </div>
+    </div>
+  )  
+}
 
 /*
  * El esqueleto de este componente será nuestro primer post en un blog.
@@ -98,17 +107,12 @@ export function BlogPost(props) {
   return (
     <article className="post">
       <header className="post-header">
-        <h2 className="post-title">Ardillas</h2>
-        <Tarjeta nombre="Tu nombre" titulo="Tu titulo" imagen="URL de tu imagen" />
+        <h2 className="post-title">{props.titulo}</h2>
+        <Tarjeta {...props.autor} />
       </header>
-      <p className="post-paragraph">Hoy vi una ardilla.</p>
-      <p className="post-paragraph">
-        La ardilla era negra, era más grande que otras ardillas, tenía muchos dientes grandes y
-        encima andaba siempre en cuatro patas, moviendo la cola.
-      </p>
-      <p className="post-paragraph">
-        Creo que puede haber sido un perro, dado que en Argentina no hay ardillas.
-      </p>
+      {props.parrafos.split('\n').map((parrafo, i) => (
+        <p className="post-paragraph" key={i}>{parrafo}</p>
+      ))}
     </article>
   );
 }
diff --git a/src/tarea/Tarea2.js b/src/tarea/Tarea2.js
@@ -12,7 +12,17 @@
  * Para obtener el valor del input en el event handler, deberán usar la propiedad `event.target.value`.
  */
 
-export function MatchNombre(props) {}
+export function MatchNombre(props) {
+    const [value, setValue] = React.useState("");
+
+    return (
+    <input
+    nombre={props.nombre}
+    onChange={() => setValue(event.target.value)}
+    className={"input " + (value === props.nombre && "input-match")}
+    />
+    )
+}
 
 /*
  * Componentes como este son usados a menudo para hacer validaciones de inputs
@@ -32,7 +42,18 @@ export function MatchNombre(props) {}
  * Si hicieron todo bien, el input se pondrá rojo si no pasaron el tamaño mínimo de la contraseña.
  */
 
-export function PasswordInput(props) {}
+export function PasswordInput(props) {
+    const [value, setValue] = React.useState("");
+
+    return (
+    <input
+    type="password"
+    minLength={props.minLength}
+    onChange={() => setValue(event.target.value)}
+    className={"input " + (value.length >= props.minLength && "input-match")}
+    />
+    )
+}
 
 /*
  * Estos componentes están bastante buenos, pero estamos repitiendo mucho código,
@@ -60,4 +81,14 @@ export function PasswordInput(props) {}
  * Si quieren, pueden agregar una prop extra "isPassword". Si es true el input deberá tener type="password".
  */
 
-export function ValidationInput(props) {}
+export function ValidationInput(props) {
+    const [value, setValue] = React.useState("");
+
+    return (
+    <input
+    type={props.isPassword ? "password" : undefined}
+    onChange={() => setValue(event.target.value)}
+    className={"input " + (props.validation(value) ? "input-match" : undefined)}
+    />
+    )
+}
diff --git a/src/tarea/Tarea3.js b/src/tarea/Tarea3.js
@@ -9,7 +9,21 @@
  * DATO: la prop que define si un <input type="checkbox" /> está seleccionado es "checked"
  */
 
-export function UncontrolledCheckbox(props) {}
+export function UncontrolledCheckbox(props) {
+    const [isChecked, setCheck] = React.useState(props.initialValue);
+
+    return (
+        <React.Fragment>
+            <label htmlFor={props.name}>{props.name}</label>
+            <input
+            type="checkbox"
+            id={props.name}
+            checked={isChecked}
+            onChange={() => setCheck(!isChecked)}
+            />
+        </React.Fragment>
+    )
+}
 
 /*
  * Este componente debe renderizar una lista de componentes UncontrolledCheckbox.
@@ -24,4 +38,14 @@ export function UncontrolledCheckbox(props) {}
  * debe renderizar tres checkboxes, con nombres "uno", "dos" y "tres", que inicien con valores false, true y false respectivamente.
  */
 
-export function CheckboxList(props) {}
+export function CheckboxList(props) {
+    return (
+        Object.keys(props.items).map((key) =>
+            <UncontrolledCheckbox
+            name={key}
+            key={key}
+            initialValue={props.items[key]}
+            /> 
+        )
+    )
+}
diff --git a/src/tarea/Tarea4.js b/src/tarea/Tarea4.js
@@ -6,7 +6,19 @@
  * onChange es una función que se debe disparar cuando el checkbox se selecciona.
  */
 
-export function ControlledCheckbox(props) {}
+export function ControlledCheckbox(props) {
+    return (
+        <React.Fragment>
+            <label htmlFor={props.name}>{props.name}</label>
+            <input
+            type="checkbox"
+            id={props.name}
+            checked={props.value}
+            onChange={props.onChange}
+            />
+        </React.Fragment>
+    )
+}
 
 /*
  * Este componente debe renderizar una lista de componentes ControlledCheckbox.
@@ -29,7 +41,20 @@ export function ControlledCheckbox(props) {}
  * }
  */
 
-export function CheckboxListWithState(props) {}
+export function CheckboxListWithState(props) {
+    const [isChecked, setCheck] = React.useState(props.items);
+
+    return(
+    Object.keys(props.items).map((key) => (
+    <ControlledCheckbox
+        name={key}
+        value={isChecked[key]}
+        onChange={(event) => setCheck({...isChecked, [key] : !isChecked[key]})}
+        key={key}
+    />
+    ))
+    )
+}
 
 /*
  * Para este punto, seguramente hayan notado las palabras "Controlled" y