React.js | Curso Práctico Completo Desde Cero, Para Principiantes. Parte 2, Components, State, JSX

Подписаться 603 тыс.

Просмотров 228 тыс.

50% 1

¡Gracias a Kite por patrocinar esta sección del vídeo! Kite es un asistente de autocompletado gratuito con tecnología de IA que te ayudará a codificar de forma más rápida e inteligente:
Haz clic aquí ➞ bit.ly/3dPzXHe ➞ para saber más.
Aprende como crear aplicaciones web, usando React.js, la biblioteca de Javascript más popular del desarrollo web frontend, para crear interfaces de Usuario, tanto apara aplicaciones del navegador como para aplicaciones móviles. Aprenderemos la sintaxis básica, y crearemos un Aplicación de Tareas.
💻 Código de este proyecto:
github.com/Faz...
🛍 Descuentos:
NordVPN ➞ 68% de descuento en plan de 2 años ➞ Código: fazt
Hostinger ➞ 7% de descuento en cualquier compra ➞Código: FAZT
👨‍💻 ¿Qué servicios utilizo?
Brave ➞ brave.com/faz053
NordVPN ➞ bit.ly/2Te7p0J
Hostinger ➞ www.hostg.xyz/...
Cloudinary ➞ bit.ly/3ohNlJ7
SiteGround ➞ bit.ly/31u9ZEk
Namecheap ➞ bit.ly/3kne9W8
🖥️ Cursos:
Curso de Python Para Principiantes ➞ • Curso Python para Prin...
Curso de Raspberry PI ➞ • Raspberry Pi, Curso pa...
Setup Visual Studio Code ➞ • Visual Studio Code, Ed...
🌐 Redes:
Fazt Web ➞ www.faztweb.com/
Facebook ➞ / fazttech
Instagram ➞ / fazttech
Twitter ➞ / fazttech
Telegram ➞ t.me/fazttech
Twitch ➞ / fazttech
Slack ➞ bit.ly/3dPqCPT
Discord ➞ / discord
Blog ➞ blog.faztweb.com
📩 Contacto:
➞ contact@faztweb.com
#react #kite #javascript #curso

Опубликовано:

3 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 294

@TheWandererRises 4 года назад

import React from 'react'; function Navigation(props) { return ( {props.titulo} ); } export default Navigation; ---así debería quedar para quien tenga problemas con la nueva versión. Muchas gracias por los videos. Están muy bien explicados!

@jvjijcjtjojr453 4 года назад

PUTO AMO, 20 minutos perdí y este comentario me salvo

@vz3146 4 года назад

@@jvjijcjtjojr453 el pito amo. Yo ando buscando desde ayer

@felipeulloa5a43 4 года назад

Igual se puede, de una forma mas parecida es.reactjs.org/docs/components-and-props.html import React from 'react'; class Navigation extends React.Component { render() { return ( {this.props.titulo} ); } } export default Navigation;

@nicolasrinconvija4641 4 года назад

A que se debe el props?

@yovanipahuara9345 4 года назад

@@nicolasrinconvija4641 atributos que puedes añadir a tu componente

@axelv3658 5 лет назад

No puedo creerlo, en serio... En todo este curso de React explicaste tantas cosas que yo tuve que ver en los últimos 3 cuatrimestres de mi universidad. Además, lo has hecho con mucha facilidad y con tanto dominio del tema que quedé impresionado, sabes muchísimos conceptos y herramientas que en serio son bastante útiles y necesarios para el desarrollo de web apps. No sé que decir, te la volaste con este curso jaja, es de gran ayuda para muchos. Gracias y excelente trabajo. (Y)

@babakua01 5 лет назад

EXCELENTE VIDEO, LES COMENTO QUE TENGO HASTA CURSOS DE REACT Y NUNCA PODIA ENTENDERLO O TOMARLE EL HILO AL TEMA Y ESTABA BASTANTE DESANIMADO PERO CON ESTE VIDEO EN TAN POCO TIEMPO YA ENTENDI BASTANTE, FELICITO FAZT POR EL NIVEL DE CLARIDAD Y SENCILLEZ AL GENERAR ESTE TIPO DE VIDEO QUE TANTO AYUDA HA CADA UNO DE NOSOTROS EN VERDAD ME SIENTO MUY CONTENTO POR TU APORTE Y SE QUE TODOS LOS DEMAS SIENTEN LO MISMO.

