TP React

src/App.css

@@ -11,4 +11,22 @@
 }
 .body-page {
   font-style: italic;
+}
+
+.header-title {
+  text-transform: uppercase;
+}
+
+.blog-post .title {
+  text-transform: none;
+}
+
+.main-body {
+  text-transform: uppercase;
+  font-style: italic;
+}
+
+.blog-post .body {
+  text-transform: none;
+  font-style: normal;
 }

src/App.jsx

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import './App.css';
+import Menu from './Menu';
+import MainContent from './MainContent';
+import PracticeContext from './practica_5/PracticeContext';
+
+function App() {
+  const [practiceSelected, setPracticeSelected] = useState('#practica_1');
+
+  return (
+    <div>
+      <PracticeContext.Provider value={practiceSelected}>
+        <Menu onOptionSelected={(t) => setPracticeSelected(t)} />
+        <MainContent />
+      </PracticeContext.Provider>
+    </div>
+  );
+}
+
+export default App;

src/MainContent.jsx

@@ -0,0 +1,19 @@
+import React, { useContext } from 'react';
+import PracticeContext from './practica_5/PracticeContext';
+import Practica1 from './practica_1/Practica1';
+import Practica2 from './practica_2/Practica2';
+import Practica3 from './practica_3/Practica3';
+import Practica4 from './practica_4/Practica4';
+
+export default function MainContent() {
+  const selectedPractice = useContext(PracticeContext);
+
+  return (
+    <main>
+      {selectedPractice === '#practica_1' && <Practica1 />}
+      {selectedPractice === '#practica_2' && <Practica2 />}
+      {selectedPractice === '#practica_3' && <Practica3 />}
+      {selectedPractice === '#practica_4' && <Practica4 />}
+    </main>
+  );
+}

src/Menu.jsx

@@ -0,0 +1,31 @@
+import React, { useContext } from 'react';
+import PracticeContext from './practica_5/PracticeContext';
+
+export default function Menu({ onOptionSelected }) {
+  const selectedPractice = useContext(PracticeContext);
+
+  const onClickOptionHandler = (event) => {
+    event.preventDefault();
+    onOptionSelected(event.target.hash);
+  };
+
+  return (
+    <div>
+      <h1>TUP - UTN - Laboratorio de computación 3 - Práctica</h1>
+      <div className="menu">
+        <a href="#practica_1" onClick={onClickOptionHandler}>
+          Práctica 1
+        </a>
+        <a href="#practica_2" onClick={onClickOptionHandler}>
+          Práctica 2
+        </a>
+        <a href="#practica_3" onClick={onClickOptionHandler}>
+          Práctica 3
+        </a>
+        <a href="#practica_4" onClick={onClickOptionHandler}>
+          Práctica 4
+        </a>
+      </div>
+    </div>
+  );
+}

src/practica_1/Practica1.js → src/practica_1/Practica1.jsx

@@ -124,18 +124,18 @@ const watchList = [
 ];
 
 const filterMovies = (watchlist) => {
-    // Aquí adentro escriban la función para filtrar
-	return [];
+
+	return watchlist.filter(movie => movie.Director === "Christopher Nolan" && parseFloat(movie.imdbRating) > 8)
 }
 const returnMovieTitle = (watchlist) => {
-    // Aquí adentro escriban la función para mostrar titulo
-	return [];
+
+	return watchlist.map(movie => movie.Title);
 }
 const sumOfDuration = (watchlist) => {
-    // Aquí adentro escriban la función para sumarizar
-	return 0;
+
+	return watchlist.reduce((acum, movie) => acum + parseInt(movie.Runtime), 0)
 }
