├── 00-herramientas
    └── README.md
├── 01-jsx
    └── README.md
├── 02-estado
    └── README.md
├── 03-eventos
    └── README.md
├── LICENSE
├── README.md
├── assets
    └── logo.png
├── mentorxs
    └── gonzalo-pozzo
    │   └── README.md
├── proyectos
    ├── README.md
    ├── semana-1
    │   ├── README.md
    │   └── assets
    │   │   ├── logo.svg
    │   │   └── spec.png
    ├── semana-2
    │   ├── README.md
    │   └── assets
    │   │   ├── logo.svg
    │   │   └── spec.png
    ├── semana-3
    │   ├── README.md
    │   └── assets
    │   │   └── logo.png
    └── semana-4
    │   ├── README.md
    │   └── assets
    │       ├── logo.svg
    │       └── spec.png
└── recursos-complementarios
    └── README.md


/00-herramientas/README.md:
--------------------------------------------------------------------------------
 1 | # Herramientas para crear un proyecto
 2 | Tenemos varias maneras de crear un proyecto en React, vamos a repasar algunas de las que más me gustan.
 3 | 
 4 | ### CodeSandbox
 5 | [CodeSandbox](https://codesandbox.io/) es un entorno de desarrollo para distintas tecnologías, que nos permite crear proyectos basados en plantillas previamente creadas. Por lo que con solo un click podemos tener un proyecto de React + TypeScript corriendo en la nube sin bajar nada previamente.
 6 | 
 7 | ### Create React App
 8 | [Create React App](https://create-react-app.dev/) es una herramienta creada y mantenida por el equipo de React, que nos permite con un solo comando, crear un proyecto React. También posee plantillas que nos permiten extender sus funcionalidades (como la integración con TypeScript) y está pensada para ser `zero config`, esto significa, que si bien podemos extender sus funcionalidades mediante configuraciónes e instalación de dependencias, no necesitamos configurar nada para empezar a usarla.
 9 | 
10 | Para crear un proyecto React + TypeScript podemos correr:
11 | ```bash
12 | # NPM
13 | npx create-react-app mi-app --template typescript
14 | 
15 | # Yarn
16 | yarn create react-app mi-app --template typescript
17 | ```
18 | > Esto crearía una carpeta `mi-app` en donde estemos parado con nuestra terminal.
19 | 
20 | ### Vite
21 | [Vite](https://vitejs.dev/) es una herramienta de desarrollo (de similar uso a `create-react-app`) que nos permite crear aplicaciónes en diversas tecnologías con solo un comando. Su velocidad y performance es mayor actualmente a `create-react-app`.
22 | 
23 | Para crear un proyecto React + TypeScript podemos correr:
24 | ```bash
25 | # NPM
26 | npx @vitejs/app mi-app --template react-ts
27 | 
28 | # Yarn
29 | yarn create @vitejs/app mi-app --template react-ts
30 | ```
31 | > Esto crearía una carpeta `mi-app` en donde estemos parado con nuestra terminal.
32 | 
33 | [⏪ Inicio](../) | [JSX ⏩](../01-jsx)


--------------------------------------------------------------------------------
/01-jsx/README.md:
--------------------------------------------------------------------------------
  1 | # JSX
  2 | Antes de adentrarnos en JSX vamos a hacer un pequeño resumen de que o cual es la idea de usar React.
  3 | 
  4 | * React es una librería para crear interfaces de usuario.
  5 | * Su sintaxis es parecida a `HTML` (o `XML`) y se llama `JSX`.
  6 | * React propone dividir nuestra aplicación en componentes que podamos reutilizar.
  7 | 
  8 | ## Analizando una aplicación React
  9 | Veamos el código de una aplicación web en React:
 10 | ```jsx
 11 | import ReactDOM from 'react-dom'
 12 | 
 13 | const App = () => {
 14 |   return (
 15 |     <div>
 16 |       <p>Hola Goncy</p>
 17 |     </div>
 18 |   )
 19 | }
 20 | 
 21 | ReactDOM.render(<App />, document.getElementById('root'))
 22 | ```
 23 | > Asumimos que este archivo es importado desde un index.html y previamente compilado por create-react-app o vite.
 24 | 
 25 | Vamos a dividir esto en 3 partes:
 26 | ```js
 27 | import ReactDOM from 'react-dom'
 28 | ```
 29 | Importamos `ReactDOM`, una librería que sabe como convertir código React a vanilla js para ser comprendido por un navegador web.
 30 | 
 31 | ## Componentes
 32 | 
 33 | ```jsx
 34 | const App = () => {
 35 |   return (
 36 |     <div>
 37 |       <p>Hola Goncy</p>
 38 |     </div>
 39 |   )
 40 | }
 41 | ```
 42 | Definimos una función `App` en `PascalCase` (mayúscula al principio de cada palabra) que retorna código `JSX` (ya vamos a hablar de esto después). A esto lo llamamos un componente.
 43 | 
 44 | ## ReactDOM.render
 45 | 
 46 | ```jsx
 47 | ReactDOM.render(<App />, document.getElementById('root'))
 48 | ```
 49 | Llamamos a la funcion `render` de ReactDOM pasandole nuestro componente `App` como si fuera un tag de HTML y el elemento del DOM donde queremos que nuestra aplicación se monte.
 50 | 
 51 | Como resultado obtenemos un `div` con un `p` dentro con el contenido `Hola Goncy`.
 52 | 
 53 | ## Interpolación
 54 | 
 55 | Volviendo a la definición de nuestro componente, también podemos usar código JavaScript dentro de el para luego usarlo en nuestra interfaz.
 56 | 
 57 | ```jsx
 58 | const App = () => {
 59 |   const name = "Goncy";
 60 | 
 61 |   return (
 62 |     <div>
 63 |       <p>Hola {name}</p>
 64 |     </div>
 65 |   )
 66 | }
 67 | ```
 68 | > Para usar código JavaScript dentro de le interfaz que devuelve nuestro componente, tenemos que envolverlo entre llaves.
 69 | 
 70 | ## JSX
 71 | 
 72 | Esta sintaxis que parece HTML / XML (lo que está entre parentesis luego del `return`) se llama `JSX`. En el proceso de compilación de nuestro código, realizado por vite, create-react-app o cual sea la herramienta que usemos, nuestro código JSX va a ser transformado a JavaScript vanilla para luego ser entendido por el navegador.
 73 | 
 74 | Y por que no usamos directamente JavaScript?
 75 | 
 76 | ```js
 77 | var App = function App() {
 78 |   return React.createElement(
 79 |     'div',
 80 |     null,
 81 |     React.createElement(
 82 |       'p',
 83 |       null,
 84 |       'Hola Goncy'
 85 |     )
 86 |   );
 87 | };
 88 | ```
 89 | Así se ve el código compilado y si bien no se ve "tan mal", cuando nuestros componentes empiezan a crecer, creeme que vas a agradecer estar escribiendo JSX.
 90 | 
 91 | ## Diferencias
 92 | 
 93 | Algunas diferencias con HTML / XML son:
 94 | * Los atributos de los elementos se escriben en camelCase (onClick en vez de onclick).
 95 | * class se escribe className (ya que class es una palabra reservada de JavaScript).
 96 | 
 97 | ## Multiples componentes
 98 | 
 99 | React propone crear componentes que puedan ser reutilizados en nuestra aplicación, por ende podemos usar componentes dentro de componentes.
100 | 
101 | ```jsx
102 | import ReactDOM from 'react-dom'
103 | 
104 | const Hello = () => <h2>Holissss</h2>
105 | 
106 | const App = () => {
107 |   const name = "Goncy";
108 | 
109 |   return (
110 |     <div>
111 |       <Hello />
112 |       <Hello />
113 |     </div>
114 |   )
115 | }
116 | 
117 | ReactDOM.render(<App />, document.getElementById('root'))
118 | ```
119 | > Esto devolvería un div con dos h2 dentro que dicen Holissss
120 | 
121 | ## Props
122 | 
123 | También podemos pasarle parametros a nuestros componentes (llamadas `props`) para agregar funcionalidad externa.
124 | 
125 | ```jsx
126 | import ReactDOM from 'react-dom'
127 | 
128 | const Hello = (props) => <h2>Holissss {props.name}</h2>
129 | 
130 | const App = () => {
131 |   return (
132 |     <div>
133 |       <Hello name="Goncy" />
134 |       <Hello name="Reancy" />
135 |     </div>
136 |   )
137 | }
138 | 
139 | ReactDOM.render(<App />, document.getElementById('root'))
140 | ```
141 | > Esto devolvería un div con dos h2 dentro que dicen Holissss Goncy y Holissss Reancy
142 | 
143 | Siempre que debamos pasar variables o código JavaScript debemos recordar que tiene que ser entre llaves, nuestras props no son la excepción.
144 | 
145 | ```jsx
146 | <Persona name="Goncy" edad={27 + 1} />
147 | ```
148 | 
149 | ## Fragments
150 | 
151 | Una cosa a notar es que cada componente de React puede devolver un solo elemento, así que si debemos devolver mas de uno debemos crear un `fragment` (elemento vacío) para contenerlos.
152 | 
153 | ```jsx
154 | const App = () => {
155 |   return (
156 |     <>
157 |       <Hello name="Goncy" />
158 |       <Hello name="Reancy" />
159 |     </>
160 |   )
161 | }
162 | ```
163 | 
164 | [⏪ Herramientas para crear un proyecto](../00-herramientas) | [Estado ⏩](../02-estado)


--------------------------------------------------------------------------------
/02-estado/README.md:
--------------------------------------------------------------------------------
 1 | # Estado
 2 | Hasta el momento todos nuestros componentes fueron simples y no necesitaban actualizarse a lo largo de la vida de nuestra aplicación. Podemos pensar al estado como una (o varias) variables que almacenan datos que podemos usar en nuestra aplicación, que pueden cambiar a lo largo del tiempo de ejecución de la aplicación.
 3 | 
 4 | ## useState
 5 | React nos provee un `hook` llamado `useState` que nos permite usar estado en nuestros componentes.
 6 | 
 7 | ```jsx
 8 | import React, { useState } from 'react'
 9 | import ReactDOM from 'react-dom'
10 | 
11 | const App = () => {
12 |   const [ counter, setCounter ] = useState(0)
13 | 
14 |   setTimeout(() => setCounter(counter + 1), 1000)
15 | 
16 |   return (
17 |     <div>{counter}</div>
18 |   )
19 | }
20 | 
21 | ReactDOM.render(<App />, document.getElementById('root'))
22 | ```
23 | 
24 | `useState`, al llamarlo como una función (que recibe el estado inicial como parametro), nos devuelve un array con dos elementos, el primero va a ser el dato o estado y el segundo es la función `setter`, que cada vez que la llamemos va a actualizar el valor del estado.
25 | 
26 | > Podés imaginarte que pasaría en esta aplicación?
27 | 
28 | ## Re-rendering
29 | En nuestros ejemplos anteriores, toda nuestra información era estática, por lo tanto no debíamos preocuparnos por como haríamos para actualizar la información que nuestra aplicación muestra en pantalla.
30 | 
31 | En realidad es bastante simple. Los únicos casos en los que un componente se volvería a renderizar (pintar su contenido en pantalla), es cuando las `props` o el `state` cambian.
32 | 
33 | ### Actualizando el estado
34 | Entonces, para actualizar el estado solo tengo que hacer `counter = counter + 1`?. NO.
35 | Para actualizar el estado debemos usar la función `setter` que nos devuelve `useState`, eso va a hacer que nuestro componente se vuelva a renderizar con el nuevo estado. Vamos a volver al ejemplo de arriba y veamos que pasa.
36 | 
37 | Tenemos el siguiente componente:
38 | ```jsx
39 | const App = () => {
40 |   const [ counter, setCounter ] = useState(0)
41 | 
42 |   setTimeout(() => setCounter(counter + 1), 1000)
43 | 
44 |   return (
45 |     <div>{counter}</div>
46 |   )
47 | }
48 | ```
49 | 
50 | Primer render (cuando la aplicación se monta):
51 | ```jsx
52 | const App = () => {
53 |   const [ counter, setCounter ] = useState(0)
54 | 
55 |   // Reemplazamos counter por lo que valdría en el primer render
56 |   setTimeout(() => setCounter(0 + 1), 1000)
57 | 
58 |   // Reemplazamos counter por lo que valdría en el primer render
59 |   return (
60 |     <div>{0}</div>
61 |   )
62 | }
63 | ```
64 | 
65 | Después de 1 segundo (cuando se ejecuta el `setTimeout`), se llama a la función setter y se actualiza nuestro estado, por ende tenemos un segundo render:
66 | Primer render (cuando la aplicación se monta):
67 | ```jsx
68 | const App = () => {
69 |   const [ counter, setCounter ] = useState(0)
70 | 
71 |   // Reemplazamos counter por lo que valdría en el segundo render
72 |   setTimeout(() => setCounter(1 + 1), 1000)
73 | 
74 |   // Reemplazamos counter por lo que valdría en el segundo render
75 |   return (
76 |     <div>{1}</div>
77 |   )
78 | }
79 | ```
80 | 
81 | Nuestro componente se vuelve a renderizar, por ende el `setTimeout` se vuelve a setear! Vuelve a setear nuestro estado después de un segundo y esto se repite infinitamente.
82 | 
83 | [⏪ JSX](../01-jsx) | [Eventos ⏩](../03-eventos)
84 | 


--------------------------------------------------------------------------------
/03-eventos/README.md:
--------------------------------------------------------------------------------
1 | # Eventos


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <a href="https://github.com/goncy/reancy">
 3 |     <img src="./assets/logo.png" alt="Reancy logo" width="300" />
 4 |   </a>
 5 | </p>
 6 | 
 7 | <h1 align="center">
 8 |   Workshop intensivo de React en 1 mes ⚡️
 9 | </h1>
10 | <h4 align="center">
11 |   (work in progress)
12 | </h4>
13 | 
14 | <br>
15 | 
16 | <p align="center">
17 |   <a href="https://discord.gg/rAmPWU6eHg">
18 |     <img alt="Discord" src="https://img.shields.io/discord/770339254101344256.svg?label=&logo=discord&style=for-the-badge" />
19 |   </a>
20 |   <a href="https://twitch.tv/goncypozzo">
21 |     <img alt="Twitch" src="https://img.shields.io/twitch/status/goncypozzo?style=for-the-badge" />
22 |   </a>
23 |   <a href="https://twitter.com/goncy">
24 |     <img alt="goncy" src="https://img.shields.io/twitter/follow/goncy?style=for-the-badge" />
25 |   </a>
26 |   <img alt="Github Stars" src="https://img.shields.io/github/stars/goncy/reancy?style=for-the-badge" />
27 | </p>
28 | 
29 | <h3 align="center">
30 |   Realizado en <a rel="noopener noreferrer" target="_blank" href="https://discord.gg/rAmPWU6eHg">Discord</a>, transmitido por <a rel="noopener noreferrer" target="_blank" href="https://twitch.tv/goncypozzo">Twitch</a>, by <a rel="noopener noreferrer" target="_blank" href="https://twitter.com/goncy">goncy</a>.
31 | </h3>
32 | 
33 | <br>
34 | 
35 | ## Modalidad
36 | El workshop está pensado para ser completado en 20 días de trabajo.
37 | 
38 | * **Lunes**: Correción de proyectos.
39 | * **Martes**, **Miércoles**, **Jueves**: Contenido.
40 | * **Viernes**: Presentación de nuevo proyecto.
41 | 
42 | > Todos los Lunes se *debe* presentar el proyecto para ser corregido, en caso de no hacerlo, quedará fuera del workshop.
43 | 
44 | ## Inscripción
45 | La inscripción sale 1000 ARS, que serán devueltos luego de completado el workshop. En caso de no completarlo, el dinero será donado a una organización sin fin de lucro, decidida por quienes completen el workshop.
46 | 
47 | ## Comunicación
48 | El workshop se llevará a cabo en un canal de [Discord](https://discord.gg/rAmPWU6eHg) y a su vez transmitido por [Twitch](https://twitch.tv/goncypozzo). Los participantes podrán hacer las preguntas necesarias durante la transmisión y contarán con un canal en discord para hacer preguntas y recibir feedback de sus proyectos.
49 | 
50 | ## Contenido
51 | Todo el contenido va a ser basado en los siguientes recursos:
52 | * [The beginners guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react)
53 | * [Fullstack Open](https://fullstackopen.com/)
54 | * [React2025](https://react2025.com/)
55 | 
56 | ### Conocimientos requeridos
57 | * Conocimiento básico de JavaScript, variables, funciónes, métodos de array (filter, map, reduce), valores de retorno, argumentos, parametros, objetos, primitivos.
58 | * Manejo básico de consola (instalar dependencias, correr comandos, moverse entre carpetas).
59 | * Conocimiento básico de git (clone, fork, pull, commit, push).
60 | 
61 | ### Herramientas requeridas
62 | * NodeJS > 10
63 | * Editor de código (VSCode recomendado)
64 | 
65 | ### Conocimientos deseados
66 | * Bases de TypeScript (tipos, interfaces, enums).
67 | * Conocimiento sobre scopes.
68 | * Conceptos de JavaScript moderno (imports, arrow functions, destructuring, spread operator, default params).
69 | 
70 | ## Cronograma
71 | * [Creando un proyecto](./00-herramientas)
72 | * [JSX](./01-jsx)
73 | * [Estado](./02-estado)
74 | * [Eventos](./03-eventos)
75 | 
76 | ## Proyectos
77 | * [Semana 1 - Lista de supermercado (Tradehelm)](./proyectos/semana-1)
78 | * [Semana 2 - Relojes del mundo (Coderio)](./proyectos/semana-2)
79 | * [Semana 3 - Juego de preguntas (Blackbox Vision)](./proyectos/semana-3)
80 | * [Semana 4 - Tienda por puntos (Aerolab)](./proyectos/semana-4)
81 | 
82 | ## Extras
83 | * [Recursos complementarios](./recursos-complementarios)
84 | * [Mentorxs](./mentorxs)
85 |     * [Gonzalo Pozzo](./mentorxs/gonzalo-pozzo)
86 | 
87 | ## Disclaimer
88 | Muchos de los conceptos en este workshop están sobre simplificados para hacer más fácil su comprensión. Por ende, si tu conocimiento en React es amplio, vas a notar que algunas explicaciones pueden no ser 100% acertadas.
89 | 
90 | ## Licencia
91 | MIT © [goncy](https://github.com/goncy)


--------------------------------------------------------------------------------
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goncy/reancy/0b022d2bbae9c48fdd5dbc7006d42626012014f0/assets/logo.png


--------------------------------------------------------------------------------
/mentorxs/gonzalo-pozzo/README.md:
--------------------------------------------------------------------------------
 1 | # Gonzalo Pozzo
 2 | 
 3 | * [Web](https://gonzalopozzo.com)
 4 | * [Blog](https://blog.gonzalopozzo.com)
 5 | * [Twitter](https://twitter.com/goncy)
 6 | * [Twitch](https://twitch.tv/goncypozzo)
 7 | * [Instagram](https://instagram.com/goncy.js)
 8 | 
 9 | ## Lecciones
10 | * [Migrando una aplicación React de JavaScript a TypeScript](https://blog.gonzalopozzo.com/react-javascript-typescript)
11 | 
12 | ## Mentorías gratuitas
13 | * [15 minutos](https://calendly.com/goncy/15)
14 | 
15 | ## Discord
16 | goncy#3572


--------------------------------------------------------------------------------
/proyectos/README.md:
--------------------------------------------------------------------------------
1 | # Proyectos
2 | Todas las semanas debe entregarse el proyecto, es la parte más importante del workshop. Cada proyecto es una variante de un test real de diferentes empresas, una vez terminado el workshop, se puede aplicar a estas empresas para conseguir trabajo enviando el link al repositorio.
3 | 
4 | * [Semana 1 - Lista de supermercado (Tradehelm)](./semana-1)
5 | * [Semana 2 - Relojes del mundo (Coderio)](./semana-2)
6 | * [Semana 3 - Juego de preguntas (Blackbox Vision)](./semana-3)
7 | * [Semana 4 - Tienda por puntos (Aerolab)](./semana-4)
8 | 


--------------------------------------------------------------------------------
/proyectos/semana-1/README.md:
--------------------------------------------------------------------------------
 1 | ![Tradehelm](./assets/logo.svg "TradeHelm")
 2 | 
 3 | En el camino desde mi casa al supermercado, mi cerebro pierde la capacidad de retener información, por ende necesito hacer una aplicación que se encargue de esa difícil tarea. No, no puedo usar Google Keep, Evernote, nada, soy dev, la tengo que hacer, además esto es un challenge así que agarrá la pala.
 4 | 
 5 | ### Definición funcional
 6 | * Mostrar un formulario para agregar elementos a la lista.
 7 | * Poder borrar cada elemento de la lista independientemente.
 8 | 
 9 | ![Spec](./assets/spec.png "Spec")
10 | 
11 | ### Es muy importante:
12 | * Pensar en la experiencia de usuario, minimizar la cantidad de interacciónes necesarias para usar la aplicación.
13 | * Ser ordenada/o a la hora de codear y estructurar archivos. Keep it simple.
14 | 
15 | ### Modalidad de entrega:
16 | * Repositorio público subido a GitHub, Gitlab, Bitbucket.
17 | * Link a la aplicación funcionando.
18 | 
19 | ### Estrellas extra
20 | * Mantener los elementos de la lista cuando vuelvo a la aplicación después de cerrarla, usando localStorage. ⭐️
21 | * Simular un delay al cargar, guardar y borrar los elementos, como si interactuaramos con un servicio externo, usando `Promise`. ⭐️
22 | * Usar TypeScript y tipar todos los elementos que usa la aplicación. ⭐️


--------------------------------------------------------------------------------
/proyectos/semana-1/assets/spec.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goncy/reancy/0b022d2bbae9c48fdd5dbc7006d42626012014f0/proyectos/semana-1/assets/spec.png


--------------------------------------------------------------------------------
/proyectos/semana-2/README.md:
--------------------------------------------------------------------------------
 1 | ![Coderio](./assets/logo.svg "Coderio")
 2 | 
 3 | Tenemos que crear una aplicación que muestre diferentes timezones elegidos por el usuario. Esos timezones se obtienen desde [la siguiente API](http://worldtimeapi.org/) y se agregan a la aplicación desde un search box.
 4 | 
 5 | ### Definición funcional
 6 | Debe tener un search box con auto complete. Debajo todos los timezones seleccionados, cada uno con su respectivo botón de borrar.
 7 | 
 8 | ![Spec](./assets/spec.png "Spec")
 9 | 
10 | ### Modalidad de entrega
11 | * Repositorio público subido a GitHub, Gitlab, Bitbucket.
12 | * Link a la aplicación funcionando.
13 | 
14 | ### Estrellas extra
15 | * Mantener los elementos de la lista cuando vuelvo a la aplicación después de cerrarla, usando localStorage. ⭐️
16 | * Usar TypeScript y tipar todos los elementos que usa la aplicación. ⭐️


--------------------------------------------------------------------------------
/proyectos/semana-2/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" height="185.853" width="1170.537"><path d="M280.683 178.965c-8.397 4.592-19.31 6.888-32.736 6.888-10.07 0-19.43-1.842-28.077-5.51-8.648-3.674-16.079-8.641-22.287-14.905-6.208-6.264-11.073-13.608-14.599-22.043-3.525-8.43-5.29-17.408-5.29-26.922v-.506c0-9.514 1.765-18.536 5.29-27.046 3.526-8.516 8.391-15.947 14.6-22.292 6.207-6.346 13.638-11.356 22.286-15.031 8.648-3.668 18.17-5.51 28.581-5.51 12.753 0 23.328 2.003 31.727 6.01 8.392 4.005 15.778 9.52 22.156 16.533l-23.416 25.044c-4.368-4.504-8.854-8.098-13.47-10.77-4.618-2.668-10.37-4.004-17.253-4.004-4.865 0-9.277.96-13.213 2.876-3.95 1.922-7.394 4.554-10.327 7.893-2.939 3.344-5.203 7.225-6.801 11.648-1.596 4.424-2.388 9.14-2.388 14.15v.5c0 5.178.792 10.02 2.388 14.531 1.598 4.504 3.906 8.43 6.926 11.767 3.02 3.344 6.632 5.977 10.826 7.892 4.198 1.921 8.896 2.883 14.106 2.883 6.376 0 11.96-1.292 16.74-3.887 4.786-2.584 9.527-6.047 14.231-10.395l22.41 22.548c-6.55 7.182-14.018 13.066-22.41 17.658m154.101-62.997c0-5.01-.843-9.727-2.515-14.151-1.684-4.424-4.117-8.348-7.305-11.773-3.19-3.42-6.97-6.132-11.33-8.142-4.367-2.002-9.154-3.001-14.35-3.001-5.541 0-10.452.96-14.732 2.876-4.28 1.921-7.936 4.555-10.955 7.892-3.02 3.345-5.329 7.225-6.925 11.65-1.599 4.423-2.39 9.14-2.39 14.149v.5c0 5.01.835 9.733 2.514 14.15 1.679 4.43 4.112 8.354 7.307 11.774 3.188 3.425 6.925 6.138 11.205 8.14 4.279 2.004 9.103 3.009 14.475 3.009 5.54 0 10.45-.961 14.73-2.883 4.28-1.914 7.936-4.55 10.956-7.892 3.02-3.338 5.328-7.22 6.926-11.642 1.59-4.424 2.39-9.147 2.39-14.151zm32.232 27.178c-3.695 8.435-8.81 15.822-15.361 22.167-6.546 6.345-14.27 11.356-23.166 15.03-8.897 3.669-18.63 5.51-29.205 5.51-10.413 0-20.065-1.797-28.963-5.385-8.897-3.594-16.577-8.516-23.036-14.78-6.464-6.264-11.548-13.608-15.236-22.043-3.693-8.43-5.54-17.49-5.54-27.172v-.505c0-9.683 1.847-18.743 5.54-27.178 3.688-8.43 8.811-15.816 15.362-22.161 6.545-6.347 14.262-11.356 23.166-15.03 8.896-3.669 18.63-5.51 29.206-5.51 10.406 0 20.058 1.796 28.962 5.384 8.891 3.595 16.571 8.517 23.035 14.775 6.464 6.264 11.541 13.613 15.236 22.042 3.693 8.436 5.54 17.495 5.54 27.178v.5c0 9.689-1.847 18.748-5.54 27.178m136.22-27.678c0-5.552-.88-10.63-2.646-15.255-1.76-4.622-4.118-8.572-7.05-11.853-2.94-3.276-6.383-5.797-10.327-7.563-3.943-1.765-8.179-2.652-12.715-2.652-4.53 0-8.772.887-12.714 2.652-3.944 1.766-7.426 4.287-10.451 7.563-3.02 3.281-5.41 7.187-7.176 11.73-1.759 4.534-2.645 9.663-2.645 15.378v.5c0 5.552.886 10.637 2.645 15.26 1.765 4.624 4.156 8.573 7.176 11.848 3.025 3.283 6.507 5.803 10.45 7.57 3.943 1.765 8.186 2.645 12.715 2.645 4.536 0 8.772-.88 12.715-2.646 3.944-1.766 7.388-4.286 10.327-7.569 2.932-3.275 5.29-7.224 7.05-11.848 1.766-4.623 2.646-9.708 2.646-15.26zm-.506 67.377v-19.117c-4.698 6.296-10.37 11.475-16.996 15.53-6.632 4.06-14.98 6.089-25.056 6.089-7.893 0-15.53-1.498-22.91-4.504-7.394-3.008-13.94-7.475-19.64-13.403-5.71-5.927-10.29-13.19-13.727-21.792-3.444-8.599-5.16-18.488-5.16-29.68v-.5c0-11.187 1.716-21.081 5.16-29.68 3.437-8.597 7.973-15.865 13.595-21.792 5.628-5.928 12.129-10.395 19.516-13.403 7.388-3 15.112-4.504 23.166-4.504 10.239 0 18.674 1.984 25.306 5.964 6.633 3.975 12.217 8.618 16.746 13.914V0h38.278v182.845zm157.127-98.31c-4.873-5.26-11.33-7.892-19.39-7.892-8.056 0-14.563 2.594-19.518 7.768-4.953 5.178-8.178 12.109-9.696 20.788h57.67c-1.18-8.516-4.2-15.404-9.066-20.664m46.202 39.7a184.034 184.034 0 0 1-.375 4.76H711.76c1.847 8.685 5.664 15.236 11.455 19.66 5.796 4.429 12.97 6.638 21.53 6.638 6.378 0 12.086-1.085 17.128-3.257 5.035-2.164 10.23-5.67 15.61-10.519l21.905 19.286c-6.383 7.854-14.1 13.988-23.165 18.412-9.066 4.424-19.728 6.638-31.983 6.638-10.07 0-19.428-1.673-28.076-5.01-8.647-3.338-16.11-8.1-22.405-14.275-6.295-6.177-11.206-13.484-14.73-21.919-3.525-8.43-5.29-17.825-5.29-28.176v-.505c0-9.515 1.633-18.536 4.909-27.047 3.276-8.517 7.843-15.948 13.727-22.293 5.87-6.345 12.877-11.355 21.025-15.03 8.136-3.669 17.159-5.509 27.067-5.509 11.242 0 20.98 2.003 29.21 6.008 8.224 4.006 15.062 9.396 20.522 16.16 5.452 6.756 9.482 14.524 12.085 23.29 2.601 8.766 3.905 17.906 3.905 27.428v.5c0 1.84-.044 3.425-.13 4.76m112.934-38.322c-12.759 0-22.785 3.843-30.092 11.518-7.299 7.686-10.95 19.628-10.95 35.82v49.594h-38.277V48.591h38.278v27.053c3.856-9.184 9.146-16.533 15.86-22.043 6.713-5.509 15.778-8.017 27.197-7.512v39.824zm32.737-37.322H990v134.255h-38.27zM950.718.001h40.293v33.816h-40.293zm182.047 115.967c0-5.01-.842-9.727-2.514-14.151-1.684-4.424-4.118-8.348-7.306-11.773-3.188-3.42-6.969-6.132-11.33-8.142-4.368-2.002-9.154-3.001-14.35-3.001-5.54 0-10.45.96-14.732 2.876-4.28 1.921-7.936 4.555-10.956 7.892-3.018 3.345-5.328 7.225-6.925 11.65-1.597 4.423-2.39 9.14-2.39 14.149v.5c0 5.01.837 9.733 2.515 14.15 1.678 4.43 4.112 8.354 7.307 11.774 3.188 3.425 6.925 6.138 11.204 8.14 4.281 2.004 9.104 3.009 14.476 3.009 5.54 0 10.45-.961 14.73-2.883 4.28-1.914 7.937-4.55 10.957-7.892 3.02-3.338 5.328-7.22 6.925-11.642 1.59-4.424 2.39-9.147 2.39-14.151zm32.232 27.178c-3.694 8.435-8.809 15.822-15.36 22.167-6.546 6.345-14.27 11.356-23.166 15.03-8.898 3.669-18.63 5.51-29.207 5.51-10.413 0-20.065-1.797-28.961-5.385-8.898-3.594-16.578-8.516-23.036-14.78-6.463-6.264-11.548-13.608-15.236-22.043-3.694-8.43-5.54-17.49-5.54-27.172v-.505c0-9.683 1.846-18.743 5.54-27.178 3.688-8.43 8.81-15.816 15.361-22.161 6.545-6.347 14.263-11.356 23.167-15.03 8.896-3.669 18.63-5.51 29.205-5.51 10.407 0 20.059 1.796 28.961 5.384 8.891 3.595 16.572 8.517 23.036 14.775 6.463 6.264 11.542 13.613 15.236 22.042 3.694 8.436 5.54 17.495 5.54 27.178v.5c0 9.689-1.846 18.748-5.54 27.178M112.46 171.929H-.3V159.15h112.76z" fill="#de1e46"/></svg>
2 | 


--------------------------------------------------------------------------------
/proyectos/semana-2/assets/spec.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goncy/reancy/0b022d2bbae9c48fdd5dbc7006d42626012014f0/proyectos/semana-2/assets/spec.png


--------------------------------------------------------------------------------
/proyectos/semana-3/README.md:
--------------------------------------------------------------------------------
 1 | ![BlackBox Vision](./assets/logo.png "BlackBox Vision")
 2 | 
 3 | QuizBox Vision es un juego de preguntas y respuestas, como tantos otros. Sin embargo, en este juego, se ponen muchas más cosas en juego!! Bueno, en realidad no, pero quedaba bien para el resúmen.
 4 | 
 5 | ### Definición funcional
 6 | El juego consiste en 10 preguntas las cuales pueden ser verdadero/falso o multiple choice y se obtienen de [la siguiente API](https://opentdb.com/api.php?amount=10).
 7 | 
 8 | Por cada pregunta, es necesario mostrar los siguientes campos:
 9 | * Pregunta
10 | * Categoría
11 | * Dificultad
12 | * Posibles respuestas
13 | 
14 | Al finalizar el juego, se muestra el puntaje obtenido. El mismo se calcula de la
15 | siguiente manera:
16 | * Respuesta correcta: *5 puntos*
17 | * Respuesta incorrecta: *0 puntos*
18 | 
19 | ### Modalidad de entrega
20 | * Repositorio público subido a GitHub, Gitlab, Bitbucket.
21 | * Link a la aplicación funcionando.
22 | 
23 | ### Estrellas extra
24 | * Usar TypeScript y tipar todos los elementos que usa la aplicación. ⭐️
25 | * Cada pregunta se muestra en una pantalla separada. ⭐️
26 | * Las preguntas de multiple choice suman 10 puntos y las de verdadero o falso suman 5 puntos. ⭐️


--------------------------------------------------------------------------------
/proyectos/semana-3/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goncy/reancy/0b022d2bbae9c48fdd5dbc7006d42626012014f0/proyectos/semana-3/assets/logo.png


--------------------------------------------------------------------------------
/proyectos/semana-4/README.md:
--------------------------------------------------------------------------------
 1 | ![Aerolab](./assets/logo.svg "Aerolab")
 2 | 
 3 | # Aerolab challenge
 4 | Se debe crear una tienda de productos basada en puntos.
 5 | 
 6 | ### API
 7 | Podés encontrar la documentación [acá](https://aerolabchallenge.docs.apiary.io/) y podés obtener una API key [acá](https://aerolab.co/coding-challenge)
 8 | 
 9 | ### Definición funcional
10 | El usuario tiene una cantidad definida de puntos y cada producto vale una cantidad de puntos especifica.
11 | 
12 | * Cada producto debe tener un precio en puntos de manera visible.
13 | * El usuario debería poder filtrar los productos por precio, de mayor a menor y vicecersa.
14 | * El usuario debería poder ver cuantos puntos tienen en su cuenta.
15 | * Debería haber una manera clara para el usuario de ver que productos puede comprar y cuales no.
16 | * El botón de comprar debería estar disponible en los productos que el usuario tiene suficientes puntos para comprar.
17 | * Cuando el usuario no puede comprar un producto, debería ver cuantos puntos le faltan para poder comprarlo.
18 | * Un usuario no debería poder comprar un producto del cual no tiene suficientes puntos para comprar.
19 | * Cuando el usuario compra, la cantidad de puntos debe ser deducida automaticamente de los puntos disponibles.
20 | 
21 | ![Spec](./assets/spec.png "Spec")
22 | 
23 | ### Modalidad de entrega
24 | * Repositorio público subido a GitHub, Gitlab, Bitbucket.
25 | * Link a la aplicación funcionando.
26 | 
27 | ### Estrellas extra
28 | * Usar TypeScript y tipar todos los elementos que usa la aplicación. ⭐️
29 | * El botón de comprar se muestra solo cuando el usuario interactua con un producto. ⭐️
30 | * El usuario puede cargar puntos tocando sus puntos disponibles en la barra de navegación. ⭐️
31 | * El usuario puede ver un historial de los productos que compró. ⭐️
32 | 


--------------------------------------------------------------------------------
/proyectos/semana-4/assets/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="39px" height="36px" viewBox="0 0 39 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |     <!-- Generator: Sketch 46.1 (44463) - http://www.bohemiancoding.com/sketch -->
 4 |     <title>logo</title>
 5 |     <desc>Created with Sketch.</desc>
 6 |     <defs>
 7 |         <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
 8 |             <stop stop-color="#FF8800" offset="0%"></stop>
 9 |             <stop stop-color="#FF6600" offset="100%"></stop>
10 |         </linearGradient>
11 |     </defs>
12 |     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
13 |         <g id="Catalog" transform="translate(-16.000000, -16.000000)" fill="url(#linearGradient-1)">
14 |             <g id="top">
15 |                 <path d="M46.868244,16.404544 C46.6405958,16.0177278 46.1363003,15.8851051 45.7421767,16.1085325 L32.2482382,23.7546496 C31.9411566,23.9287916 31.7816812,24.2764781 31.8528973,24.6175933 L36.3942582,46.3988127 C36.4161301,46.5037148 36.370779,46.6585782 36.3020649,46.734636 L35.7503076,47.3453612 C34.6032406,48.615134 33.631475,49.3030396 31.7844202,49.3030396 C29.7133694,49.3030396 28.7409951,48.2316035 27.2013263,46.3378469 C25.3624888,44.0763908 23.0744418,41.2620414 17.5113649,41.2620414 L17.3738021,41.2620414 C16.6150762,41.2620414 16,41.8657137 16,42.6103723 C16,43.3550308 16.6150762,43.9587031 17.3738021,43.9587031 L17.5113649,43.9587031 C21.7514649,43.9587031 23.3553499,45.9313165 25.0535812,48.0198254 C26.5704243,49.8855042 28.2896551,52 31.7844202,52 C34.8013676,52 36.461556,50.6226953 37.8061413,49.134573 L42.7657069,43.6456657 C42.7657069,43.645367 54.5617185,30.5894981 54.5617185,30.5894981 C54.7969752,30.3290319 54.8362354,29.9499819 54.6588037,29.6482951 L46.868244,16.404544 Z" id="logo"></path>
16 |             </g>
17 |         </g>
18 |     </g>
19 | </svg>


--------------------------------------------------------------------------------
/proyectos/semana-4/assets/spec.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/goncy/reancy/0b022d2bbae9c48fdd5dbc7006d42626012014f0/proyectos/semana-4/assets/spec.png


--------------------------------------------------------------------------------
/recursos-complementarios/README.md:
--------------------------------------------------------------------------------
 1 | # Recursos complementarios
 2 | Contenido complementario al workshop o necesario para empezar a hacer el workshop, tanto de React como de JS, git o web en general.
 3 | 
 4 | ## Web
 5 | * [Escuela Dev Rock - Creá tu web gratis - 🇪🇸](https://escueladevrock.com/supervivencia)
 6 | * [freeCodeCamp - Aprendé a programar desde 0 - 🇪🇸](https://www.freecodecamp.org/espanol/)
 7 | * [Harvard - Introducción a ciencias de la computación - 🇺🇸](https://www.edx.org/es/course/cs50s-introduction-to-computer-science)
 8 | 
 9 | ## CSS
10 | * [Flexbox Froggy - Aprendé Flexbox - 🇪🇸](https://flexboxfroggy.com/#es)
11 | * [CSS Grid Garden - Aprendé Grid - 🇪🇸](https://cssgridgarden.com/#es)
12 | 
13 | ## JavaScript
14 | * [WesBos - 30 días de JavaScript - 🇺🇸](https://javascript30.com/)
15 | 
16 | ## React
17 | * [Scrimba - Learn React - 🇺🇸](https://scrimba.com/g/glearnreact)
18 | * [Fullstack Open - Curso React, Redux, Node, MongoDB, GraphQL y TypeScript - 🇺🇸](https://fullstackopen.com)
19 | * [Kent C. Dodds - Introducción a React - 🇺🇸](https://egghead.io/courses/the-beginner-s-guide-to-react)
20 | * [Lee Robinson - React + NextJS - 🇺🇸](https://react2025.com/)


--------------------------------------------------------------------------------