13 | )
14 | }
15 |
16 |
17 | /* 💡 Este componente renderiza 1 Tweet basado en los datos recibidos en la prop `tweet`
18 | La prop `tweet` es un objecto que contiene { avatar, author, tag, date, content }.
19 | Tienes que acceder a los datos de la prop tweet para poder renderizarlos.
20 | Puedes usar destructuring o acceder directamente sus propiedades
21 | */
22 |
23 | const Tweet = ({ tweet }) => {
24 |
25 | return (
26 |
27 |
28 |
29 |
30 | {/* author */}
31 | @{/* tag */} {/* date */}
32 |
33 |
{/* content*/ }
34 |
35 |
36 |
37 | )
38 | }
39 |
40 | /* 🏋️♂️ 3. Implementa la lista de Tweets basado en el arreglo de tweets recibido mediante props.
41 | Esta lista renderiza componentes Tweet.
42 | No olivdes la prop key. */
43 | const TweetList = ({ tweets = [] }) => {
44 | return (
45 |
46 | {/* 💡 Aquí debes iterar sobre la prop tweets para renderizar */}
47 |
48 | )
49 | }
50 |
51 | export default TweetList
--------------------------------------------------------------------------------
/leccion03/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Curso: React desde cero - Lección 03
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/leccion07/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Curso: React desde cero - Lección 07
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
62 |
63 |
64 |
--------------------------------------------------------------------------------
/leccion06/Readme.md:
--------------------------------------------------------------------------------
1 | # Lección 06 - Renderizado condicional
2 |
3 | Una interfaz es la forma de representar datos en la pantalla para facilitar la interpretación de parte del usuario y también para permitir interactuar con esos datos. Es común que en dependiendo de alguna acción del usuario o de alguna particularidad de los datos quieras no mostrar ciertos componentes, es decir, querrás renderizar tus componentes de forma condicional.
4 |
5 | Lograr esto es relativamente sencillo, sólo es necesario recordar que JSX no es un lenguaje de templates, si no, una forma más expresiva de realizar llamadas a la función `React.createElement`. También es adecuado que recuerdes que cada vez que quieras evaluar una expresión debes utilizar interpolación.
6 |
7 | Existen dos formas de lograr un rederizado condicional:
8 |
9 | - operador ternario
10 | - operadores lógicos
11 |
12 | > Es recomendable utilizar bloques condicionales u el operador ternario ya que el uso de simples operadores lógicos puede traer resultados inesperados
13 |
14 | > ¿Qué ocurre si evalúas la siguiente operación? `0 && algunaFuncionQueRetornaUnNumero()`
15 |
16 | ## 🐾 Primeros Pasos
17 |
18 | En esta lección revisaremos como renderizar componentes de forma condicional, es decir, definir cuando ser renderiza o no cierto componente.
19 |
20 | Para esto definiremos el siguiente ejemplo.
21 |
22 | > Una página de perfil de usuario que muestra sus contactos
23 |
24 | ## 🎯 Objetivos
25 |
26 | - Conocer los 2 métodos para renderizar componentes de forma condicional.
27 | - Conocer las limitaciones y resultados de cada método.
28 | - Reconocer por que no se puede utilizar un bloque condicional `if`
29 | - Ejercitar interpolación
30 |
31 | ## 🏋️♂️ Ejercicios
32 |
33 | 1. Renderiza el componente `` sólo cuando el atributo `contacts` está vacío utilizando un operador lógico
34 | 2. Lo mismo pero utizando el operador lógico `&&`
35 |
36 | ## 🍬 Crédito Extra
37 |
38 | - Intenta utilizar un bloque condicional `if-else`. ¿Cuál es el resultado? ¿Por qué?
39 |
40 |
41 | ## 📣 Feedback
42 | Por favor completa [este formulario](https://docs.google.com/forms/d/e/1FAIpQLSfVXaAKvJ7aj_de08YTet3g4Go5FV7QrI9TJWkYI1UDg1KW6A/viewform?usp=pp_url&entry.1045988887=Lección%2006)
--------------------------------------------------------------------------------
/leccion04/Readme.md:
--------------------------------------------------------------------------------
1 | # Lección 04 - Conociendo JSX
2 |
3 | JSX es una abstracción sobre la API `Reac.createElement` que permite expresar de forma aún más declarativa la definición de la UI que quieres renderizar.
4 |
5 | JSX es una forma más intuitiva de crear componentes, al menos más intuitiva o declarativa que la API `React.createElement`. Es muy similar a HTML.
6 |
7 | Pero JSX no es javascript por lo que necesitamos algunas herramientas extra, en particular [Babel](https://babeljs.io).
8 |
9 | Babel se encarga de transpilar o transformar el código JSX en javascript puro, es decir en llamadas a `React.createElement`.
10 |
11 | Es una buena idea recordar que tras el uso de JSX hay un grupo de llamadas a `React.createElement` a modo de “compilador humano". Esto te ayudará cuando necesites realizar operaciones complejas sobre JSX.
12 |
13 | ## 🐾 Primeros Pasos
14 |
15 | Iniciaremos los primeros pasos utilizando JSX para crear elementos y componentes React incluyendo anidación, comprendiendo así la ventajas que ofrece el uso de JSX.
16 |
17 | Para eso primero agregaremos babel a nuestra app, inicialmente usaremos una versión “standalone” que permite ejecutar el proceso de transpilación directamente en el browser. Es importante mencionar que esta forma estática de uso de Babel no es la adecuada para producción, para esos casos estarás ejecutando el proceso de compilación en tiempo de compilación, antes de hacer tu deploy.
18 |
19 | ## 🎯 Objetivos
20 |
21 | - Crear componentes y elementos JSX.
22 |
23 | Para lograr esto primero debemos agregar Babel a nuestro proyecto, lo haremos directamente con un snippet en nuestro HTML
24 |
25 | ```other
26 |
27 | ```
28 |
29 | Además tenemos que realizar una pequeña modificación extra, en el tag `
39 |
40 | ```
41 |
42 | 3. Explorar nuestros archivos y verificar que React está disponible
43 |
44 | > La aplicación es servida por [Vite](https://vitejs.dev/), para ejecutar y ver el resultado de tu trabajo puedes ejecutar en la terminal y seleccionar la lección corresondiente
45 |
46 | > `$ npm run dev`
47 |
48 | Debes revisar que al cargar el archivo html React esté disponible en el scope global. Tip: utiliza las DevTools
49 |
50 | ## 🍬 Crédito Extra
51 |
52 | - Escribe en tu archivo un simple console.log para identificar que `React` está disponible.
53 |
54 | ## 📣 Feedback
55 | Por favor completa [este formulario](https://docs.google.com/forms/d/e/1FAIpQLSfVXaAKvJ7aj_de08YTet3g4Go5FV7QrI9TJWkYI1UDg1KW6A/viewform?usp=pp_url&entry.1045988887=Lección%2002)
--------------------------------------------------------------------------------
/leccion12/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Curso: React desde cero - Leccion 12s
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/leccion12/Readme.md:
--------------------------------------------------------------------------------
1 | # Lección 12 - Formularios - Componentes no controlados
2 |
3 | ## Componentes no-Controlados
4 |
5 | La gran diferencia con los componentes controlados, es que en este caso el elemento no es manejado por el estado de su componente Padre, si no, se utiliza directamente el DOM.
6 |
7 | Para escribir un componente no controlado conoceremos brevemente otro **hook**.
8 |
9 | En estos componentes, en vez de escribir un manejador de eventos para cada actualización de estado podemos usar un **ref** para obtener los valores directamente desde el DOM.
10 |
11 | Un **ref** es una "válvula de escape" del flujo de datos de un componente React. El flujo normal es que las `props` sean la única forma en que un componente padre interactúe con los componente que renderiza. Si necesitas modificar un componente hijo, simplemente actualizas las `props` y este se re-renderizará.
12 |
13 | **ref** te provee una forma de acceder a los nodos del DOM o elementos que son creados "on-the-fly" en el renderizado, ejemplos de uso de esto es:
14 |
15 | - Manejar el foco o selección de texto de un elemento
16 | - Inicializar animaciones de forma imperativa.
17 | - Integración de librerías externas no directamente compatibles con React.
18 |
19 | Para crear un **ref** utilizamos el hook `useRef` que crea un objeto que se mantiene consistente entre diferentes renderizados del componente, es decir, cuando el ref cambia no se lanza un nuevo render. El objeto tiene un atributo llamado `current` que se mantiene actualizado. Para interactuar con el DOM, puedes pasar el `ref` a cualquier elemento y React se enlazar el valor de `current` con el elemento en el DOM.
20 |
21 | ```javascript
22 | const Component = () => {
23 | const inputRef = React.useRef()
24 |
25 | const onClickButton = () > {
26 | console.log(inputRef.current.value)
27 | }
28 |
29 | return (
30 |
31 | Click
33 |
34 | )
35 | }
36 | ```
37 |
38 | ## Form
39 |
40 | Como ya sabemos el evento `onSubmit` del formulario recibe una función que permite capturar o reunir la información del formularia para después ser procesada.
41 |
42 | Si estás utilizando componentes no-controlados, tendrás que acceder a los `ref` de cada elemento para obtener su valor
43 |
44 | ## 🐾 Primeros Pasos
45 |
46 | En esta lección trabajaremos con elementos de un formulario para capturar información del usuario.
47 |
48 | Para esto usaremos **componentes no-controlados** y definiremos una función para manejar el envío del formulario.
49 |
50 | ## 🎯 Objetivos
51 |
52 | - Conocer el uso básico de un `ref`.
53 | - Capturar los datos de un form.
54 | - Conocer componentes no-controlados.
55 |
56 | ## 🏋️♂️ Ejercicios
57 |
58 | 1. Define el evento `onSubmit` para el form.
59 | 2. Captura los datos desde los ref utilizados.
60 |
61 |
62 | ## 📣 Feedback
63 | Por favor completa [este formulario](https://docs.google.com/forms/d/e/1FAIpQLSfVXaAKvJ7aj_de08YTet3g4Go5FV7QrI9TJWkYI1UDg1KW6A/viewform?usp=pp_url&entry.1045988887=Lección%2012s)
--------------------------------------------------------------------------------
/leccion10/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Curso: React desde cero - Leccion 10
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/leccion03/Readme.md:
--------------------------------------------------------------------------------
1 | # Lección 03 - El mundo sin JSX
2 |
3 | React ofrece una API “cruda” que te permite crear componentes y en realidad realizar todo lo que pienses sin necesidad de utilizar JSX.
4 |
5 | Esta API es la que se encarga de la creación de los componentes y elementos sin que tengas que tocar directamente la API imperativa del DOM, aún así la API de React mantiene cierta semejanza con el DOM.
6 |
7 | DOM API:
8 |
9 | `document.createElement(‘h1’)`
10 |
11 | React API.
12 |
13 | `React.createElement(‘h1’, props)`
14 |
15 | La gran (e importante) diferencia es que la API de React acepta props. Un objeto que describe los atributos que este componente u elemento tendrá. En el caso de la API del DOM, si quieres modificar, por ejemplo, el contenido de texto de un elemento harías:
16 |
17 | ```javascript
18 | const h1 = document.createElement('h1')
19 | h1.textNode = "Este es el título"
20 | ```
21 |
22 | Con la API de React tienes una forma más declarativa:
23 |
24 | ```javascript
25 | const h1 = React.createElement('h1', { children: 'Este es el titulo' })
26 | ```
27 |
28 | Es también importante notar que para poder ejecutar React en el browser debes agregar dos script base `react` y `react-dom`.
29 |
30 | `react` es la librería que implementa las API necesarias para crear y manejar tus componentes. `react-dom` es quien "traduce" el árbol de componentes de React a algo que el DOM pueda entender.
31 |
32 | Para renderizar tus componentes en pantalla usamos
33 |
34 | ```javascript
35 | ReactDOM.render(rootElement, tuApp)
36 | ```
37 |
38 | ## 🐾 Primeros Pasos
39 |
40 | En esta lección revisaremos como utilizar la API “cruda” para crear elementos y componentes React.
41 |
42 | ## 🎯 Objetivos
43 |
44 | - Conocer la API base de React para crear elementos y componentes.
45 | - Notar la diferencia entre elemento y componente.
46 |
47 | ## 🏋️♂️ Ejercicios
48 |
49 | 1. Crea una interfaz utilizando las API de Javascript.
50 | Para este ejercicio crearás elementos utilizando `document.createElement` y `document.appendChild`.
51 |
52 | - [ ] Crea un elemento H1.
53 | - [ ] Crea una lista de al menos dos items.
54 |
55 | 2. Crear un elemento h1 utilizando las API de React.
56 |
57 | Para este ejercicio crearás un elemento `h1` utilizando `React.createElement` y lo desplegarás en la página principal.
58 |
59 | 3. Crear elementos anidados.
60 |
61 | En este caso tendrás que utilizar la api `React.createElement` para crear un grupo de componentes anidados.
62 | La estructura a crear es:
63 | ```html
64 |
Hola Mundo!
65 | ```
66 |
67 | Tip: Recuerda que `React.createElement` acepta como segundo parámetros un arreglos de `props` donde una de ellas puede ser `children`
68 |
69 | ## 🍬 Crédito Extra
70 |
71 | 1. Utilizando `React.createElement` crea una lista de 3 elementos utilizando `ul` y `li`.
72 | 2. ¿Como definirías esta API. Imperativa o Declarativa? ¿Cómo se relaciona con la API nativa del DOM?
73 |
74 |
75 | ## 📣 Feedback
76 | Por favor completa [este formulario](https://docs.google.com/forms/d/e/1FAIpQLSfVXaAKvJ7aj_de08YTet3g4Go5FV7QrI9TJWkYI1UDg1KW6A/viewform?usp=pp_url&entry.1045988887=Lección%2003)
--------------------------------------------------------------------------------
/leccion13/src/components/Main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Image, Gif, Poll, Emoticon, Schedule } from '../assets/ToolbarImages';
3 | /* 💡 Este componente es el que se encarga de renderizar la lista de Tweets */
4 | import TweetList from './TweetList'
5 | /* 💡 Este es un arreglo de tweets que se renderizarán. */
6 | import data from '../tweet.json'
7 | /* 💡 Este es el contenido de un tweet, contiene los datos del usuario que crea un tweet
8 | será de utilidad para la funcionalidad de efectivamente twittear y mostrar el
9 | contenido en la lista de tweets */
10 | const fakeTweet = {
11 | avatar: "https://robohash.org/tweeter.png",
12 | author: "Bax Jowitt",
13 | tag: "bjowitt0",
14 | date: "10/6/2020",
15 | id: new Date().getTime()
16 | }
17 |
18 | // 💡 Esta es una lista de imagenes (Estas imagenes son componentes React). El componente Toolbar debe renderizarlas.
19 | // no olvides utilizar la prop `key`.
20 | // Este componente Toolbar define
21 | const images = [Image, Gif, Poll, Emoticon, Schedule]
22 | const Toolbar = () => {
23 | return (
24 |
35 | )
36 | }
37 |
38 |
39 | // 🏋️♂️ 2. Crea el componente formulario para capturar información del usuario
40 | // Puedes utilizar componentes controlados o no controlados
41 | // 💡 Si usas componentes controlados recuerda usarás el hook React.useState('')
42 | // 💡 Si usas componentes NO-controlados recuerda usarás el hook React.useRef()
43 | // Encuentra más información [en este post](https://escuelafrontend.com/articulos/las-diferencias-entre-componentes-controlados-y-no-controlados-en-react)
44 |
45 | const TweetForm = () => {
46 | // Define aquí el hook que usarás
47 |
48 | // 💡 Esta es la función que se ejecutará al presionar el boton "Twittear"
49 | // Esta función debe ejecutar la prop `onSubmit` que el formulario recibe
50 | const submit = (event) => {
51 |
52 | }
53 |
54 | // 💡 Si estás utilizando componentes controlados no olvides que
55 | // necesitas una función que te permita actualizar el estado del input/textarea
56 | /*const updateValue = (event) => {
57 |
58 | }*/
59 | return (
60 |
70 | )
71 | }
72 |
73 |
74 | /* 💡 Este es el componente principal que renderizará los componentes previamente definidos
75 | Este componente es quien recibirá la lista de datos */
76 | const Main = () => {
77 | /* 🍬 Necesitas capturar los datos en un estado para poder actualizar su contenido
78 | y debes compartir este estado con el componente "TweetList" */
79 |
80 | return (
81 |
82 |
83 | {/* 💡 Aqui debes renderizar el componente TweetForm y TweetList. */}
84 |
85 | )
86 | }
87 |
88 |
89 |
90 | export default Main
--------------------------------------------------------------------------------
/leccion11/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Curso: React desde cero - Leccion 11
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/leccion09/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Curso: React desde cero - Leccion 09
8 |
9 |
10 |
11 |
12 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
99 |
100 |
101 |
--------------------------------------------------------------------------------
/leccion10/Readme.md:
--------------------------------------------------------------------------------
1 | # Lección 10 - Eventos
2 |
3 | Una aplicación web tiene dos tareas esenciales: presentar información al usuario y “reaccionar” a acciones que el usuario realiza. Hasta ahora hemos visto como presentar información - creando componentes para renderizar cierto contenido - pero, ¿cómo reaccionar a una acción del usuario?.
4 |
5 | Reaccionar al usuario es conocido como manejar eventos y esto es algo que javascript ya implementa por medio de los eventos del DOM.
6 |
7 | Los eventos en React son similares a los eventos del DOM, con pequeñas diferencias.
8 |
9 | - Los eventos en React son nombrados en `camelCase` por ejemplo . `onClick`.
10 | - El evento que pasas como argumento es una función y no un string como en el DOM.
11 |
12 | ```javascript
13 |
14 | ```
15 |
16 | Otra diferencia se encuentra en una práctica común al escribir HTML y vanilla JS: utilizar `return false;` para evitar el comportamiento por defecto del evento en cuestión. En React debes utilizar explicitamente `preventDefault`. ¿por qué? React no expone los eventos del DOM directamente, al contrario, expone una API llamadas `SyntheticEvent`.
17 |
18 | Estos eventos son implementados de forma compatible con todos los navegadores (basados en el [spec W3C](https://www.w3.org/TR/DOM-Level-3-Events/)). Cuando defines un manejador de eventos como `onClick` la función que defines como argumento recibe un evento sintético. Este evento tiene la misma interfaz que los eventos nativos del navegador, por lo que su uso se hace "conocido”.
19 |
20 | La idea de usar esta API es que React normaliza los eventos para hacer que funcionen de la misma manera en todos los navegadores.
21 |
22 | Ahora, volviendo al uso de `preventDefault`. ¿Cómo evitas el comportamiento por defecto de un evento?. Simplemente accediendo al argumento evento y llamando `preventDefault`
23 |
24 | ```javascript
25 | function onClickEvent(event) {
26 | event.preventDefault()
27 | }
28 | ```
29 |
30 | Una práctica común, es utilizar los eventos para pasar ciertos datos de un lado a otro, por ejemplo para pasar el `id` de algún elemento para crear una llamada al servidor, para lograr esto debes pasar argumentos extra a la función que usas como manejador de eventos, para hacer esto simplem`nte rodeas tu función con otra función.
31 |
32 | ```javascript
33 | items.map(item => {
34 |
35 | })
36 | ```
37 |
38 | ## 🐾 Primeros Pasos
39 |
40 | En esta lección trabajaremos agregando estilos utilizando los dos métodos base para definir el css de tus componentes.
41 |
42 | Para esta lección usaremos algunos elementos que solicitan acciones de usuario para así capturar sus eventos, también crearemos un componente con el mismo objetivo
43 |
44 | - Boton
45 | - Selectbox
46 | - Input
47 | - div: Si!. En React es posible agregar un manejador de eventos a cualquier componente. Los eventos de React son “sintéticos” y puede ser utilizados en cualquier elemento.
48 |
49 | ## 🎯 Objetivos
50 |
51 | - Aprender como agregar eventos a un elemento.
52 | - Conocer como manejar los eventos definidos.
53 | - Conocer como definir componentes que acepten eventos.
54 |
55 | ## 🏋️♂️ Ejercicios
56 |
57 | 1. Crea un elemento botón que al ser clickeado muestra un alerta.
58 | 2. Crea un elemento `select` que al cambiar el valor seleccionado muestra una alerta con el valor.
59 | 3. Crea un elemento input que muestra en consola lo que se escribe.
60 |
61 | ## 🍬 Crédito Extra
62 |
63 | 1. Crea un **componente** `Button` que acepta una prop `onClick`. Esta función estará definida en el componente padre.
64 |
65 | ## 📣 Feedback
66 | Por favor completa [este formulario](https://docs.google.com/forms/d/e/1FAIpQLSfVXaAKvJ7aj_de08YTet3g4Go5FV7QrI9TJWkYI1UDg1KW6A/viewform?usp=pp_url&entry.1045988887=Lección%2010)
--------------------------------------------------------------------------------
/leccion06/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Curso: React desde cero - Lección 06
8 |
9 |
10 |
11 |
12 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
119 |
120 |
121 |
--------------------------------------------------------------------------------
/leccion00/Readme.md:
--------------------------------------------------------------------------------
1 | # Lección 00: Introducción
2 |
3 | React es una poderosa librería para crear interfaces de usuario para tus aplicaciones web. Propone un modelo de componentes que al interactuar entre si proveen grandes experiencias de usuario.
4 |
5 | Al trabajar con React tendremos que tomar varias decisiones ya que la librería no proporciona opiniones sobre como manejar ciertos aspectos de tu aplicación, si no, sólo se enfoca - y de muy buena manera - en ofrecer una forma de crear y manejar una interfaz.
6 |
7 | **¿Qué necesitas para comenzar?**
8 |
9 | ## Primeros Pasos
10 |
11 | Antes de iniciar la primera lección en profundidad, revisemos los contenidos básicos y cuál es el proceso y resultado esperado de este workshop.
12 |
13 | ### 🎯Objetivos
14 |
15 | - Bienvenid@ al workshop
16 | - Revisar que aprenderás.
17 |
18 | ## Bienvenid@
19 | 👋 Mi nombre es Matías Hernández, padre, desarrollador, podcaster, escritor e instructor.
20 |
21 | Trabajo formalmente desde hace ya 11 años donde al menos 6 de ellos han sido principalmente dedicados a desarrollar con React.
22 |
23 | 🐦 Encuentrame en twitter como [@matiasfha](https://twitter.com/matiasfha)
24 |
25 | ## ¿Qué esperar de este workshop?
26 | Este workshop está orientado a quienes quieren comenzar a trabajar con React o incluso para quienes llevan un tiempo trabajando ya que profundizaremos en algunos de los conceptos y modelos mentales base para entendeer cómo y por qué de algunas técnicas o métodos de uso de React.
27 |
28 | Comenzaremos desde los fundamentos revisando que es un componente y como **Pensar en React** para finalizar implementando una interfáz estática.
29 |
30 |
31 | ## 🍬 Créditos Extra
32 |
33 | Revisemos algunos artículos que nos ayudaran a preparar los conceptos base que usaremos en el curso
34 | - [ ] [¿Qué es Babel?](https://www.freecodecamp.org/espanol/news/que-es-babel/) - [Matías Hernánedez](https://twitter.com/matiasfha)
35 | - [ ] [¿Qué es Inmutabilidad en Javascript](https://www.freecodecamp.org/espanol/news/que-es-inmutabilidad-en-javascript/) - [Matías Hernánedez](https://twitter.com/matiasfha)
36 | - [ ] [¿Qué es un closure en Javascript](https://www.freecodecamp.org/espanol/news/que-es-un-closure-en-javascript/) - [Matías Hernánedez](https://twitter.com/matiasfha)
37 | - [ ] [Diferences Entre Valor y Referencia en Javascript](https://www.escuelafrontend.com/articulos/diferencias-valor-y-referencia-en-js) - [Claudia Valdivieso](https://twitter.com/lavaldi_)
38 | - [ ] [Lo que Nadie te Enseña Sobre la Igualdad en Javascript](https://www.escuelafrontend.com/articulos/nadie-te-ensena-sobre-la-igualdad-en-js) - [Horacio Herrera](https://twitter.com/hhg2288)
39 | - [ ] [Aprendamos Sobre los Tipos de Datos Primitivos en Javascript](https://www.escuelafrontend.com/articulos/los-tipos-primitivos-en-javascript) - [Horacio Herrera](https://twitter.com/
40 | - [ ] [Entiende Hoisting en Javascript con Ejemplos Prácticos](https://escuelafrontend.com/articulos/hoisting-ejemplos-practicos) - [Claudia Valdivieso](https://twitter.com/lavaldi_)
41 | - [ ] [Entiende el Concepto de Elevación (Hoisting) en JavaScript](https://escuelafrontend.com/articulos/hoisting-javascript) - [Horacio Herrera](https://twitter.com/hhg2288)
42 | - [ ] [Diferencias Entre Declaraciones de Funciones y Expresiones de Funciones](https://escuelafrontend.com/articulos/declaraciones-de-funciones-y-expresiones-de-funciones) - [Horacio Herrera](https://twitter.com/hhg2288)
43 | - [ ] [La guía definitiva de Métodos de Arreglos](https://escuelafrontend.com/articulos/metodos-de-arreglos) - [Matías Hernánedez](https://twitter.com/matiasfha)
44 | - [ ] [4 formas de eliminar elementos duplicados en un arreglo con Javascript](https://matiashernandez.dev/4-formas-de-eliminar-elementos-duplicados-en-un-arreglo-con-javascript)
45 | - [ ] [Arreglos de objetos en Javascript: Cómo crear y actualizar su contenido](https://matiashernandez.dev/arreglos-de-objetos-en-javascript-como-crear-y-actualizar-su-contenido)
46 | - [ ] [Repositorio: Javascript Moderno](https://github.com/matiasfha/modern-javascript)
47 | - [ ] [¿Cómo crear una aplicación en React?](https://escuelafrontend.com/articulos/como-crear-una-aplicacion-en-react)
--------------------------------------------------------------------------------
/leccion08/Readme.md:
--------------------------------------------------------------------------------
1 | # Lesson 08 - Arrays
2 |
3 | Una de las estructuras de datos más utilizada en cualquier aplicación web es el Array. Esta simple estructura es la forma más sencilla de contener y manipular colecciones de datos. Por esto, es importante conocer como trabajar con ella al momento de utilizar componentes React.
4 |
5 | Una de las tareas más comunes relacionadas con arrays es la idea de renderizar una lista de elementos en la interfaz, esta lista de elementos está representada por un array.
6 |
7 | Para poder renderizar una lista debemos iterar sobre ella y como ya revisamos en la lección sobre JSX, podemos utilizar interpolación para escribir código javascript válido en forma de una expresión que nos permita iterar sobre los elementos, en este caso usaremos `Array.map` .
8 |
9 | > Una expresión produce un valor y puede ser escrita en cualquier parte donde un valor sea esperado, por ejemplo como un argumento de una función.
10 |
11 | `Array.map` permite iterar sobre un arreglo y retorna un nuevo arreglo, es decir retorna un valor. Este nuevo arreglo es el que será renderizado por React.
12 |
13 | Un componente React acepta arreglos de valores o componentes en su prop `children` por lo que podemos transformar los elementos de arreglo en un nuevo componente o simplemente renderizar el arreglo directamente.
14 |
15 | ```jsx
16 | const ui = (
17 | arreglo.map(item => item)
18 | )
19 | ```
20 |
21 | Una vez que tenemos el arreglo renderizado podemos ver que React nos avisa de un problema: Nos falta definir una prop llamad a `key` en nuestros compoenntes.
22 |
23 | Esta prop debe recibir un valor único e invariable. Esto es simple de resolver en un caso donde el arreglo de datos utilizado es fijo y no cambia en el tiempo, podemos resolver este problema simplemente utilizando un valor como el indice del elemento en el arreglo. ¿Pero que ocurre si el arreglo de datos cambia en el tiempo?
24 |
25 | La prop `key` le ayuda a React a mantener una forma de "rastrear" los elementos renderizados en cada proceso de actualización, si la prop no está presente React no podrá saber que elemento cambió y donde estaba y puede mezclar algunas cosas.
26 |
27 | Un caso es que renderizas la lista y despues agregas un nuevo elemento. React no podrá identificar si el elemento que agregaste se debe ubicar al principio, final o en medio, esto es por que React no puede entender nuestras intenciones y solo ve que en un momento se le entrego una lista a renderizar, y luego se le pide renderizar una lista diferente. React intenta comparar el antes y después por lo que hará su mejor suposición y muchas veces esto funciona.
28 |
29 | Pero las cosas se complican cuando alguno de los elementos del arreglo es un componente que contiene cierto estado React puede errar y complicar el resultado de tu UI.
30 |
31 | > Aquí estado puede ser tanto estado interno de un componente personalizado o incluso estado de un elemento HTML como un input.
32 |
33 | Puedes profundizar más sobre como funciona la prop `key` revisando el siguiente artículo en Escuela Frontend: [¿Cómo funciona la prop key en React?](https://escuelafrontend.com/articulos/como-funciona-la-prop-key-en-react)
34 |
35 |
36 |
37 | ## 🐾 Primeros Pasos
38 |
39 | En esta lección trabajaremos renderizando múltples elementos de forma “automática”. Para ello construiremos una lista de elementos basados en un arreglo de strings.
40 |
41 | ## 🎯 Objetivos
42 |
43 | - Conocer como renderizar múltiples elementos utilizando interpolación y `Array.map`
44 | - Comprender que hace la prop `key` y por que es necesaria.
45 |
46 | ## 🏋️♂️ Ejercicios
47 |
48 | 1. Renderiza manualmente una lista de elementos.
49 | 2. Utiliza `Array.map` para crear una lista de elementos basado en un arreglo de strings.
50 | 3. Agrega la prop `key` faltante utilizando un valor único.
51 |
52 | ## 🍬 Crédito Extra
53 |
54 | - Revisa el siguiente demo sobre como funciona la prop `key`. ¿Cuál es el problema al eliminar elementos?. ¿Cómo el uso de la prop `key`afecta el funcionamiento del demo?
55 | [https://codesandbox.io/s/react-array-keys-qmwwk?from-embed=&file=/src/App.js](https://codesandbox.io/s/react-array-keys-qmwwk?from-embed=&file=/src/App.js)
56 |
57 | ## 📣 Feedback
58 | Por favor completa [este formulario](https://docs.google.com/forms/d/e/1FAIpQLSfVXaAKvJ7aj_de08YTet3g4Go5FV7QrI9TJWkYI1UDg1KW6A/viewform?usp=pp_url&entry.1045988887=Lección%2008)
--------------------------------------------------------------------------------
/leccion11/Readme.md:
--------------------------------------------------------------------------------
1 | # Lección 11 - Formularios - Componentes Controlados
2 |
3 | La forma primaria de obtener datos de un usuario en un sitio web es por medio del formularios.
4 |
5 | Un formulario permite manejar un conjunto de elementos que capturan información del usuario. A su vez, permiten comunicarse con el servidor o una api externa al ser enviados.
6 |
7 | Los elementos de un formulario funcionan ligeramente diferente a otros elementos HTML base ya que estos, de forma nativa, manejan un estado interno que les permite almacenar los datos capturados.
8 |
9 | En React existen dos formas de manejar los formularios:
10 |
11 | - **Componentes Controlados**
12 | - **Componentes no-Controlados**
13 |
14 | ## Componentes Controlados
15 |
16 | Como mencione antes, los elementos de un formulario HTML mantienen su propio estado interno y lo actualizan en base a las acciones del usuario. React también maneja su prop estado y si hablamos de estado mutable React ofrece su propia API para manejarlo. Esta es nuestra primera aproximación al manejo de estado.
17 |
18 | La forma en que utilizas el estado en React es por medio de la función llamada `useState` esta función es parte de la api de **hooks**. Esta función es sencilla de utilizar, su intención almacenar en un solo lugar el estado que el componente renderizará. Esto permite que tus componentes reaccionen al cambio de estado y se vuelvan a renderizar para reflejar dicho cambio.
19 |
20 | Su forma de uso es sencilla
21 |
22 | ```javascript
23 | const [ count, setCount ] = React.useState(0)
24 | ```
25 |
26 | La función recibe un argumento que representa el estado inicial, en este caso el valor `0` y retorna un arreglo o "tupla” cuyo primera valor representa el estado actual y el segundo valor siempre será una función (que puedes llamar como quieras) que te permite actualizar dicho estado.
27 |
28 | Utilizaremos esta funcionalidad de React para mantener una “sola fuente de la verdad” al utilizar elementos de formulario, es decir, el componente que renderiza los elementos de formulario es también quien controlará el estado de los elementos en base a las acciones del usuario. Estos elementos que son manejados por el estado del componente padre son llamados **componentes controlados**.
29 |
30 | En este tipo de componentes, el valor del input (o de cualquier otro elemento del formulario) es manejado por el estado de React. Ciertamente esto implica escribir un poco más de código, pero también te da gran poder y flexibilidad permitiéndote por ejemplo pasar este valor como prop a toras partes de la interfaz.
31 |
32 | ## Form
33 |
34 | El element `