-export default function Practica1 () {
+export default function Practica1() {
 	let moviesFiltered = filterMovies(watchList);
     let titlesArray = returnMovieTitle(moviesFiltered);
     let durationSum = sumOfDuration(moviesFiltered);

src/practica_2/Practica2.jsx

@@ -0,0 +1,20 @@
+import Header from "./components/Header";
+import Main from "./components/Main";
+import Page from "./components/Page";
+
+const site = {
+    pageTitle: 'Unidad 1.2 - Práctica',
+    pageBody: 'Implementación de árbol de componentes y propiedades en React.'
+};
+
+export default function Practica2() {
+
+    return (
+        <>
+            <Page>
+                <Header title={site.pageTitle}/>
+                <Main body={site.pageBody} />
+            </Page>
+        </>
+    );
+}

src/practica_2/README.md

@@ -1,51 +1,42 @@
 # Unidad 1.2 - Lógica de componentes - Práctica
 
-
 ## Pre-requisitos
 
 Considerando el siguiente objeto de JavaScript:
 
-
 ```
 const site = {
   pageTitle: 'Unidad 1.2 - Práctica',
   pageBody: 'Implementación de árbol de componentes y propiedades en React.'
 }
 ```
 
-
-
 ### Tarea 1
 
+- Crear la carpeta `components` dentro de `practica_2`
+- Crear el componente `Title` que reciba como parámetro la propiedad `pageTitle` y la renderice dentro de una etiqueta de encabezado (`h1`).
+- Crear el componente `Body` que reciba como parámetro la propiedad `pageBody` y la renderice dentro de una etiqueta `div`
+- Importar los componentes `Title` y `Body` desde `Practica2.js` y renderizarlos pasándose como propiedades sus respectivos valores de la constante `site`.
+- Bonus: utilizar `object destructuring` para leer las propiedades pasadas a los componentes como argumentos
 
-* Crear la carpeta `components` dentro de `practica_2` 
-* Crear el componente `Title` que reciba como parámetro la propiedad `pageTitle` y la renderice dentro de una etiqueta de encabezado (`h1`).
-* Crear el componente `Body` que reciba como parámetro la propiedad `pageBody` y la renderice dentro de una etiqueta `div`
-* Importar los componentes `Title` y `Body` desde `Practica2.js` y renderizarlos pasándose como propiedades sus respectivos valores de la constante `site`. 
-* Bonus: utilizar `object destructuring` para leer las propiedades pasadas a los componentes como argumentos
-
-
-### Tarea 2: 
-
-
-* Crear el componente `Header` que importará el componente `Title` y recibirá como propiedad `pageTitle`
-* Crear el componente `Main` que importará el componente `Body` y recibirá como propiedad `pageBody` y además renderizar una lista de menú (`nav` y `ul`) con enlaces a 2 sitios web externos.
-* Refactorizar Practica2 para utilizar los componente `Main` y `Header`
-* Bonus: Enviar los enlaces a sitio web externos como `props` enviadas a `Main`
-* Bonus: Utilizar la función `map` para renderizar los links
+### Tarea 2:
 
+- Crear el componente `Header` que importará el componente `Title` y recibirá como propiedad `pageTitle`
+- Crear el componente `Main` que importará el componente `Body` y recibirá como propiedad `pageBody` y además renderizar una lista de menú (`nav` y `ul`) con enlaces a 2 sitios web externos.
+- Refactorizar Practica2 para utilizar los componente `Main` y `Header`
+- Bonus: Enviar los enlaces a sitio web externos como `props` enviadas a `Main`
+- Bonus: Utilizar la función `map` para renderizar los links
 
 ### Tarea 3
 
-* Crear un componente `Page` de forma que acepte hijos (children) y los renderice de esa forma a los componente `Main` y `Header`
-* Refactorizar `App` para que importe y renderice `Page`, recordar enviarle que la constante site debe estar definida en `App` y enviarla a los distintos componentes via `props`.
-* En el componente `Main` modificar el contenido de la página agregando una frase a elección del alumno.
-
+- Crear un componente `Page` de forma que acepte hijos (children) y los renderice de esa forma a los componente `Main` y `Header`
+- Refactorizar `App` para que importe y renderice `Page`, recordar enviarle que la constante site debe estar definida en `App` y enviarla a los distintos componentes via `props`.
+- En el componente `Main` modificar el contenido de la página agregando una frase a elección del alumno.
 
 ### Tarea 4 - Reutilización de componentes
 
-* Refactorizar las propiedades `pageTitle` y `pageBody` de `Title` y `Body` respectivamente para que llamen `title` y `body`
-* Crear un componente `BlogPost` que renderice los componentes `Title` y `Body` pasando como paramétros `title` y `body` los datos de una noticia del diario seleccionada al azar. Colocar `BlogPost` dentro de `Main` a continuación del `Body` 
-* Realizar lo necesario para que el título de la página situado en `Header` se vea en mayúsculas mientras que el título del `BlogPost` se vea normal.
-* Realizar lo necesario para que el body de la página situado en `Main` se vea en mayúsculas en italics  mientras que el body del `BlogPost` se vea normal.
-BONUS: Utilizar CSS para agregar alguna diferenciación extra.
+- Refactorizar las propiedades `pageTitle` y `pageBody` de `Title` y `Body` respectivamente para que llamen `title` y `body`
+- Crear un componente `BlogPost` que renderice los componentes `Title` y `Body` pasando como paramétros `title` y `body` los datos de una noticia del diario seleccionada al azar. Colocar `BlogPost` dentro de `Main` a continuación del `Body`
+- Realizar lo necesario para que el título de la página situado en `Header` se vea en mayúsculas mientras que el título del `BlogPost` se vea normal.
+- Realizar lo necesario para que el body de la página situado en `Main` se vea en mayúsculas en italics mientras que el body del `BlogPost` se vea normal.
+  BONUS: Utilizar CSS para agregar alguna diferenciación extra.

src/practica_2/components/BlogSpot.jsx

@@ -0,0 +1,14 @@
+import Title from "./Title";
+import Main from "./Main";
+
+function BlogPost() {
+  const randomTitle = "Notas Laboratorio de computacion III";
+  const randomBody = "Contenido";
+
+  return (
+    <div className="blog-post">
+      <Title title={randomTitle} />
+      <Main body={randomBody} />
+    </div>
+  );
+}

src/practica_2/components/Body.jsx

@@ -0,0 +1,8 @@
+export default function Body({body}) {
+
+  return (
+    <>
+        <div>{body}</div>
+    </>
+  )
+}

src/practica_2/components/Header.jsx

@@ -0,0 +1,7 @@
+import Title from './Title';
+
+export default function Header({title}) {
+  return (
+    <Title title={title}/>
+  )
+}

src/practica_2/components/Main.jsx

@@ -0,0 +1,25 @@
+import Body from './Body';
+
+const links = [{
+    name: 'Google',
+    url: 'https://google.com',
+},
+{
+    name: 'Youtube',
+    url: 'https://youtube.com',
+}]
+
+export default function Main({body}) {
+  return (
+    <>
+      <Body body={body} />
+      <nav>
+          <ul>
+              {links.map(link => {
+               <a href={link.url}>{link.name}</a>
+              })}
+          </ul>
+      </nav>
+    </>
+  )
+}

src/practica_2/components/Page.jsx

@@ -0,0 +1,8 @@
+export default function Page({children}) {
+
+  return (
+    <div>
+        {children}
+    </div>
+  )
+}

src/practica_2/components/Title.jsx

@@ -0,0 +1,8 @@
+export default function Title({title}) {
+
+  return (
+    <>
+        <h1>{title}</h1>
+    </>
+  )
+}