Zoom Logo

Workshop introducción a React - Shared screen with speaker view
Natalia Lopardo
09:51
Hola! Buenas tardes!!!
Tatiana Céspedes
10:02
yo soy l primera
Lina Beltrán
10:39
COLOMBIAAAA
Tatiana Céspedes
10:41
hola yo soy de Costa Rica :)
Natalia Schlebinger
10:48
Uruguay!
Macarena Martinez Gomila
10:51
De la pampa
Marcela griet
10:54
Marcela de Bariloche
Valentina Cavagna
11:02
Buenas tardes! De Cordoba!
rocio gocella
11:05
Mar del Plata
Natalia Lopardo
11:20
No...
rocio gocella
11:23
no
Macarena Martinez Gomila
11:24
No
Karen Simari
11:56
Buenas tardes!
Natalia Lopardo
12:30
Si
Tatiana Céspedes
12:36
si
Tatiana Céspedes
12:52
hola nati
Natalia Lopardo
13:08
Hola Tati!!!
Tatiana Céspedes
13:11
holaa
Natalia Schlebinger
13:18
holaa
Silvina Bordon
13:19
hola Jonh :)
Roberto Salas
13:56
hola
Pia Bedini Crocci
14:15
Hola!!
Kensy Ayala
15:26
puedo grabar la session?
Kensy Ayala
15:37
aun no salgo de trabajar y tengo ambas maquinas simultaneas
Lucía Bulat - Ada ITW
15:48
Ya la estamos grabando nosotros! La vamos a enviar grabada la semana que viene, no te preocupes
Kensy Ayala
15:58
Gracias!!!
Natalia Schlebinger
21:17
podríamos haberles puesto atributo id a las tarjetas(?
Silvia Miño
30:46
Buenas tardes :)
Karen Simari
32:02
Vi miles de videos de React y es la primera vez que entiendo como funciona eso
Jonh Parra
35:25
npx create-react-app workshop-react
Rocio Godoy
35:35
es lo mismo haber usado el comando npx?
Rocio Godoy
35:47
perdon npm quice poner
Alejandra Pérez
35:55
yo use este: npm i -g create-react-app
Rocio Godoy
36:36
perfecto gracias
Jonh Parra
37:10
https://codesandbox.io/
Natalia Schlebinger
45:28
para que sirve? "quien" lo usa(?
Natalia Schlebinger
45:45
ahh
Tatiana Céspedes
53:30
a mi solo se me creo la carpeta node_modules y los archivos json :(
Tatiana Céspedes
53:58
gracias
Girlesa Quintero
01:00:50
me saca error con npm start
Girlesa Quintero
01:00:57
npm ERR! code ENOENTnpm ERR! syscall opennpm ERR! errno -4058npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\gquinteror\Desktop\ADA\package.json'npm ERR! enoent This is related to npm not being able to find a file.npm ERR! enoentnpm ERR! A complete log of this run can be found in:npm ERR! C:\Users\gquinteror\AppData\Roaming\npm-cache\_logs\2021-06-04T22_20_35_517Z-debug.logPS C:\Users\gquinteror\Desktop\ADA> npm startnpm ERR! code ENOENTnpm ERR! syscall opennpm ERR! path C:\Users\gquinteror\Desktop\ADA\package.jsonnpm ERR! errno -4058npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\gquinteror\Desktop\ADA\package.json'npm ERR! enoent This is related to npm not being able to find a file.npm ERR! enoentnpm ERR! A complete log of this run can be found in:npm ERR! C:\Users\gquinteror\AppData\Roaming\npm-cache\_logs\2021-06-04T22_21_06_462Z-debug.log
Roxanna Alburquerque
01:00:58
que hermoso jajajaj
Roxanna Alburquerque
01:01:01
Si me sale
Marcela griet
01:01:09
hay que hacer cd
Natalia Lopardo
01:01:11
Si sale!
Girlesa Quintero
01:01:26
la carpeta de index.js?
Lina Beltrán
01:01:31
No
Girlesa Quintero
01:01:32
porque estoy en la general
Candela Burgos
01:02:11
Yo estoy desde code sandbox, como tendria que hacerlo?
Candela Burgos
01:03:02
Muchas gracias!
Girlesa Quintero
01:03:51
Listo!! dale, estaba en la carpeta general … no noté que workshop-react se creaba sólo, mil gracias!
Natalia Schlebinger
01:05:57
tiro un datito, para que me andara la auto indentacion, le di a alt+shift+f para hacerle auto format al código y que usara mi indentacion en vez de la que se genero con create-react-app
Jonh Parra
01:06:45
https://github.com/Jonhks/workshopAdaReact-react/blob/master/src/App.css
Silvina Bordon
01:08:08
jonh podrias copiar el nav
Silvina Bordon
01:08:08
??
Jonh Parra
01:08:16
<nav><ul><li>Home</li><li>WebShop</li><li>Contact</li></ul></nav>
Aldana Casal
01:12:15
perdón cual es la otra extensión que no es Simple React?
Aldana Casal
01:12:36
gracias!
Roxanna Alburquerque
01:12:50
Me dice que no puede conectarse con Extensions Marketplace
Lina Beltrán
01:13:07
LA 2da extensión no te la entendí
Lina Beltrán
01:13:09
Persón
Lina Beltrán
01:13:14
Perdón*
Jonh Parra
01:13:31
React/Redux/react-router Snippets
Marcela griet
01:16:34
creo que si guardas el archivo como .jsx ya te toma automaticamente que es de react
Roxanna Alburquerque
01:17:07
Quiero ver el return de nuevo
Jonh Parra
01:17:39
const Nav = () => {return(<nav><ul><li>Home</li><li>WebShop</li><li>Contact</li></ul></nav>);};export default Nav;
Girlesa Quintero
01:22:19
me recuerdas porfa para que hiciste el main?
Girlesa Quintero
01:22:26
container
Roxanna Alburquerque
01:22:43
El main tambien tiene class en vez de calssname
Silvina Bordon
01:26:12
podrias copiar esa parte del main porfa?
Sofia Bianco
01:26:30
<­main className="container">
Sofia Bianco
01:26:49
<main className="container"><section className="product"><img src="" alt=""/><h2 className="header">Bla</h2><p className="description">Lorem ipsum dolor</p><p className="price">$25</p><div className="btn">Add to Cart</div><div className="quickview">Quick View</div></section></main>
Laura Chumbita
01:27:05
Gracias!
Silvina Bordon
01:27:10
graciasss
Karen Simari
01:27:10
a eso se refiere cuando dice que es declarativa?
Karen Simari
01:27:12
la libreria
Jonh Parra
01:28:09
const Nav = () => {return(<nav><ul><li>Home</li><li>WebShop</li><li>Contact</li></ul></nav>);};export default Nav;
Jonh Parra
01:28:24
import './App.css';import Nav from './components/Nav';function App() {const nombre = 'Jonh'return (<div className="App"><Nav /><main class="container"><section className="product"><img src="https://placeimg.com/200/100" alt="imagen" /><h2 className="header">{nombre}</h2><p className="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus quae ut quisquam pariatur cumque facere dignissimos sed labore repellat odio placeat fugiat, ex eum earum accusamus itaque, dolores incidunt quam.</p><p className="price">$231</p><div className="btn">Add to cart</div><div className="quickview">Quickview</div></section></main></div>);}export default App;
Laura Chumbita
01:28:36
App o Nav?
Laura Chumbita
01:28:58
tamos
Laura Chumbita
01:29:00
gracias
Girlesa Quintero
01:29:59
acabo de darme cuenta que comentarios tampoco en el return
Girlesa Quintero
01:30:09
si 10 minutos
Laura Chumbita
01:30:09
gracia!
Natalia Lopardo
01:30:13
perfecto!
Karina Jofre
01:30:13
podrias dejar al app.js?
Marcela griet
01:30:23
import './App.css';import Nav from './components/Nav';function App() {const nombre = 'Jonh'return (<div className="App"><Nav /><main class="container"><section className="product"><img src="https://placeimg.com/200/100" alt="imagen" /><h2 className="header">{nombre}</h2><p className="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus quae ut quisquam pariatur cumque facere dignissimos sed labore repellat odio placeat fugiat, ex eum earum accusamus itaque, dolores incidunt quam.</p><p className="price">$231</p><div className="btn">Add to cart</div><div className="quickview">Quickview</div></section></main></div>);}export default App;
Marcela griet
01:30:27
ese es el app.js
Laura Chumbita
01:30:37
siiii excelente!!
Girlesa Quintero
01:30:39
siiiiiiiiiiiii
Roxanna Alburquerque
01:30:39
Sii, me encanta
Natalia Lopardo
01:30:40
Muy bueno!
Juliette Cetina
01:30:48
Esta genial
Mayra Vogler
01:30:48
Si esta bueno
Sofia Bianco
01:30:53
Está bueno la muestra de como pasar de js vainilla a react
Nadia Rosenberg
01:30:58
Buenisimo! De haber sabido esto cuando arranqué con React jaja
Alejandra Pérez
01:31:55
Yo tengo clases ahorita y debere irme, por fa nos envían la grabación, que esta buenísimo el workshop!
Alejandra Pérez
01:32:11
muchas gracias!
Marcela griet
01:34:42
podrias comentar cual es un sueldo aproximado para una alumna egresada como programadora junior que se inserta en su primer trabajo IT?
Marcela griet
01:35:27
gracias!
Aldana Casal
01:35:33
Yo conozco a alguien que hace poco empezó como jr
Aldana Casal
01:35:40
le pagan usd 1200
Aldana Casal
01:35:46
no
Aldana Casal
01:35:47
de acña
Marcela griet
01:36:09
buenisimo muchas gracias Aldana
Roxanna Alburquerque
01:38:03
Solo decirles que me encanta lo que hacen y amo este espacio para aprender entre mujeres.
Nadia Rosenberg
01:38:05
Un curso de React Hooks
Rocio Godoy
01:38:10
Si de node.js estaria buenisimo
Denisse Alfaro
01:38:11
Si, Node
Silvina Bordon
01:38:12
sii de node
Milena Gimenez
01:38:15
de node!
Valentina Cavagna
01:38:19
de Angular estaria bueno tambien!
Rocio Godoy
01:38:21
la combinacion react node la veo todo el tiempo en llaamdos de trabajo
Kensy Ayala
01:38:26
css!!! es yun mundo grande
Tatiana Roa
01:38:33
node.js
Girlesa Quintero
01:38:34
siii node!!
Kensy Ayala
01:38:38
uno de angular
Denisse Alfaro
01:38:41
Mongoo
Marcela griet
01:38:46
MOngo!
Libia Freites
01:38:53
Vue.js
Kensy Ayala
01:39:05
typescript
Marcela griet
01:39:08
SQL
Roxanna Alburquerque
01:39:23
Ay si! Typescript
Girlesa Quintero
01:39:37
manejo del DOM con JavaScript
Roxanna Alburquerque
01:40:28
Quisiera ser voluntaria, pero no soy profesional en ninguna de las areas que anunciaron de voluntariado.
Girlesa Quintero
01:40:32
Es hasta las 10 verdd?
Girlesa Quintero
01:40:38
Perfect!
Sofia Bianco
01:41:12
Yo quiero complementar react con java :)
Roxanna Alburquerque
01:41:13
Puedes escribir el correo?
Lucía Bulat - Ada ITW
01:41:22
voluntariado@adaitw.com.ar
Roxanna Alburquerque
01:41:22
O decirlo mas lento jajaja
Candela Burgos
01:41:23
Mil disculpas, no tengo camara!
Roxanna Alburquerque
01:41:27
Ah gracias
Natalia Schlebinger
01:44:42
se conoce como template string eso que habias hecho al principio de todo?
Jonh Parra
01:47:34
React Developer Tools
Natalia Schlebinger
01:48:21
ahhhh gracias!
Sofia Bianco
01:50:03
con un componente tarjeta
Sofia Bianco
01:50:11
que se renderice las 20 veces
Kensy Ayala
01:50:18
.map
Natalia Schlebinger
01:50:23
tirando map y retornando digamos "sintaxis html"(?
Roxanna Alburquerque
01:53:42
porque product sale gris?
Roxanna Alburquerque
01:53:55
Por qué*
Natalia Schlebinger
01:53:57
creo q porq nunca la usa(?
Girlesa Quintero
01:54:36
es decir, sólo sentencias si es entre {llaves}?
Sofia Bianco
01:55:16
Maravilloso
Marcela griet
01:57:28
nomre es en español tmabien
Marcela griet
01:57:34
nombre
Roxanna Alburquerque
01:59:15
codigo reutilizable
Marcela griet
02:01:41
.jsx
Marcela griet
02:02:24
de nada
Sofia Bianco
02:06:25
props
Natalia Lopardo
02:06:26
parametro
Denisse Alfaro
02:06:27
props creo ç
Marcela griet
02:11:23
muy buena explicacion
Girlesa Quintero
02:12:57
enredado ajajaja
Sofia Bianco
02:14:05
Genial!
Sofia Bianco
02:14:09
Es un obj dentro de un obj
Sofia Bianco
02:15:36
Separaría cada prop con una coma?
Roxanna Alburquerque
02:22:47
Me dice que pais is not defined, que creen que me falta?
Natalia Lopardo
02:22:54
porque no pone key en props?
Natalia Lopardo
02:23:51
perfecto! Gracias!!
Pia Bedini Crocci
02:24:23
disculpen por la pregunta! a qué hora finaliza el workshop?
Silvina Bordon
02:24:34
9:30
Pia Bedini Crocci
02:24:44
gracias!!!
Silvina Bordon
02:24:51
:)
Nataly Mora
02:25:06
A mi me sale lo mismo
Natalia Lopardo
02:26:14
ok! Gracias Jonh!!
Roxanna Alburquerque
02:26:20
Me dice que pais is not defined, que creen que me falta?
Roxanna Alburquerque
02:26:35
?
Roxanna Alburquerque
02:27:14
Ah ok
Karen Simari
02:27:21
Me tengo que retirar! Muchas gracias termino con la grabacion!!! Saludos
Natalia Schlebinger
02:28:04
que buenooooo
Girlesa Quintero
02:28:10
Hágamos una segunda sesión
Natalia Schlebinger
02:28:23
esta en GitHub?
Natalia Schlebinger
02:28:33
genial!
Sofia Bianco
02:28:41
yeih
Laura Chumbita
02:28:50
sii! :D
Gabriela Durán
02:28:56
está buenísimo
Girlesa Quintero
02:30:02
que es lo más mas básico que se necesita para manejar a un nivle sencillo react? Ejemplo: props, estados, hooks...que más faltaría?
Maria Valentina Zea Molano
02:30:35
Posicionar tu página
Tatiana Céspedes
02:32:31
como cuando subis la grabación?
Girlesa Quintero
02:32:49
que es lo más mas básico que se necesita para manejar a un nivle sencillo react? Ejemplo: props, estados, hooks...que más faltaría?
Aldana Casal
02:32:50
dijeron antes que en 48-72 hs
Tatiana Céspedes
02:33:11
gracias Aldana :)
Aldana Casal
02:33:17
:)
Valentina Cavagna
02:33:38
Tengo una duda, cual es la diferencia entre react y angular? Ambos los vi muy presentes en las busquedas laborales.
Valentina Cavagna
02:37:30
ahora entiendo, gracias!!
Marcela griet
02:37:42
genial la explicacion
Laura Chumbita
02:37:50
Un genio!
Jonh Parra
02:40:02
https://www.dropbox.com/sh/j1ruo2dppscoluc/AADMq-FMDd82286izt6aQuKka?dl=0
Silvina Bordon
02:43:22
jonh titulo tiene una t de mas
Sofia Bianco
02:43:40
falta la className= "App"
Juliette Cetina
02:44:46
Me pasó lo mismo con el ejercicio anterior, quise cambiar el archivo Nav.js a Nav.jsx y me dió el mismo error
Sofia Bianco
02:46:15
Eso lo podría haber creado en un archivo notas.js que exportemos como hicimos con productosInfo?
Rocio Godoy
02:57:29
Si, se escucha
Natalia Lopardo
03:09:15
si se entendio
Girlesa Quintero
03:09:16
sip
Laura Chumbita
03:09:17
si!!
Marcela griet
03:09:17
si!
Tatiana Céspedes
03:09:18
si
Silvia Miño
03:09:20
si
Sofia Bianco
03:09:28
Yo lo implemente como el nombre de la nota :D
Adriana Sarmiento
03:13:08
wauuu siii muchas gracias
Rocio Godoy
03:13:36
Buenisimo, se entendio super bien los proyectos
Jonh Parra
03:13:45
https://github.com/Jonhks/workshopAdaReact-piano
Rocio Godoy
03:13:50
muchas gracias!
Natalia Lopardo
03:13:52
Genial! Muchas gracias Jonh!!!
Girlesa Quintero
03:13:57
siiii
Girlesa Quintero
03:13:58
genial
Jonh Parra
03:14:00
:)
Nadia Rosenberg
03:14:03
Muy bueno, muchas gracias
Juliette Cetina
03:14:04
Buenisimo
rocio gocella
03:14:04
muchas gracias. ya tengo ideas
Aldana Casal
03:14:04
super bueno!!
María Celeste Dubini
03:14:06
buenísimo!!
Vanina Vilte
03:14:07
Muchas gracias
Valentina Cavagna
03:14:08
Muy bueno! muy genio!!
Silvina Bordon
03:14:09
super bien
Silvia Miño
03:14:11
Excelente, muchas gracias!!
Adriana Sarmiento
03:14:11
siii estuvo muy bien explicado
Marcela griet
03:14:12
MUY BUENO!
Valentina Cavagna
03:14:15
Muchas gracias
Maria Valentina Zea Molano
03:14:17
gracias!
Edimar Andreína Morles González
03:14:30
Excelente!!! Me encantó!
Marina Racca
03:14:35
Muchas gracias!!
Laura Chumbita
03:14:39
Gracias!! <3
Milena Gimenez
03:14:40
buenísimo jonh1
Noelia Escalier
03:14:40
muy bueno!
Yvonne Romero Ruiz
03:14:47
la clase se podría volver a mirar?
Vanina Vilte
03:14:47
muchas gracias a ustedes
Yvonne Romero Ruiz
03:14:54
estuvo excelente aunque entré un poco tarde
Edimar Andreína Morles González
03:14:54
Gracias Jonh!!
Girlesa Quintero
03:14:57
siii Jonh espectacular!!!
Marina Alejandra Castro
03:15:01
muy bueno!!!
Jonh Parra
03:15:10
Gracias chicas, un gusto enorme :)
Yvonne Romero Ruiz
03:15:19
muchas gracias!!
Sofia Bianco
03:15:21
Gracias!
Juliette Cetina
03:15:21
Excelente profesor, muchas gracias
rocio gocella
03:15:27
la explicación que hizo fue muy buena. yo conocía de angular, asi que me sirvió mucho. gracias !!!
sabrina gielis
03:15:32
gracias jonh! excelente!
Jonh Parra
03:15:40
Tw: jonhks13
Jonh Parra
03:15:49
Email: jonhgx@gmail.com
Silvina Bordon
03:16:04
no graciassss
Pia Bedini Crocci
03:16:11
solamente graicas!!!
Pia Bedini Crocci
03:16:29
excelente todo!!!
Kensy Ayala
03:17:19
excelente workshop
Marcela griet
03:17:34
GRACIAS!
Natalia Lopardo
03:17:41
Excelente! Muchas gracias!
Natalia Schlebinger
03:17:55
:)
Candela Burgos
03:17:55
Gracias!!! Chau!!
Yvonne Romero Ruiz
03:17:56
Vamos a estar atentas, exitos!!
Sofia Bianco
03:17:57
Gracias
Kensy Ayala
03:18:00
salidos
Juliette Cetina
03:18:02
Gracias!