@JDE16 3 года назад

24-nov-202 Hace dos años y unos meses que se publico este curso y aun asi es el mejor de todo RU-vid. muchas gracias por este gran aporte!!!

@Sebastian_szz Год назад

por suerte se react y pude hacer el tutorial a pesar de que se encuentra desactualizado a la versión que tiene hoy en día. Muy buena la clase muchas explicaciones y se entienden muy bien.

@martinbruno3370 3 года назад

Por fin alguien que va directo al grano al explicar

@victor8068 2 года назад

Tuve dificultades al importar el archivo JSON, por si a alguno le sucede, a mi me funciono asi: import * as todos from './todos.json'; const objJson = todos.default.todos; y luego llame a objJson donde fuera necesario... PD: muchas gracias por toda esta valiosa informacion Fazt. Saludos!

@FaztTech 2 года назад

Gracias a ti por comentar y Genial que compartas tu solución Victor.

@informaticaymas9108 Год назад

X2 Costa Rica

@gustavoescalante9880 Год назад

gracias, me vino excelente

@eigorcamargo7324 3 года назад

mi pana realmente contigo explicando todo es muy claro ni en udemy e podido entender react, como contigo te felicito hermano

@jesustr20 5 лет назад

muy buen video, el ritmo que le das es el ritmo que tu sientas que esta mejor al grabar el video, porque al final los que no saben aprenden y los que saben refuerzan sus conocimientos.

@gsalazarmusic 3 года назад

Excelentísimo curso de React!!! En nombre de todos los aprendices... ¡GRACIAS POR EL APORTE!

@nahuelaraujo6914 4 года назад

Sos muy bueno explicando man, muchas gracias por existir, saludos desde Argentina!

@fcompany9735 4 года назад

muy buena hize varios cursos de react y no las entendia pero al ver tus videos recien me ilumine muchas gracias

@juanarede2525 2 года назад

De todos los tutoriales de react este es el mejor, muy bien explicado por fin pude entenderlo.

@danielsantiagomoyanodelgad4917 5 лет назад

durante un año intente aprender React y no encontré a alguien que pudiera explicar muy bien y ahora lo encontré like y suscribir.

@ErickChristianRC 3 года назад

En 2021... Hice el tutorial en una Ubuntu Mate... Con VSCode... Cambiaron algunas cosas de la Sintaxis, pero googleando un poco pude ponerme a la par y lograr la aplicación hasta este punto.

@Gabriel-kc7pp Год назад

gracias compañero aunque este un poquito desactualizado me sirve un montón aprender React muchas gracias

@tizico666 6 лет назад

Muy bien explicado, ya habia visto otros videos pero con la explicacion se me hacia muy avanzado que al final no se logra entender las bases. Gracias amigo!!

@guett 5 лет назад

Muchas gracias por el tutorial, nunca comento, pero definitivamente era necesario, excelente labor!

@ililiilili3366 6 лет назад

Te ganaste un subscriptor ni en ingles los tutoriales son tan buenos!!!!

@devgabriel6898 5 лет назад

Muy buen curso! Nada que envidiarle a ninguno de los mejores calificados en Udemy. Te felicito! Excelentisimo trabajo!

@leandrogarcia6294 4 года назад

Tu explicación es increíble, se nota que preparaste muy bien cada parte. Te felicito, y mil gracias por estos videos, aprendí un montón. Te dejo un sub y un like :)

@oh4n4j 6 лет назад

que explicación tan gloriosa! muchas gracias, haces ver todo tan sencillo...

@Angel-yo1is 3 года назад

Pues realmente lo es, estos tipos han entendido todo, debe ser simple, cuando lo puedes explicar sencillo es porque lo has aprendido bien creo que lo decía Feynman

