Los primeros pasos con React.js

1. Introducción: todo el mundo. Yo soy Julian. Diviértete con la inferencia looker. He estado caminando libremente y desde principios de año 2017 y ahora me han contactado dibujante que vienen a hacer una primera clase online. Y estoy muy emocionado de mostrarles mi progreso. Mi primera prueba en línea sería con persecución reaccionada. Es un buen marco para hacer a partir de 10 trabajos. Veremos con más detalle qué podemos hacer. La clase en línea contendrá un proyecto de clase al igual que casi todos los demás cursos sobre participación de habilidades . Y lo estaremos haciendo todo el tiempo durante el curso. Si sigues el curso, normalmente deberías poder completar este proyecto de clase sin ningún error. En fin, si quieres mandarme tu proyecto de clase realmente en criatura para hacerlo para que yo pueda tomar tus errores en tal vez te des algunos puntos de mejora o algo así, realmente te hará sentir como si hubieras progresado porque tendrías retroalimentación sobre tu trabajo. Y de verdad, de verdad lo disfruto. Si ella estaba de espaldas a mí porque me va a mostrar que he hecho un buen club. Como pueden ver, lo estoy usando para contar en seis en mi tripulación. También tienen mi computadora personal aquí mismo. No lo estaré usando para esta clase. ¿ Hemos estado usando el Mac? Pero esto no es militar. Te voy a explicar todo para empezar con reaccionar. Espero que disfruten de las escuelas. Que pasen un buen rato. Los chicos siguen trabajando. 2. ¿Qué es React.js?: Y cuando llegamos a este ternero a punto de volver en realidad el primer paso con tres realmente reaccionó por asesinato con creativo mi Facebook en 2013. Tiene como objetivo crear una sola página con aplicaciones, y utiliza una puerta virtual, que hace preguntarse muy rápido qué otra fuerza de reacciona. Te anima a usar componente, que son muy simples. Pieza cada día. Mi abrigo lo usa JSX como plantilla, insistente Michelle como complejo del dedo del pie. Condición de Gwendolyn acaba de renunciar, y utiliza a su veterano. Entonces lo que aprendimos en este curso veremos cómo dejar de funcionar cuando fui a trabajar para el reactor incluye Mulch A S y P M y el Creador. Aún así hasta entonces veremos integrar nuestro primer componente haciendo render básico en la página . Después traemos el segundo componente, que será un botón. Y cuando estábamos en la vuelta el primer compartimento. Después de esto aprendemos a comunicarnos entre componentes. Pero piensas que las propiedades después de comunicarte entre componentes para ti, entiendo cómo interactuar dentro de la empresa. Pero está en el estado. Y para terminarlo, verdad, se ve ayuda para hacer fuera. Me siento más bonita. Este curso también incluirá un proyecto de clase el cual consistirá será como un simple corte de pollo. Tendremos que usar tanto propiedades como estado, y tendrás que mandarme un abrigo para que yo pueda comprometerlo. 3. Configuración de el entorno: a todos los que vamos a empezar. Nuestro verdadero en realidad es clase. En primer lugar, vamos a él, así que cada dos lo harían. Tendremos que iniciar nuestra primera reacción hacia arriba. Entonces primero vamos a no conocer sillas en tu navegador Web y encabezar de ello un notorio que funciona. Después dirígete a la sección de notas de masa buena a la tina actual y al intelecto para responder consultas que apuntan a tu operativo martes. Mike lo. Sería mi iniciador de preguntas. Se pueden utilizar inclinaciones instaladoras de Windows, binarios. No voy a cubrir instalación en Lenox porque los usuarios de UNIX deberían poder insultar inventar ahora que la zona trasera no dijo que lo van a abrir. Este paquete lanzado en Notorious y NPM en PM's en paquete de notas. Militar. Sería útil instalar otros paquetes como React, por ejemplo, continue. Ven a nuevo, acepta la licencia y luego acaba de terminar la instalación. No cheques nada. Se va a instalar y vamos a trabajar fuera de la caja. El cheque. Si su instalación ha sido exitosa Evident Terminal y tipo nodo Dash V Esto dará . A lo mejor y yo puse un poco diferente a esto, pero debería ser por lo menos 8.9 punto uno. Para el momento de la grabación, La división de video de la nota es de 8.9 punto uno. Eso es un cheque. Si el NPM no se cree que debería, 5.5 punto uno quizá pueda ser diferente ahora. Van a insertar un muy conveniente a sus manzanas. Comience nuestra primera reaccionar hacia arriba. Esto nos ayudará a tener un desarrollo de la misma que recuperarse. Primero cargamos CSS freeloading y vivimos con él. A lo mejor un recuperado en otra clase. Cómo obtener tu primero un desarrollo propio jamás. Pero este es un tema muy complicado, y centrémonos en lo más importante por ahora, el código en tu terminal tipo NPM. Instala Dashti en lugar de globalmente para que puedas usarlo. Vendrán otros regulares y el nombre de los paquetes crean reaccionar hacia arriba. Como se puede ver, el paquete ha sido conocido localmente. Ahora voy dedo del pie usarla crear reaccionar que el primer argumento de este comando será el nombre de tu proyecto para olvidarlos antes de que vayan a escribir. Nuestro primer proyecto tiene frijol instalado. Probablemente tienen un diferente se ponen en mente porque he instalado Young, que es un paquete diferente de nota militar al pie. Se desgarra que instaló paquetes fester. No, vamos a entrar en nuestro director Scotia, que es donde el proyecto Por favor abre tu editor de código mi crédito o es texto sublime buscando con algo que te guste? Yo me dije la opción genial para reaccionar. Entonces como puedes ver, hay muchas cosas complicadas en este directorio, pero lo vamos a usar de una manera sencilla por ahora en tu terminal. O bien puede escribir en PM run. Comienza por stock corto de NPM, que hace lo mismo que puedes ver. Abre una nueva pestaña en mi navegador Web porque el almuerzo es el desarrollo de siempre, pero también carga la primera página. Bienvenido a reaccionar para empezar lo SRC adulto sí y seguro para recargar. Escuchemos la forma en que ambos chicos abren. Abdo cambia. Se puede ver que es un poco complicado, pero a partir de ahí vamos a probar el desarrollo. No es algo así. Mueve la ventana para ver el archivo de efectos. Mi hermano ha recargado y nuestro encabezó su vida. No sentí el camino por el mismo. Tiene 32 en sí. Se acabó la primera parte de su clase. Te devolveré en el segundo punto para empezar a entender cómo funciona reaccionar. 4. Introducción a los componentes: Oigan, todos, si están viendo el video, no deberían tener una tradición compitiendo de reactor Notorious trabajando. Y así debes saber que reacciona O. J s funciona con componentes. Entonces en esta escucha, vamos a aprender y entender. El componente es básicamente algo que tendrías que volver a usar y algo que puedes dividir en tu componente do para tener algo más utilizable y más comprobable de esta manera. Para Rex competente, no te irrumpirás en tu página web. Si pueden ejemplo de algo los tengo. Es el sitio web tipos de o bish todavía era charla de idiomas Como seguimos ejemplo muy básico, esta barra verde justo aquí podría llamarse un encabezado, por ejemplo y es básicamente reaccionar componente y se hace clic en los grifos. Abre nuevas páginas y te actualiza su haciendo aquí tu continuo para eso. Entonces básicamente esto es un componente, todo el asunto, el componente e incluso una sola letra. Un solo posterior y carácter del componente. Los filtros aquí mismo son componentes también. El que tienes a Alistair es que los componentes no tienen acceso a extra tu entorno. Necesitan comunicarse con las finales o incluso para ordenar componente. Ya veremos cómo funciona en, Ah, otra lección. Entonces ahora cómo esos eran candor componente consciente Componente es básicamente GSX por parte de código. Entonces abramos nuestro Así que ahora tenemos el nuestro puede comerciar directamente, el que se creó antes que ha abierto un directorio salteado en dos, como un patraeus para que lo veas. ¿ Está cruzando? Básicamente, son seis cerca, lo que se traduciría más tarde en galleta básica. Integrada extiende componente y componente es reaccionar. Cruz. Básicamente tiene todo lo necesario para usar tu componente. El método render es lo que mostró el componente. Date prisa a usar visual. Que se lo devuelva. Medida, ¿qué ventanas? Todo lo que necesitas en tu componente. Por lo que usas GSX. Es un poco diferente a lo que son HTM porque, como se puede ver, por ejemplo, aquí mismo no cerramos blancos. Él llama tener mejor. ¿ Qué nombre cercano? Porque su cabecera donde nosotros con Cristo tierra Porque el teclado cerrar es con la palabra clave en tu sexo así que necesitaremos que tengas ah nombre de clase atributo. Hay una lista fuera de atributo que necesitas usar con reaccionar en lugar de fuera de atributo regular. Ah, en el que se me ocurre, por ejemplo, es ah html cuatro. Para una etiqueta como, por ejemplo, etiqueta html cuatro cualquiera de tu tiempo t 80 tendrás un completo menos en lo que puedes usar como tributo en la documentación de reaccionar oficial. Hay un muy literalmente este, pero te acostumbras a ello. Y además, si tu servidor de desarrollo Web está configurado correctamente, en realidad te advertimos sobre el uso de nombres de atributos incorrectos. De acuerdo, Entonces, ¿estás emocionado de verte con facilidad de componente? Ahora sabes un poco cómo funciona. Ahora vamos a crear nuestro primer componente en la siguiente lección. Te veo más tarde. Adiós. 5. Primer componente de aplicación: tenía todos tratándolo que estás viendo el video que debiste haber visto aparte para apagar nuestros primeros pasos con reactor. Sí, cerca. Y en esta clase vamos a ver cómo hacer nuestro primer componente cuando lo hacemos en la página y veremos qué se ha hecho. El festival aquí tengo mi sublime ventana de texto con nuestro proyecto abierto. En primer lugar, vas a ir en adulterio. Sí, nos movemos todo y para defender el canto indexado O J s. así, primer lugar, en app, Thaci s que van de dedo importan todo lo que necesitaremos para crear nuestro primer componente. Entonces vamos a importar, reaccionar y componer de reaccionar. El sintaxis justo aquí es equivalente a importar reaccionar. Actuamos ese componente. Y en realidad, podría incluso blanco reaccionar componente de punto directamente. Bueno, primero razones de simplicidad. Vamos a importar componente en el Singleton. Entonces vamos a crear nuestra clase. Eso lo llama ya que es un apt o sillas cerca se extiende componente. Entonces esto es sencillo, Opie. Vamos a extendernos. Estamos cerca de componente. Entonces si recuerdas correctamente en la parte anterior que hemos visto hay que preguntarse algo en la página. Está en el renderizado metal. Vamos a crear un método de ventana. Recuerda, tiene que devolver algo de sexo compartido, algún tipo apagado dinámico. HTML. Vamos a crear un peso a tiempo y estamos usando parentis es hacer un récord más limpio. Entonces básicamente, vamos a escribir una simple H. componente Nuestro Hola Mundo de Harry Lee's. Guardemos todo Ahora vamos a terminar, Doctor Caos va a importar. Reaccionar una vez más Entonces somos importantes preguntarnos del método del reactor. Entonces le van a hacer a Wender arriba. ¿ Te podemos gsx aquí mismo? Sí, y regular para rendirlo en documento. Obtener elemento por 80 que. De acuerdo, entonces si lo hacemos con ¿no ves algo que es para mí? ¿ Qué pasa? ¿ Por qué es diferente? No está definido en ninguna parte. Acabo de enterarme. Entonces ese es el tipo de virgen que vamos a importarlo también. Importar arriba desde Tote Slash. Contenta con qué? Lo que ella es empacadora sabrá. Es difícil de hacer en ese comparte, Vale, así que intentemos ejecutar nuestro servidor web de desarrollo y ver qué pasa, como suele llenarse en mi navegador Web. Vamos a ver Sí, hay un default never export y lo planteó con no encontrarlo. Módulo arriba. Vamos a escuchar esta hora y hacer algo así como exportar default al digamos, Oh, obtengo contenedor en menos un dominio. Un hombre en realidad antes llegó a crear o elemento. Entonces como no hizo un elemento, vamos a usar algo que van a usar. Holandés, Ese cuerpo funciona. Ah, componente se pregunta. Entonces como puedes ver, hemos creado componente sus hojas en un solo módulo. Che s modelo. Después hemos importado este componente en nuestro archivo base. Entonces tenemos fecha de ventana en la página. También podrías mujeres con esta línea y en realidad escribir clase por defecto de exportación. Sí intentaba. Ve, vuelve a funcionar. Por lo que ahora hemos creado nuestro primer componente. A continuación escucha, crearemos el segundo componente, y luego logramos que interactúen entre sí por 6. Comunicación de componentes (utiles): tener a todos tratando aquí y bienvenidos a la cuarta parte off primeros pasos con Reactor tan cerca . Ella recuerda correctamente en la tercera parte de esta clase tenemos que saber para crear nuestro primer componente, y tengo 200 en la página. Ahora vamos a ver cómo crear un segundo componente y conseguir que interactúe con componente off up , como es tu Esperemos que hasta nuestro eTour texteado Y después de los traders, tuvimos dos estancias. Hola, mundo. Solo usemos un Deve y peleemos aquí botón de importación de pero Favor Básico. Ahora vamos a utilizar el componente de botón, que vamos a crear en unos momentos, igual que usamos el componente apt en nuestra pelea base. Entonces vamos a botón blanco. Vamos a decir etiqueta se enfría y el mundo, y vamos a vestirse la marea. Hay que recordar que en JSX, etiquetas de recorte Moto son de uso muy común. Digamos ahora este expediente. Si recuerdas, tenemos que crear nuestro componente de botón. Vamos a crear una nueva pelea. Se llama así. Pero entonces el árbol es igual que para la aplicación confiada puede importar, mostrando de nuevo, y es crear nuestro costo sport predeterminado Cerrar botón ampliaciones compartimento. Entonces se van a blanco. Wender, giramos y va a ser un botón de conversación de botón HTML muy básico. Mejor. Entonces, ¿ahora qué esperamos? Otro botón que ella recuerda Hemos declarado aquí, pero etiquetarlo se arrastra. Palabras de manejador. Entonces, ¿cómo conseguimos esta mano de obra pero vamos a tener que utilizar las propiedades del punto de reacción Propiedad que reacciona componente se obtienen en la propiedad de los apoyos de la clase. Vamos a extraerlo, Const. Esperanzas es igual a esto. Por lo que va a usar utilería pero puede hacerlo aún mejor. Consejo capaz igual, diferentes pops. Vamos a usar la etiqueta en los apoyos y ahora la vamos a usar así. Esto va a escribir botón, luego nuestra etiqueta y luego cerrando corbata tibetana. Veamos cómo funciona. Aquí estamos. Contamos con un componente de botón. Puedes hacer clic en él. Eso no pasaría nada. Richard el Battat. Ahora vas a ver que podemos hacer casi cualquier cosa en los apoyos. A ver, vamos a usar esta sangría para tener muy limpio llamado igual. Y ahora qué quieres hacer en un en un rapido. Nosotros vamos a ti La función. Digamos que esto el barco limpio y vamos a declarar algo aquí. Algo es igual a la función. Función simple ventana de punto Alerta. Yo estaba en lo correcto. Podrían tener que usar la fusión anónima aquí, pero vamos a usar esto algo muy limpio. No. ¿ Qué hacemos? Recuerda, podemos usar la defensa de los cachorros. un clic, y ahora van a decir en rápido igualado a un clic. Está bien. Cómo funciona. un clic fui rápido. Este componente es conocido caminando y puede interactuar con un componente presente. Quizás puedas hacer algo así. Algo por aquí. Digamos, por ejemplo, um, ellos me hicieron clic. Plus Vale, digamos que no, mira, vamos a hacer este punto al click 10 del año un click. Él llama a esto que tal vez que en click vamos a decir en click hoy. Vea, puede pasar argumentos a cualquier función que ponga en las propiedades. Por lo que esta la propiedad spot en la siguiente parte de en el estado cómo interactuar con el propio componente 7. Uso de estado: Hola a todos. Bienvenidos a cerca de cinco de estos primer día para tres. En realidad, está cerca, si recuerdas correctamente en el paso anterior, hemos visto cómo crear un segundo componente y darle para interactuar sin primer componente. Ahora vamos a interactuar con el propio componente mediante el uso. El estado debe recordar correctamente el video de introducción, declarar enfáticamente un objeto que reacción observó para ganar la cosa todo lo que necesita. Entonces, ¿cómo nos apropiamos rápidamente? Abramos nuestra pensé que ella ha despedido. El estado se declara en el constructor de los componentes. Es un constrictor, quizá propiedades, y se llama súper cachorros. Entonces que re realmente inicializar las propiedades políticamente, un estado miembro de clase es igual. Y entonces tenemos un objeto de paso que diferente infinito muestran a Desde ahora es fuerza. De acuerdo, tener creando un miembro estatal. ¿ Cómo lo usamos? Ahora recuerda, es un poco como utilería. Por eso Const muestra a Dave. Él llama a estos ese estado Ahora Hemos recogido horas. Te mostré un miembro del estado. ¿ Cómo lo usamos? Algo así como este show, Dave. Y ahí estoy, el Show de Ciervos. Ah, hola. Enfriar de eso. Normalmente no se debe rentar. El amor ahí. ¿ Cómo tenemos Data State? Ahora te van a ti. El conjunto State metal. Mira eso. En lugar de compartir en el vamos, vamos a actualizar tostados. Ella no ha salvado ST. Y el primer perímetro es un objeto. Será el estado a actualizar. Entonces vamos dedo del pie fecha mostrada, Si eso es bastante cierto. No, estamos viendo estado de datos reactivo y una fecha Sólo una parte. Lo mostraron porque en el estado a actualizar Solo quiero actualizar lo mostró. Está bien, déjalo. Ahora intentemos patear el botón. Está bien. En lo profundo para mostrar una altura. Pero si volvemos a hacer clic ¿Robó aquí? Yo quería esconderme. ¿ Hago eso básicamente hablando del estado. Mira esto. Si escribo, no declaré que mostró ahí Podría estar pensando que no va a cambiar ya que siempre se ajustará a tu cosa valor, que es cuarto al principio. Pero si hago esto, nos llevamos todo el estado Ahora en el primer click que se muestra que pueden hacer clic en el Davis escondido, que es lo que queremos ahora. Simplemente aprovecho esta oportunidad para mostrarte algo con reaccionar. Puedes usar siempre para enrollar o algo así. Mira, ese gusano hasta el paso tres. Es un mapa oscuro, Deb. Y entonces nos preguntamos algo en este lugar justo aquí. Qué uno Se pregunta qué ventana lo, pero y top Cool. Ahora podemos hacer algo. Listo, perra. Interés. Er tina actual Justo aquí. Por lo que hemos declarado un nuevo miembro de un estado. Ponlo aquí. Muerte actual. No. Y es lo que está aquí para recuperarlo. Enfriar. Ahora, ¿cómo interactuamos con él? Básicamente como un pero en click. Y llamemos a esto que decía Niños, Doug, tiempo que estoy creando aquí en función anónima. El registro, admitió mi dicha corriente. Eso se creó, dijo Smith. Corrente. Tab, ¿qué estoy haciendo? Yo estoy haciendo lo mismo en los dos. Estoy actualizando el estado. Mira, ese dicho Estado actual Tad duro. Y ahora estoy actualizando sobre Lee la corriente. Ese miembro de la cosa que no estoy actualizando te mostró y con el show de Brookly David, no la corriente de citas. Entonces echemos un vistazo. Una palabra bajo hizo para mostrar u ocultar, y aquí que nada, porque que hasta tres caliente. ¿ Y si tuviera el defecado? El top es para ustedes aquí como queríamos porque sólo tenemos un show fechado El estatal no han bajado lo suficiente como para conseguir por esta parte de. Declaré no durante la noche que vamos a ver cómo crear algo un poco más interesante y hacer que encaje la oración aquí usando estilos C. 8. Agregar estilos de CSS: Oye, todos vendrán al plástico en la última parte de este reaccionar Js clase 1st 8 con reactor. Ahora bien, en la parte anterior no hemos visto nada para actuar dentro de nuestro propio componente. Ahora vamos a hacer que se sienta más bonita mediante el uso de estilos CSS. No, como te preguntas reaccionar te permite crear bellas educaciones. Pero ahora las aplicaciones se ven bondadosas. Sí, fea. Por lo que le vamos a agregar CSS touch. Pero, ¿cómo lo hacemos? Ver evaluar el reactor. No podemos usar una pila apretada por dentro. Yo compartiría seis. No es hermoso. En realidad, la mayoría reaccionan los usuarios en estilos de luz. Sí. Básico en dados de luces en lugar de usar close es como normalmente lo harías con HTML. Utilizamos mayoritariamente etiquetas de inicio continentales porque te permite estar para tener más control sobre lo que iniciaste. Haz esto ahora mismo. De acuerdo, vamos a crear un valor de estilo. Ahora vamos a decir, como por ejemplo, Tab, Esta será la barra superior en sí. Al igual que en el color. Van a decir que no es genial. Algunos votantes pueden ser una sola elección, así que pero voy a usar el negro. De acuerdo, entonces ahora cómo lo usamos primero de todo esto, Dave apretado. Esta será la barra superior. Ahora vamos del dedo del pie donde empezó, igual muere. Tubs para ver este Brooke han creado sobre Taba que no le gusta gris por tierra un pixel borde negro. Podemos hacer un poco más Eso está en corte dental apropiadamente. Digamos que empecemos llamadas estilo tina singler porque sería una sola vez. Echa un vistazo a esto. No puedo. Kohler. Vamos a usar el borde gris real un píxel únicamente negro otra vez. Pero esta vez vamos a decir frontera inferior cero. En realidad puedes usar cualquier cosa en CSS. Pero solo tienes que usar camello cuida en lugar de guión. ¿ Cómo uso algo como trabajo que transforma? En realidad, puedes usar la transformación de armas así. Simplemente ponlo en la calle. Entonces, ¿cómo se ve ahora de crear una nueva parte de CSS para grifos? Enfriar. Se puede hacer tal vez un poco más de margen. Cero despedida cero noches estarían muy concentradas. Enfriar. Eso es un poco demasiado Comprénsalo en él. Eso es lo que conseguí. Paso fresco. Ahora tenemos una tina fresca. Están justo aquí. A lo mejor puedes tener un poco más de relleno aquí otra vez. Pon 10 y no queremos acariciarte. Otro fondo poniendo cero. Enfriar. ¿ Qué? El frasco se ve bastante eficiente ahora, ¿ no? Se ve vertical, y también podemos hacerlo un poco mejor. Sí, tenemos una pestaña actual en el estado. Podemos usarlo para agregar más estilo. De acuerdo, entonces vamos a crear una nueva entrada para un sujeto CSS que esté recubierto de comenta. Va a tener una bolsa amarilla en color. No es bonito, pero es por ejemplo. Entonces si recuerdas correctamente, esto el celoso guardó objeto camarero. Entonces, ¿cómo creamos un nuevo objeto? Vamos a usar la asignación. Pensamiento en el objeto. Cerrar Objetado. Una señal. Yo soy sujeto Tyler Tab, y vamos a decir estilo, no pestaña actual. De acuerdo, ahora todos los grifos tienen los grifos actuales muertos. ¿ Cómo tomamos esta sencilla corriente de usuario de propiedad que provienen del estado? Recuerda, con la corriente de ti, estas cosas entonces me acabo de morir Ese objeto de guión de concha actual mientras la esposa en una silla vacía . Un objeto script. Ver, Ahora ninguno de nuestros grifos tiene el tipo actual iniciado. Vamos a patear este look actual seleccionado. Podemos hacerlo algo en un poco más interesante. Al igual que el color azul su azul. Ahora ya sabes crear una aplicación de reaccionar muy simple. Piensas que las propiedades estado y estilo CSS. Esto es todo lo que necesitas para crear una aplicación muy sencilla. Ahora voy a crear otro curso un poco más avanzado en reaccionar. Diviértete bien. Y que no te olvides de enviarme tu proyecto de clase. continuación encontrarás una descripción adiós.