Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leoasis/workshop-pensando-en-react
Workshop introductorio a React
https://github.com/leoasis/workshop-pensando-en-react
react workshop
Last synced: about 2 months ago
JSON representation
Workshop introductorio a React
- Host: GitHub
- URL: https://github.com/leoasis/workshop-pensando-en-react
- Owner: leoasis
- License: mit
- Created: 2017-06-18T22:38:25.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-08-14T03:21:39.000Z (over 7 years ago)
- Last Synced: 2024-10-21T18:02:37.191Z (2 months ago)
- Topics: react, workshop
- Language: JavaScript
- Homepage: https://leoasis.github.io/workshop-pensando-en-react/
- Size: 13.5 MB
- Stars: 51
- Watchers: 10
- Forks: 17
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Workshop - Pensando en React
La idea de este Workshop es aprender a usar y pensar en React mientras hacemos una aplicación.
## Presentación
Podes ver la presentación en el siguiente [link](https://slides.com/leonardogarciacrespo/pensando-en-react)
## Setup
### Instalación
Usando `npm`
```bash
git clone [email protected]:leoasis/workshop-pensando-en-react.git
cd workshop-pensando-en-react
npm install
npm start
```
o si usas `yarn`
```bash
git clone [email protected]:leoasis/workshop-pensando-en-react.git
cd workshop-pensando-en-react
yarn install
yarn start
```
Esto va a levantar un [servidor](http://localhost:3000) y va a abrir una ventana del navegador con la pagina inicial.
Desde allí se puede navegar a los ejercicios de los fundamentos, o a las versiones inicial y final de la aplicación.
### React Devtools:
* Instalar [React Devtools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) en Chrome
### Spotify:
* Para poder utilizar la aplicación necesitas tener una cuenta de [Spotify](https://www.spotify.com/ar) (no hace falta que sea Premium) si todavía no tenes una.
## Contenido
Si todavía no conocés nada de React, te recomiendo arrancar con los **fundamentos**.
En caso de ya tener conocimientos, podés ir directo a **crear la aplicación**.
Siempre podés volver a los fundamentos si hay algo que no te queda claro como hacer.
### Fundamentos
0. [Intro](./docs/fundamentos/00-intro.md)
1. [Render y Create Element](./docs/fundamentos/01-render-y-create-element.md)
2. [Componentes](./docs/fundamentos/02-componentes.md)
3. [JSX](./docs/fundamentos/03-jsx.md)
4. [Manejo de Estado (setState y re-render)](./docs/fundamentos/04-set-state-y-re-render.md)
5. [Eventos](./docs/fundamentos/05-eventos.md)
6. [Listas](./docs/fundamentos/06-listas.md)
7. [Ciclo de vida de los componentes](./docs/fundamentos/07-ciclo-de-vida.md)
8. [Refs](./docs/fundamentos/08-refs.md)
9. [Elementos de formulario](./docs/fundamentos/09-elementos-de-formulario.md)
10. [Outro](./docs/fundamentos/10-outro.md)
### Crear nuestra primer Aplicación
0. [Intro](./docs/pensando-en-react/00-intro.md)
1. [Partir la interfaz en componentes](./docs/pensando-en-react/01-dividir-en-componentes.md)
2. [Crear una versión estática](./docs/pensando-en-react/02-crear-version-estatica.md)
3. [Identificar la representación mínima del estado](./docs/pensando-en-react/03-identificar-estado-minimo.md)
4. [Identificar dónde debe vivir nuestro estado](./docs/pensando-en-react/04-donde-debe-vivir-el-estado.md)
5. [Agregar interacciones](./docs/pensando-en-react/05-agregar-interacciones.md)
6. [Outro](./docs/pensando-en-react/06-outro.md)