5 лет назад

me va a encantar ReactJS, para eso de hacer aplicaciones PWA. yo he hecho aplicaciones web, usando DIV como paneles o escenas de un stroyboard de iOS en Swift, apareciéndolas y ocultadoras con javascript y CSS para los estilos. pero a medida que crece la APP se vuelve una pesadilla leer ese pergamino de código. Y reactJS te ayuda mucho a tener tu APP divida en secciones y no tener toda la APP dibujada en HTML5 ya que React renderiza desde JS

@LuisCastillo-bl6mq 3 года назад

eres un genio explicando!

@alfredoalarcon6074 4 года назад

Para quienes tengan problemas con el constructor, deben utilizar class App extends React.Component

@kembertnieves6510 6 лет назад

Excelente, me estoy enamorando de react, muy buena explicacion!!!

@alejandrosalinas53 6 лет назад

Excelente, el mejor curso que he visto. Gracias y felicidades!

@danielcamilomontoyasanchez4122 5 лет назад

Aprovecharé para repasar conceptos de React, ya que sé react, pero paré por terminar un proyecto en VueJS y NodeJS, pero ahora retomaré, así que los veré a lo rápido que pueda.

@JonathanGomezPy 4 года назад

Explicas demasiado bien Fazt, sigue asi

@SeaBassLab 4 года назад

Fazt sos mi mejor profesor te aprecio muchisimo y veo que la comunidad tambien. Estoy notando que cambio bastante react desde que hiciste este video. Habra algun video que explique estos cambios? por ejemplo: no aparece ya {Components} y empieza directamente function App(){ return( div...etc... Igualmente voy a ir probando que sale bien o mal XD....GRACIAS

@orlandomartinez9119 Год назад

Yo apenas lo estoy viendo y me fije en lo mismo. Pudiste encontrar una solución a eso?

@SeaBassLab Год назад

@@orlandomartinez9119 Realmente no es que necesite una solución. En el video se esta usando programacion orientada a objetos. Por eso usa una clase App y la extiende (hereda) de la clase Component. La diferencia esta en el estilo de programar. La programación orientada a objetos es mucho más poderosa y compleja que la de funciones ya que la programación orientada a funciones carece de características como heredar, poliformismo, etc.

@jasoncarrjim459 6 лет назад

Amo tus vídeos. He aprendido mucho en tu canal. Gracias por compartir tus conocimientos

@d-landjs 3 года назад

Excelente curso amigo, si que me sirvio mucho aprender esto!!! Espero mejorar mas sobre este tema!

@fersilent3884 4 года назад

Gracias Fazt excelente video

@AlanPereyra 5 лет назад

Me encantan tus videos están muy bien hechos y aprendo un montón gracias a vos. Hace una semana me pasé a Ubuntu mate y me pareció curioso que también lo usaras. Saludos

@claudiojaviermartinez8421 4 года назад

Sos el mejor explicando Man!

@AaronAlva 6 лет назад

Enseñas muy bien, eres preciso

@devve7 5 лет назад

Excelente video, claro, comprensible, muy buena la explicación. Felicitaciones, buen trabajo!

@OscarCarrasco57yk3r 5 лет назад

Muchas Gracias, me sirvio mucho para el manejo de archivos Json, saludos desde Queretaro Mexico

5 лет назад

Excelente!!! Muy clarooooo!!! Muchas gracias por tu tiempo

@Fl000p 4 года назад

Que bien que explica !!! Grazie por este tuto!

@OscarRiascos 4 года назад

¡Qué manera de explicar! Entendí de una, gracias ✌🏻

@proturguenev1820 6 лет назад

Eres muy bueno explicando!

@webmastermx2446 6 лет назад

Gracias por el tutorial, me gustaría subieras como crear páginas estáticas como rutear etc. para ponerlo en practica en proyectos y poder memorizarlo más rápido

@mauriciotorres2595 3 года назад

Muy bueno tus videos hermano, 💪💪💪

@Salvaram 5 лет назад

muy buen curso completo, entendible y conciso... muchas gracias!

@robyirloreto 5 лет назад

Gracias brother...excelente Maestro

@rodrigofarias9719 5 лет назад

Amigo, tu video es excelente, me ha ayudado mucho mas que asistir a clases aunque parezca mentira. Note que falta el resto de la creacion del componente TodoForm en el video y en la tercer parte el video inicia con todo creado, Podrias subir como creaste el componente? Gracias!

@alexthebro8866 3 года назад

Si usas bootstrap versión 5 clase badge usa en etiqueta sería así: {todo.priority}

@pedrorodrigomedinaosorio3350 6 лет назад

increible aporte, muchisimas gracias

@manuelmartin3 5 лет назад

es mejor reemplazar debajo del primer "render() {" esta por donde se agrega el indice para evitar problemas en el javascript del "App.js"

@himawarigirl1 4 года назад

Espectacular!

@ariagnaalbuerne9890 6 лет назад

Excelente curso! de la forma que lo explicas, es muy fácil entender! Gracias!

@fcompany9735 4 года назад

idolo sos un genio papa

@valentinaruiz6306 6 лет назад

excelente explicacion de todo muchas gracias !

@c4rlesfelix 6 лет назад

Vídeo muy útil. Gracias por compartirlo!

@castillomiguel3556 5 лет назад

Excelente tutorial mi amigo, gracias por el gran aporte a la comunidad!

@stylersito 6 лет назад

Con una vez que expliques cada cosa que haces se entiende we, te extiendes un chingo!

@jjcchh 6 лет назад

la explicación está perfecta, sigue asi, los iniciantes te lo agradecemos.

@ByRokkos 5 лет назад

si consigo sacar mi tfg es gracias a ti señor!

@javieraldunatemengual1104 5 лет назад

Muy buena explicación y muy buenos videos, pero por mi falta de conocimiento en javascript y las nuevas actualizaciones de ReactJs, el archivo App.js no viene con clase, sino en función, me explico viene de la siguiente manera: " function App() { return ( ); } " Mi pregunta va a cómo se puede realizar la parte de las tareas 'todos' y mostrarlos en las tarjetas, estaría agradecido si puedes responder.

@Maxxelmc 5 лет назад

mmm podrías orientarlo como está ahí por clases, como lo hace fazt igual te funcionara.

@Userx1x2x3 6 лет назад

1) Buen video necesito aprender React YA haha asi que gracias! me estas ayudando bastante :) y 2) Yo agregue Bootstrap desde npm de la siguiente manera: npm install --save bootstrap add import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; to index.js file so you have Bootstrap working in the whole app. add Primary in App.js and you should be able to see a blue bootstrap button. FUENTE: github.com/facebook/create-react-app/issues/201

@elshazer 6 лет назад

nose si lo encontraste a mi me funciono esta guia de aprendizaje blog.logrocket.com/how-to-use-bootstrap-with-react-a354715d1121

@Lashistoriasdelilith Год назад

Una pregunta, no entiendo si se tiene que usar la hoja CSS o las className con Boostrap... o cuándo uso uno y cuándo otro. Excelente video como siempre, la explicación es super clara.

@jameresquencornejo9569 2 года назад

Por si acaso comento el pequeño inconveniente que tuve, pero menos mal di con una solución al problema de " Should not import the named export 'todos' (imported as 'todos') from default-exporting module (only default export is available soon) " o que "nmap no es un función" : al importar los datos del archivo json para la versión actual se coloca así import ArchivoTodos from './todos.json'; const {todos} = ArchivoTodos;

@joacoc.4440 2 года назад

Hola Jamer, gracias a lo que indicaste pude solucionar el mismo error!! Pero no tengo claro cual es la diferencia y porque no andaba con el código original... si podes indicarme buenisimo...

@joelsulcacordova7456 5 лет назад

Genial, para el contador de tareas yo coloqué {todos.length}

@AlanReynoso 6 лет назад

Excelente forma de explicar...

@RVKAWAAA 4 года назад

Gracias Fazt querido...o ...perdon mi atrevimiento pero...muchas gracias Jesus. Dios te bendiga.

@Mrst013 6 лет назад

Excelente vídeo, explicas muy bien, sigue así

@Fernando-hr7kk 5 лет назад

Muy bueno! Muchas gracias!

@TheRabocse69 Год назад

Buen video... un nuevo subscriptor... 😉👌

@alejandroquinayas9649 6 лет назад

Gracias me sirvió bastante ...

@elvisalarcon3621 6 лет назад

Excelente vídeo (y) gracias por tu tiempo

@emersonmachado4188 5 лет назад

Excelente aporte fazt Kudos bro

@juliangarcia8051 5 лет назад

Excelente y mil gracias!

@carolinadaza9714 4 года назад

Excelente video ,me gustaría saber si tienes tutoriales de como consumir una Api con React?

@ricardotilleriaochoa5674 4 года назад

muy bueno

@daniBoom 6 лет назад

Hola!, tengo un problema pequeñin. En tu linea 16 llamas un arrow function, desde que la pongo me dice que this.state.todos.map no es una funcion :S Además quisiera felicitarte, te entiendo super bien, y aunque muchos se quejan de que seas repetitivo es mejor aun, porque a veces hay datos que uno se salta o se le olvida. Además te agradezco de que nos compartas este tutorial, porque sé que requiere tiempo y practica :) asi que estoy agradecida por (i ++)

@FaztTech 6 лет назад

Hola Daniela, quizas puede ser un asunto de, en que metodo estas llamando el state.todos.map, si deseas trata de pegar tu código en un chat de discord, para que cuando me conecte lo revise y pueda ver el asunto. te dejo un enlace para que te unas: discord.gg/37PHuNw Y Muchas Gracias, un gusto que te sea útil el contenido :)

@daniBoom 6 лет назад

Ya encontré que me faltaba, era una tontera jajaja. Y muchas gracias por invitarme :D

@ivofacundoc 6 лет назад

Que errors es? tengo el mismo problema y no se como solucionarlo, ayuda por favor

@daniBoom 6 лет назад

lo que me paso a mi, es que estaba mal escrito esto: import { todos } from './todos.json'; creo que si no lo escribes bien no te lo tomará como una función. Suerte!!

@Blingblingbabe_ 5 лет назад

@@daniBoom Me sale el mismo problema. pero lo tengo bien escrito :(

@nicolaspraderi4113 5 лет назад

Grande Fazt !

@gerardosantoshernandez7552 5 лет назад

muy buen curso

@sergiodanielgonza3393 6 лет назад

Hola, primero que nada quiero felicitarte por el curso, la verdad que muy bien explicado, espero mas cursos sobre react. Quisiera preguntarte por el autocompletado que tienes instalado en atom, cual usas? Probe con algunos, pero no me funciona como a vos. Como debo configurarlo? Saludos

@cesarsanchez5394 5 лет назад

Gracias, buen vídeo. Bien explicado :)

@pavelmansilla1124 6 лет назад

Excelente bro

@MrDiagonalDiagonal 5 лет назад

Hola! Excelente trabajo con estos tutoriales no sabes cuanto me han ayudado, pero tengo una duda, al momento de hacer seo ¿cómo harías para integrar las palabras claves y todo eso en javascript?

@axeljacobo4453 5 лет назад

Hola, hay un problema, en vez de class a mi me aparece como function y no funciona el constructor, y tampoco tiene render, hay alguna forma de que me ayudes por una videollamada?

@Paltibenlaish 6 лет назад

muy bueno, sigue asi!!

@brunoandresfontes 4 года назад

Tome su 👍 buen Hombre! :)

@richardcarmonaestrada5920 5 лет назад

Simplemente excelente... suscrito y activada la campana :)Fazt una duda , se pudiera decir que react remplaza a ajax??? Ya que cambia solamente un determinado espacio de DOM

@licarandaparra 4 года назад

Muchas Gracias Sr. Muy buen tutorial, Hay opcion de contratarte para entrenmaientos o talleres?

@angelloluisparejasarmiento6732 6 лет назад

Puede hacer un video poniendo en practica REDUX. gracias

@daniloespinozapino4865 3 года назад

Y se puede combinar con BS! React la lleva!

@javierarratia2994 4 года назад

por qué le dices tudos? maña?

@Jel.Awesh.M 6 лет назад

¡Buen video!, Pregunta (que tal vez esté fuera de contexto), si estamos trabajando con NodeJS ¿por qué estamos usando import en lugar de require?

@FaztTech 6 лет назад

Bueno, Import es la nueva manera de requerir módulos en Javascript. el lenguaje no tenia esta característica antes, es por eso que Nodejs utilizaba commonjs, lo que conocemos comos los require. pero ahora que javascript ya posee una manera de importar, eventualmente podremos hacer lo mismo en Node. pero en resumen, es porque React utiliza las nuevas versiones de Javascript :)

@CalaoJuanPablo 6 лет назад

La razón es que son las nuevas características de JavaScript.

@Jel.Awesh.M 6 лет назад

Si, entiendo que es una de las nuevas características de Ecmascript 6, sin embargo creando un simple Hola Mundo en NodeJS no me deja usar import, al menos no en la versión 9.9.0

@Jel.Awesh.M 6 лет назад

Para cualquiera que tenga la misma duda, internamente se usa babel-preset-env que traduce de es6 a es5 todo lo que está en la carpeta 'src', por eso que se puede usar 'import'.

@axelledesma1696 3 года назад

da lo mismo usar la extensión .js o la extensión .jsx ????

@carlosdanielangelcastano4597 5 лет назад

tengo una pregunta, cuando creo el proyecto de react el componente app que se genera no es una clase si no una función " function App() { " y no renderiza si no que solo retorna el componente del navegador lo creo de ambas formas y funciona bien ¿cual seria la diferencia entre el componente como función y como clase?

@materialr8344 5 лет назад

remplaza la clase por una funcion y el render ya no va

@rami5040 6 лет назад

Hola! de antemano excelente tutorial explicas muy bien, escribo a la comunidad por lo siguiente tengo una pequeña dificultad estoy colocando datos a un proyecto en react por medio de un json, entre los datos hay imagenes, el codigo json queda asi: { "websites":[ { "title":"lorem", "image":"../assets/images/img-gasoil-home.jpg", "description":"lorem", "year":"2011 - 2018", "qualities": [ "qualita 1", "qualita 2", "qualita 3" ] } ] } cuando llamo images en el componente por medio de no me muestra la imagen en la consola se muestra: lorem2011 - 2018 muestra la ruta de la imagen pero no me muestra la imagen lo trate de colocar como requerido por medio de haciendolo de esta manera me arroja el sieguiente error ./src/partial/Portfolio.js Module not found: Can't resolve '{e.image}' in '/home/erick/ReactSites/gasoil/src/partial' Me gustaria si alguien me puede ayudar con una solucion. Muchas gracias de Antemano.

@ExDeLt4 3 года назад

se podría decir que react es una forma de trabajar con js junto con html?

@ivanavellaneda1861 6 лет назад

Que paquete utilizas para que te autoacomplete la sintaxis en JSX?

@alexg92 5 лет назад

buenas noches al dia de hoy en el archivo app.js no aparece class App extends Component{ render(){ return() } } sino function App(){ return() } cuando quiero usar constructor en el min 42:20 me aparece un error

@alexg92 5 лет назад

ya encontre la solucion esta en este curso ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-zIY87vU33aA.html

@leonelwetzel8879 4 года назад

@@alexg92 Muchas gracias, me estaba volviendo loco!

@mauriciovargas7974 5 лет назад

Muy buen video

@pedroarnoldomachadoduran546 5 лет назад

Muy buen video, pero me desespera que pongas todo junto, si ya tenías un componente para que rayos lo borras?

@DiegoLusiete 2 года назад

ERROR in ./src/App.js 11:12-17 Should not import the named export 'todos' (imported as 'todos') from default-exporting module (only default export is available soon)