Crea aplicaciones de blog con un servidor de reaccionar

1. Introducción: Hola mis amigos. Bienvenido a este curso en el que vamos a aprender. Podemos borrar el sitio web de blogs del bulbo capilar. Y Jason dijo, mi nombre es Tony tradicional y seré tu restringido en este curso. En este curso, vamos a ver cómo podemos crear este hermoso sitio web de blogs con la ayuda de objetos, reaccionantes, Y puertas en lugar de un, no hay back-end involucrado en esta aplicación. Por lo que este código es ampliamente parte de diseño, pero no son ningún desarrollador para el tipo de dormitorio, ningún tipo de conocimiento de fondo. Entonces vamos a tener una demo rápida de esta aplicación de blogs, que vamos a construir en este curso con el lado de defensa reactivo Health Bot de la misma. Por lo que actualmente estamos lanzando beneficio de cinco bloques. Y si desplázate hacia abajo, puedes ver que tenemos una emisión de página por clic o negativa. Verás a las próximas cinco cuadras. Pero por el momento tenemos una nueve cuadras en la duplicación. Por lo que se está mostrando sólo para el blog en este click en Vista previa, volverás a la página de inicio. Alguna vez miramos ambas secciones. ¿ Dónde te explicamos la vida de tu blog? Tenemos una carga cardiaca en vivo, así que tenemos un Carnegie como conducir seguro de que su tablero. Y si hace clic en alguna crítica, esto se filtrará, particularmente en orden. Pero se puede ver que para este particular, no tenemos ningún blog es para si tenemos que bloquear o hay que mirar. De esta manera también, puedes terminar bloque de audio, ¿de acuerdo? Ahora, éste, vamos a salir todos los bloques que aún no tenemos la décima plata. Ahora veamos la región correcta de esta aplicación de blogs. Pero primero voy a añadir un blog todavía, y voy a darle ese retraso. Blog, la demo. Voy a pegarlos descripción larga. Voy a sumar lo inmediato. Se puede ver que respecto métodos imagen de cargado estadísticamente. Vamos a seleccionar una categoría como moda. Y vamos a hacer click en Agregar. Este blog se detecta por completo. Se puede ver que tenemos aquí como demo de bloques decorativos. Se puede ver allí bajo carta para sección. Y para proceder, está blogueando este componente de guardia. Entonces hay que dar click en Siguiente. Se puede ver que este blogueo y conseguirlo por aquí. Tenemos nuestro bloque creativo. Ahora, también podemos eliminar un bloque. Realicemos la operación de eliminación. Haga clic en este icono. Este blog se diluirá. Contamos con bloque de método de tablero diluido técnicamente. También puedes actualizar el bloque diferente. Entonces vamos a actualizar éste. Empecemos con la actualización del blog de la junta. No se puede actualizar la imagen aquí. Puedes actualizar descripción y particularmente así que vamos a actualizar esta. Se puede ver que nuestro blog también se está actualizando típicamente. Y tenemos una tercera funcionalidad también en esta aplicación. También puedes configurarlo los bloques. Voy a configurarlo para bloguear con la palabra clave táctica. Y si haces click en set, saldrás, eso es bloquear con esto dado. Y si haces click en esta cruz, obtendrás un bloque de backhaul que tenemos en nuestras puertas Y lugar de una tenemos también unos pies de tabla Timperley. Tampoco tenemos forma en forma si no es apareamiento. También va a aprender que si los datos son coincidencia de ruta normal. Tenemos un poco de detalle también en esta aplicación, click en Modo de lectura. Nunca llegarás a la página de detalles de este bloque en particular. Y si se enfría, se puede ver que tenemos una descripción. También hemos relacionado con este blog en particular también. Desde aquí también, se puede navegar suciedad es el bit de bloque detallado. Por lo que si haces click en este componente de tarjeta, navegarás a este nuevo delegado de ese bloque en particular. Si hace clic en volver atrás, generalmente navega de regreso a la página de inicio. La aplicación general que vamos a construir en este curso con el ayudante y la aplicación de servidor diferente. No hay back-end involucrado. Nos vamos a utilizar sólo en GitHub. Server implementará todas estas características. Se puede decir que este código está diseñado para un desarrollador de contenido. No tienes ningún back-end no letal. Porque vamos a implementar a todos estos niños como 13 degeneración, filtrar agregando, creando, eliminando y subiendo con j sine Theta. Pero solo en esta aplicación React sobre la aplicación que vamos a construir este código con React n GSM, arregla eso. Pero ahora hablemos de los requisitos básicos antes de inscribirse en la discordia. Este curso está diseñado de hecho, de una cubierta. Cualquiera puede unirse a este curso, personaje de alcaide para aprender a crear un sitio web con la propiedad de Salud nuevamente Y puertas, solo necesita tener comprensión básica de HTML, CSS, JavaScript, así como React conocimientos básicos. Entonces los médicos cotizan, tendrás Polonia con respecto a cómo crear un sitio web de blogs con la ayuda de JSON. Entonces, ¿qué estás esperando y ejecuta este código con el fin de aprender a despejar el desarrollo reflexionar con la cabeza prof, lado reactante. Y si tienes alguna sugerencia de barra de consulta, entonces siempre puedes llegar a mí. Voy a intentar mi nivel mejor para resolver su toda la consulta. Desde mi final, te veré en la sección del curso. 2. Configuración de la configuración del entorno: En este video, voy a discutir cuáles son las herramientas y software necesarios para trabajar en este proyecto. En este proyecto, voy a utilizar el editor de Visual Studio Code para escribir nuestro código. Así que asegúrate de llamar a este origen cognitivo para que puedas descargar este origen motivo. Ya he descargado éste. Y lo siguiente que necesitamos instalar el nodo j también para tener aquí un servidor de desarrollo para reactivos. Y también junto con nota ahí, obtendrá un administrador de paquetes npm para instalar la dependencia y asegurarse de instalar el nodo? Sí. Hagamos uno. Creo que eso es todo. Eso es todo necesario para este proyecto. Ahora, espero que haya instalado tanto el nodo j como el editor de código de Visual Studio en su sistema. Y puedes verificar si el nodo JS se instaló o no en tu sistema. que puedas ir al CMD, abrir, abriendo mi AMD, y puedes ejecutar un comando aquí, guión nodo v. Obtendrás el nodo de origen que el nodo JS dijo en término de página. Ahora, pasemos al código de Visual Studio tendrá que lanzar en nuestro Código Visual Studio para hacer nuestro DG de desarrollo. Whoa chicos, he abierto mi visualmente si haces código y necesitamos instalar tensión térmica. Esa tensión será como primera unidad en instalar este soporte de aire. Básicamente coloreará tu soporte de apertura y cierre. Y ya he instalado yendo a instalar estas actinas y así puedes lastimar las dissecciones y como aquí, soporte aquí. De esta manera se puede instalar esta. Unidad de luz solar dirigida para instalar este. Esto es fragmento, un fragmento encendido. Por lo que míticamente ayudarnos a generar una reactancia es fragmento como si quieres escribir un componente funcional, entonces solo tienes que escribir RAF's. Será agenda semanal funcional, un componente. Es muy útil generar unos lípidos reactivos con la ayuda de esta atención. la otra cosa que necesitamos instalar requierela otra cosa que necesitamos instalar como esta cotización, permitida. Puedes instalar éste también fin de cumplir con nuestra junta directiva. Eso es todo. Sólo esto tanto que transitorio requirió en nuestro Código Visual Studio. Te veré en el siguiente video donde empezaré a configurar el proyecto React JS. 3. Proyecto de la configuración de React: Chicos, ahora estoy en este directorio y voy a abrir aquí un símbolo del sistema. Abramos un símbolo del sistema. Voy a crear una aplicación React usando el comando y picks Create, React app y la app React JSON block. Este será nuestro nombre de aplicación. Vamos a golpear Enter. Tardará alrededor dos a tres minutos instalar toda la dependencia necesaria. Volveré una vez toda la dependencia. Entonces chicos, nuestra configuración del proyecto se completó. Ahora, primero vamos a entrar en este directorio que es reaccionar, JSON, blob. Ahora estamos en esta introductoria antes de que hagamos npm start cuando TI instale algunos paquetes. Vamos a trabajar con el router react dom. Vamos a instalar este paquete. Reaccionar el router abajo del eje que vamos a utilizar. Entonces vamos a usar React para certificar o mostrar la notificación de tostadas. Entonces cuando es demasiado alto, IMDB reaccionan la interfaz de usuario. Eso porque también vamos a trabajar con el diseño de materiales ambos atrapados en este proyecto para construir nuestro componente. Instalemos estos paquetes. Y mientras tanto, ya he abierto este proyecto en mi Visual Studio Code. Entrémonos en el Código VS. Para que como se pueda ver que este proyecto está abierto en mi Visual Studio Code. Eliminemos todo el contenido no deseado que tenemos en nuestro archivo app.js. Sólo voy a dar aquí un rumbo. Blog. Vamos a eliminar este 1 primero. Y no necesitamos este archivo de texto. Vamos a quitar este también. Eliminemos este logo dot como archivo SVG también. Ahora, vamos a comprobar si nuestra coordenada de paquetes dijo o no. Nuestro botón de paquete. Hagamos y demostremos y esperemos la aplicación se cargue en el navegador. Carga de la aplicación en el navegador sin ningún problema. 4. Configuración de JSON Server: Entonces lo siguiente lo que tenemos que hacer, así que voy a configurar nuestro servidor JSON aquí. Entonces voy a crear un archivo en la raíz, ese es el archivo db.json. Y aquí vamos a tener uno blogs porque vamos a tener todos los blogs. Vamos simplemente, pongamos ya sea en particular ahora, esta era, porque vamos a almacenar todo este blog dentro de esta matriz. Ahora, tenemos que escribir uno es cribbed para iniciar nuestro servidor JSON. Por lo que voy a la página 20 script para iniciar esto. Y servidor JSON. Acabo de pegar esto es guión. Para iniciar el servidor JSON. Tenemos nuestro MDB axial, reaccionar UI Create, React router, reactor de diamante. Solo se requieren estos cuatro paquetes para trabajar en nuestra aplicación de blog. 5. Estructura de la carpetas: Ahora lo siguiente, lo que tenemos que hacer, voy a crear alguna carpeta aquí. En primer lugar para poco va a ser componentes son todos componente se colocará dentro de esta carpeta. El segundo carpeta, vamos a tener páginas. Voy a crear algún archivo dentro de esta carpeta PDF. Vamos a tener como nuestra homepage, home dot gs. Entonces vamos a tener nuestra página de blog. Entonces vamos a usar la misma página, pero agregando el nuevo bloque o actualizando el bloque adjetivo. El siguiente archivo vamos a tener vida blog.js. Por lo que también podemos ver el blog único en una página separada. Los archivos que no vas a haber formado. Por lo que también vamos a no financiar método si la URL no coincide. Los otros expedientes que vamos a tener uno más como. Simplemente contendrá alguna información básica sobre esta aplicación. 6. Configurar el MDB en nuestra aplicación: Ahora lo siguiente lo que tenemos que hacer, así que primero, voy a configurar nuestro material es agregar Bootstrap en esta aplicación. Entonces vamos a ir a la página oficial del diseño de materiales Bootstrap. Demos clic en Comenzar. ¿ Qué tenemos que hacer aquí? Sólo bajemos. Primero. Necesitamos importar este archivo CSS para aplicar el estilo de viaje en barco material en nuestra aplicación. Entonces cuando tomó página Esa es una declaración importante dentro de este índice dot js archivo. Aquí tenemos que pagar. Ahora, lo siguiente que tenemos que hacer, también vamos a utilizar este ícono Font Awesome. Sólo vamos a copiar este. Y vamos a pegarlo aquí dentro de este index.html. Y también vamos a trabajar con este estilo de fuente rover. Copiemos este también. Sólo peguemos aquí. En tercer lugar está la carpeta pública. Voy a poner mis imágenes. ¿ De acuerdo? Voy a traer las imágenes. Tercero es carpeta pública. Por lo que acabo de pegar nuestra carpeta de imágenes dentro de esta carpeta pública. Y no tienes que preocuparte por todas estas imágenes porque yo proveeré esos éteres. Por lo que no necesitas preocuparte por esto todas las imágenes. Así que hasta ahora, acabamos de completar nuestra configuración básica. 7. Habilitar el enrutado: Ahora lo siguiente lo que voy a hacer, voy a registrar toda esta ruta. Entonces primero voy a generar aquí un fragmento. Demos un título por ahora, como sobre. Ahora, leamos esto en un poco aquí también, usando el RFC. Demos el título. Lo hiciste. Vamos a centrar esto en un poco aquí también. Será un blog único en el que podremos ver el detalle sobre el blog específico. Ahora, este será el título. Nosotros no nos vamos a haber formado también. Mantengámonos por ahora, no formados. Ahora. ¿ Qué tenemos que hacer? Vamos al archivo app.js. Y aquí tenemos que bajar el router de reacción componente. Vamos a traer rutas, router del navegador, ruta. Quitemos este. Digamos que elimine este. En el nivel superior, vamos a tener router del navegador. Vamos a pegar este contenido. Dentro de esto. Ahora, vamos a tener todas las rutas, así que vamos a registrar nuestra antigua ruta dentro de esta ruta. React router dom se actualizó la versión seis. Tan dulce no está disponible en el router reaccionar Dharma vergence six. Por lo que tenemos que usar ruta. Esta ruta. Si querías rígido 35 resuelto, entonces tienes que devolver esta ruta. Aquí. Vamos a proporcionar un camino a cinco veces fuimos a registrar nuestro elemento homepage que tenemos que proporcionar aquí. Vamos a registrar nuestra ruta de esta manera. Si el código VS importa automáticamente este componente y con rutas no tenemos que proporcionar la palabra clave exacta. Ahora, vamos a copiar esta y la siguiente diapositiva vamos a tener nuestro blog. Para ello, vamos a utilizar componente agregado bloque. La tercera ruta que vamos a tener, hiciste blog y vamos a editar blog basado en el ID. Aquí tenemos que proporcionar el ID. Y para eso también, vamos a utilizar el mismo componente para actualizar el blog existente. Ahora otra luz de ruta solo bloque V. ¿De acuerdo? Por lo que el usuario también puede ver el blog único que también se basará en el ID. Ahora, esta vez vamos a renderizar la página como Blob solamente. La siguiente ruta vamos a tener sencilla Acerca de la página. Por ahora, sólo vamos a copiar. Será sobre eso. R estará a punto. Vamos a entrar a la página sobre. Url no es coincidencia. Entonces en ese caso vamos a resolver no fuente. Llevemos el componente de formulario NADH. Primero verificemos si esto todos los routers funcionan o no. Entrémonos en el navegador. Lee este. Por lo que el hogar ya está trabajando. Ahora. Vayamos al blog. Esto también está funcionando. Blog. Blog. Tenemos que proporcionar ID, pero también está funcionando porque estamos ingresando al mismo componente para agregar el nuevo bloque, editando el bloque de salida. Las otras rutas que tenemos como de esto también está funcionando. Tenemos blog sencillo, blog, bloque de puntos. Tiene que proporcionar el DNI aquí también. Por lo que esto también está funcionando si las URLS no coinciden. Así que mantengamos alguna URL aleatoria. Esto también está funcionando. Es mirada, está bien. Tenemos capaces de registrar con éxito nuestra toda la sequía que tenemos en nuestra carpeta de dígitos. Lo siguiente voy a configurar la T phi reactiva en esta aplicación. Voy a pegar para importar declaración IF aquí. Este tratamiento importado azul se requiere para configurar, reaccionar con activo en nuestra obligación. Así que vamos a darte un contenedor. Eso funcionará. También hemos configurado el reactor. Vamos también es iniciar nuestro servidor JSON también. Entonces este es nuestro directorio donde hemos creado nuestro proyecto React. Vamos a ir a la carpeta de estado y vamos a abrir una TMD. Y hagamos npm run. Esto es para k. Así que por el momento, no tenemos ningún contenido para probar éste. 8. Trabajar en el encabezado: Lo siguiente que queríamos básicamente crear un componente de cabecera para que podamos navegar fácilmente en nuestra obligación. Vayamos al Código VS. Y en la carpeta de componentes de estado, voy a crear un archivo llamado header dot js. Vamos a encontrar generar un fragmento aquí. Por ahora. Ahora, vamos a ir a la página oficial de diseño de materiales Bootstrap. Aquí, voy a usar componente de navegación. Voy a usar navbar. Y voy a usar este número. Así que vamos a arrastrarnos hacia abajo. Voy a copiar este código hasta aquí. Vamos al código VS y vamos a pegarlo por aquí. También necesitamos copiar el componente que requirió cuando TI para traer ese componente de nuestro MDB reaccionar UIKit. Así que vamos a copiar toda esta importación. Pongámoslo aquí. También tenemos que traer estado enorme. Aquí. Un par de cosas que necesito abordar. Vamos a definir un estado. Por lo que const usuario estado false. Aquí se enviará, se establecerá. Entonces sólo estamos alternando aquí, así que será. Y aquí también tenemos que ponerlo. Entonces vamos a crear un blog. Si yo aplicación, voy a poner aquí nuestro logo, cuál es nuestra obligación aquí. Entonces aquí voy a quitar éste y vamos a navegar a la página de inicio. Será lateralmente. Aquí. Voy a tener mi imagen. Puedo usar aquí, imagen allá. Y ordenar puedo darte nuestra imagen para más tarde de fade-out carpeta pública. Entonces imágenes, y tenemos un logo, logo dot JPG. Alterno tenemos que proporcionar por lo que será baja solamente. Tenemos que dar un poco de estilo en línea aquí. Será como altura. Esto, y manejar el color de fondo. Y también necesitamos cambiar el color de fondo. Necesito dar aquí 5411 b. Será ligero. Eso está bien. Creo que eso es todo. Cuando se va a cambiar otras cosas aquí. Entonces será como solo rebanar aquí porque nunca llegamos a la página de inicio. El siguiente gráfico que vamos a tener como bloque de anuncios. Aquí podemos especificar ese bloque de anuncios de salida. El siguiente bloque que vamos a tener alrededor. Por lo que podemos precisar sobre. Se tratará de esto. También tenemos que dar algún color de estilo en línea. Te voy a dar un triple F. Vamos a copiar éste porque tenemos que usar aquí también. Vamos a utilizar aquí también. Y vamos a quitar éste, pero no necesitamos éste. También tenemos que agregar eso como cuenta aquí también en el niño NaBr. Creo que por ahora hemos terminado con este componente de encabezado. Vamos a utilizar el componente theta dentro de este archivo app.js. Dentro de este archivo app.js, voy a traer nuestro encabezado aquí, automáticamente importará este componente. Veamos si este encabezado se está mostrando o no. Se puede ver que aún tenemos nuestra bonita cabecera. Y si hace click en Agregar bloque, vamos a tener un bien hacia el agregado que es. Aquí. Podrías haber notado como si fuera, se recarga aquí cada vez que hago clic en el theta. Porque con ancho el diseño de material componente Bootstrap no se puede utilizar aquí para palabra clave. ¿ De acuerdo? Por lo que dos no está trabajando con estos enlaces de navegación MDB. Si tú también lo haces, digamos que si das dos aquí, no va a funcionar. Se puede ver que no está funcionando. Tienes que usar aún, etcétera Existe una forma alternativa de usar dos. Así que básicamente tienes que bajar el mordisqueamiento del router React. Y luego puedes usar sin embargo de forma natural en lugar de MDB NAB Berlin. Pero en ese caso, recibirás alguna advertencia en tu consola. Por lo que depende de ti si quisieras usar Nearpod link del reactor AutoDock, puedes usar en lugar de este MDB nunca vinculado. Entonces depende de ti. Ahora. Ahora hemos terminado con este componente de encabezado en nuestra aplicación. 9. Configurar la cloudinary en React: A continuación, primero vamos a trabajar en nuestros bloques Agregar Editar. Entonces primero voy a habilitar operación para agregar blogs. Con el fin de agregar bloque para expandido para hacer alguna configuración en nuestro Cloudinary porque vamos a herir nuestro límite en ese Cloudinary. Entonces vamos a conseguir que el enlace de imagen venga o nublada de nuestro Cloudinary. Ese enlace de imagen nos dicen en nuestro servidor JSON. Vamos a luchar configurado Cloudinary. Entonces chicos, estoy en mi cuenta ordinaria. Espero que tenga una cuenta en Cloudinary. ¿ Qué tienes que hacer? Tienes que ir a tu configuración. Por lo que hay que hacer click en este icono de configuración. Y hay que hacer click en este Subir. Desplazemos hacia abajo. Aquí. Tienes que establecer tu preset de carga. Puedes hacerlo. Simplemente haga clic en este Preset Añadir carga. Se generará algún nombre preferido aleatorio. Y aquí hay que usar sin firmar. Y hagamos click en Guardar. Se puede ver que nuestra subida 3 tercera se crea aquí. Simplemente puedes copiar éste y puedes pintarlo aquí en V, como en el código VS. Estamos terminados con esta configuración básica de Cloudinary. 10. Componente de formulario: Entonces lo siguiente que vamos a trabajar en nuestra esta página de blog lo agregó. Necesitamos traer algún componente de nuestro trabajo de diseño de materiales para construir un componente de formulario. Vamos a traer esos componentes primero. Necesitamos validación MDB. También vamos a hacer validación del lado del cliente desde nuestro extremo solamente, entrada MDB, IMDB, btn. Y lo siguiente lo que tenemos que hacer, también te vamos a traer solo cinta. También necesito axial. Vamos a traer ese también de nuestra phi. Vamos a imprimir tostadas. Ahora, definamos nuestro estado inicial. Estado inicial. Vamos a tener nuestro bloque de patrones. Entonces vamos a tener una descripción. Pero nuestro blog. Entonces vamos a tener imagen de categoría que viste venir Cloudinary. Vamos a conseguir átomos inmediatos. Por lo que vamos a ser almacenados que ya, se pone en lugar de. Ahora, vamos a tener una categoría diferente, diferente. En nuestras opciones de desplegable. Vamos a tener una categoría como Ravel. Entonces vamos a tener categoría Life Fitness, Deportes. Entonces vamos a tener comida. Entonces tenemos una sexta categoría para crear blog. Ahora, aquí vamos a tener en valor. Así valor de formulario, valor establecido. Acabas de hacerlo. Aquí. Vamos a pasar estado inicial. Después van a tener un método de editor para categoría que compramos o desplegables. No estamos dispuestos a usar allí un componente MDB React. Entonces vamos a usar un desplegable HTML normal para crear un menú desplegable de categoría hasta ahora que tenemos que administrar también un método separado en GitHub. Entonces vamos a manejar en un estado separado, los métodos contemporáneos estatales. Esto será nulo. Ahora, vamos a desestructurar todo este valor, Ahmad forma valor. Vamos a distraerlo como título, descripción e imagen URL. ¿ De acuerdo? Ahora, trabajemos en nuestros propios componentes. Podemos quitar toda esta cosa. Aquí. Vamos a utilizar la validación IMDB. Dentro de eso. Vamos a darle un nombre de clase. Entonces aquí estamos usando ambos grep plus plumín. Y después de eso, podemos tener algún estilo en línea como margin, top pixel. Tienes que dar no validar. Estamos pasando este novalidate apoyos. Y vamos a tener en alguna maneta conoció presentar. Definamos esta función. De lo contrario, lo sacaremos. ¿ De acuerdo? Así que definamos éste por ahora. Agregaremos la lógica más adelante. En tercero esto y vamos a tener una etiqueta p aquí. Podemos dar luz blob aquí que podemos dar algún nombre de clase para darle estilo a este, para darle estilo a este rubro. Entonces FS, F, negrita. Primero veamos este. Parecen. Vamos a cerrar este. No se requiere. Demos clic en este bloque Agregar. Tenemos nuestro rumbo ad block. Después de eso, tenemos que trabajar en nuestro archivo de entrada. Entonces div dentro de esto voy a tener. Estoy peinando. Voy a escoger un poco de estilo por aquí. Esto es alicatado. Acabo de pegar todavía. Vamos a tener nuestra entrada IMDB. Podemos darle un valor. Entonces vamos a tener como nombre, título. Entonces tipo será el externamente. Entonces vamos a tener nuestro método onChange. Básicamente rastrear el estado de cada campo de entrada en cada prop gif. Vamos, vamos a tener uno sobre el cambio de entrada. Entonces no se requeriría sólo. Entonces vamos a tener nivel. Por lo que será título. Entonces método de validación hay que dar en caso de que el campo de entrada esté en pobreza. Para que podamos darles método. Vamos a dar un título. Tenemos que darle inválida. Ahora. Vamos a tener un descanso aquí. Y después de eso voy a copiar esto en cúpula de cartera. Eso para los archivos de descripción categoría N. Voy a copiar esta entrada un par de tiempo. Vamos a copiar este. El segundo es descripción. Descripción. Nombre será Descripción. Dipolo proteger en el cambio será nuestra cadena de entrada. Se requerirá. Nivel será la descripción. Aquí podemos dar pierna. Por favor proporcione una descripción. Descripción. Vamos a utilizar un área de texto. Podemos dividir el área del detector de fallas y podemos dar filas de archivo de dos partes. No vamos a usar tipo igual a esto. Será phi ubicado en archivo PSF. El valor no está soportado, por lo que tenemos que quitar éste. Para ello, no vamos a trabajar con el oninput J. Para ello, vamos a utilizar una función separada que será Subir Imagen. Entonces en Subir imagen, esto estará en Subir imagen. Y aquí podemos retrasar dot target. Ahora, después de eso, vamos a tener desplegables. Entonces no vamos a trabajar con el material dentro del desplegable bootstrap. Vamos a usar el STM antes. Selecciona Voy a usar aquí. Y aquí voy a usar el nombre de la clase. Por lo categoría. Necesitamos definir el estilo en nuestro archivo CSS dot index. Vamos a dar lista desplegable de categoría desplegable lineal de primera clase . Vamos a tener en tinte. Para esto también, vamos a manejar en un método separado, bien, así que en valor de categoría vamos a tener disponible sólo con la categoría. Dentro de esto, vamos a tener nuestra primera opción. Así que las opciones de hechos disponibles la salida de la luz solar. Por favor seleccione la categoría. Por favor seleccione la categoría. Después de eso, ya hemos definido nuestras opciones aquí. Se puede ver ahí en la parte superior. Vamos a mapear toda esta opción. Aquí. Podemos usar opciones mapa de puntos. Vamos a conseguir opción única. Vamos a tener índice. Aquí. Voy a usar Option. Y de hecho esto, voy a tener opción dentro de este valor será la opción. También puedes dar esto en particularmente en GitHub poblando el valor existente. Dámoslo ahora. Te vamos a dar un índice. De lo contrario, recibiremos una advertencia. Vamos a proporcionar esto en otro campo de entrada también. Por lo que aquí también podemos dar detallado con Italia útil para popular el valor existente en cada campo de entrada. En caso de conseguir el blog distinto. Lo utilizaremos en particular. Si no lo usas, recibirás una advertencia en una consola. Hemos creado este desplegable. Ahora. Tenemos que trabajar en nuestro botón. Vamos a dar un par de descanso aquí. Aquí. Voy a usar MDB en btn dipolo con algún ancho. Y voy a usar algún estilo en línea. Voy a dar aquí margen. Y será de diez píxeles. Aquí. Sólo voy a dar y vamos copiar una vez más porque vamos a tener un botón Volver atrás. Se va a volver. Vamos a usar aquí color, peligro. Eliminemos tipo enviar. No necesitamos. Aquí. Vamos a tener nuestro método onclick. Pero típicamente si haces clic en volver atrás, por lo que nunca llegarás a la página de inicio. Por lo que tenemos que traer navegar desde R. Necesitamos bajar el pulgar de navegación de EE.UU. o el router React. Vamos a bajar este router de reaccionar. Para traernos navegar. Y el pulso hemos empujado hacia ese paterno. Utilice navegar en él, navegue variable. Ahora, utilicemos esta variable de navegación aquí. Ahora, tenemos que definir toda esta función que es oninput change y en Subir imagen. Definamos éste. Fuera de este regreso. Esto recibirá un correo electrónico. Todo el mundo. Por lo que ambas funciones se darán barras de evento X aquí, subirse actual del evento, subir, se obtendrá pila aquí. Primero verificemos si somos capaces de ver nuestro componente de formulario o no. Así que vamos a entrar en el navegador. Entonces en categoría. Entonces tenemos que definir const sobre el cambio de equidad. Definamos este también. Entrémonos en el navegador. Éste. En GitHub archivo de tipo de entrada. No necesitamos proporcionar el nombre. De acuerdo, déjame deshacerme de éste también. Nivel también, no necesitamos proporcionar. Así que vamos a deshacernos de éste también. Ahora vamos al navegador. Entonces nuestra forma se ve bien aquí. Ahora tenemos un poco de trabajo en, en esta categoría desplegable, acuerdo, porque estamos usando nuestro HTML llano desplegable aquí abajo. He añadido aquí el nombre de la clase. Se puede ver esa categoría desplegable. Entonces vamos a, vamos a utilizar el index.js, CSS, al no aplicar nuestro estilo. Aquí voy a pagar un poco de estilo. Entonces tengo este vector, algún código secreto para este nombre de clase. Ahora vamos al navegador. Pero ahora se puede ver que nuestro menú desplegable de categoría, casi parecía componente de diseño de materiales solamente. Así que acabo de hacer mi mejor esfuerzo para hacer equivalente al componente de diseño de material Bootstrap. Nuestro formato terminado por aquí. 11. Subir la imagen de carga: Entonces lo siguiente tenemos que sumar básicamente el bloque. Entonces antes de realizar este bloque de adición, así que primero vamos a trabajar en este piloto. De acuerdo, vamos a la agregada blog.js. Vamos a la imagen Subir. Y sin embargo estamos recibiendo expediente. Así que vamos primero el registro de la consola de registro de la consola por aquí, Archivo por local. Esto es un poco desafiante. Así que primero vayamos a la consola. Abramos nuestra consola. Entonces voy a poner este lado de la consola solamente. Aquí. Voy a subir una imagen. Así que vamos a subir una imagen. Ahora se puede ver que tenemos nuestro BY antes y está contenido en un solo área de objeto. Podemos hacer algo como esto. Será siempre una sola matriz de objetos, por lo que podemos pasar así. Ahora, volvamos al navegador. Refrescalo, sube éste, de nuevo, esta imagen. Ahora se puede ver que tenemos un objeto aquí el cual contenía nombre tamaño, tipo, todos contienen cinco veces yendo a trabajar en esto en la función Subir imagen. Aquí. Voy a particularmente bueno aquí, como const data. Nuevos datos, los datos de formulario básicamente contraen un conjunto de par clave-valor que representa la píldora de formulario. Aquí básicamente estamos creando un par clave-valor para nuestro Farmville que podemos interactuar con nuestra API Cloudinary porque vamos a mantener nuestro límite en Cloudinary. Tenemos que hacer una solicitud API y los datos del formulario son básicamente, podemos hacer fácilmente solicitudes HTTP con la ayuda de los datos del formulario. Podemos hacer una tarifa periódica y podemos subir nuestra imagen en Cloudinary. Entonces por eso estamos usando aquí desde datos. Ahora después de eso tenemos que anexar básicamente. Por lo que los datos de formulario dot anexar. Y aquí tenemos que dar clave y valor. Estos serán datos de valor, dot append. Y aquí tenemos que definir nuestro preset de subida. Por lo que se subirá preset. Aquí tenemos que pasar nuestro valor preestablecido de subida. Por lo que ya hemos copiado este preset de subida durante la configuración de Cloudinary. Pongámoslo aquí. Ahora. Tenemos que hacer una solicitud HTTP. Entonces vamos a usar x's y vamos a hacer una solicitud API con nuestro Cloudinary TP, APA dot, Cloudinary dot. Entonces un subrayado uno. Aquí. Hemos sacado DB, nueve, Q, C, D. Así que si te estás preguntando ¿qué es esto? Entonces, si te estás preguntando ¿qué es esto? Esta es la clave API. Una vez que creas una cuenta en Cloudinary, por lo que obtendrás tu clave API. Entonces vamos al Cloudinary, y ahora estoy en mi tablero. Y aquí se puede ver que tengo nombre de nube. He usado esta Nube negativa. Una vez que creas la economía, obtendrás tu propio nativo de la nube. Entonces no uses este nombre clado porque voy a hacer en este nombre clado. Después de subir este video, quiero trabajar con este nombre en la nube. Acabo de copiar este. Pongámoslo aquí. Entonces no cometo ningún error. Ahora que tenemos que dar subida de imagen. Después de esto, la UE ya será la subida de imagen. Aquí podemos pasar nuestros datos. Ahora. Vamos a conseguir nuestra respuesta por lo que vamos a disolver en ella. Entonces método. Primero pongamos tu consola, respuesta de registro de puntos de consola, respuesta. Será como vínculo. Entonces vamos a responder tipo forma de respuesta. En primer lugar, vamos a subir una imagen. Vamos a revisar lo que estamos consiguiendo. Promover. Refiera este. Subimos esta imagen. Aquí se comprará respuesta. En los datos. Se puede ver ahí tenemos nuestra URL. Si copia esta URL, y vamos a pegarla aquí. Ahora ya puedes ver que con esta URL, tenemos nuestra imagen que hemos subido. Entonces vamos a almacenar esta imagen. Estás vinculado en nuestro servidor JSON. He usado Cloudinary para este proyecto porque en GSM Theta, pero no se puede subir una imagen directamente. El motivo por el que estoy usando Cloudinary para esta aplicación. A continuación lo que tenemos que hacer, vamos a soplar este. Vamos al código VS que podamos eliminar este registro de consola. Podemos dar algún tipo de información para utilizarla, ya sea que la imagen se cargue o no. Entonces antorcha dot info. Después de eso, podemos dar imagen cargada con éxito. Y después de esto, tenemos que hacer vamos a establecer el valor de la forma. Voy a difundir nuestro propio valor. Y solo necesito actualizar la URL de la imagen para que la URL y cómo podemos obtener la URL de la imagen. Aunque, tenemos que ir a esta respuesta dot data, dot URL. ¿De acuerdo? Hemos producido algo como esto por aquí. Dot delta dot URL. Manejemos esa guía también. Entonces, si tienes algún tipo de datos, digamos algún tipo de notificación. Y podemos dar nuestro propio método como si algo salió mal. Sube el mito y listo. 12. Añade un blog: Ahora trabajemos en esto sobre el cambio de insumos. Estamos recibiendo el evento y nombre y valor del nombre de destino. Valor, valor establecido. Voy a extenderme sobre el valor. Aquí. Será como nombre, valor. Y también trabajemos en esto en categoría. Este cambio de categoría también recibirá incluso II. Después de ese valor de palma. Será como valor de forma. Aquí sólo estamos preocupados por nuestra categoría de campo competitivo. Valor objetivo. Vamos al navegador. Cerremos éste y veamos si somos capaces de escribir algo o no en ella InputField. Por lo que somos capaces de escribir upload ya vimos, vamos a seleccionar categoría. También podemos seleccionar esta categoría. Después de eso, vamos a trabajar en nuestro mango presentar. Manejar enviar. Primero, hagamos el evento les dot. Aquí básicamente, estamos previniendo el comportamiento predeterminado de un navegador en el envío. Forma en lástima. Si acaba de hacer clic en él sin proporcionar el valor en cada campo de entrada, vamos a recibir un mensaje de error. Y para esta categoría, no vamos a recibir un mensaje de error porque no estamos utilizando los componentes de diseño de materiales. Vamos a proporcionar nuestro propio método aquí hasta el momento que ya hemos definido el estado. Se puede ver eso por aquí. Después de eso, lo que tenemos que hacer manejar someter. Puedes quitarte la vida. Si no tienes categoría. Entonces podemos establecer el método de categoría. Y el método será como lista, seleccione la categoría. El usuario del momento, seleccione la categoría en el menú desplegable. Entonces voy a establecer esta categoría en nula. Entonces hagamos eso aquí. Solo establece los métodos de error de categoría en null. Vamos a mostrar este método de error. Debajo de esta selección. De acuerdo, pondré este selecto. ¿ Qué tenemos que hacer? Primero vamos a comprobar si tienes el método de error de categoría. Entonces vamos a mostrar eso encendido. Y aquí estoy usando un nombre de clase aquí. Por lo que será tarde Caltech tres. Corteva, mi cara. Este nombre de cristal que voy a usar con div. Aquí voy al método de edición de categoría y voy a escoger el estilo para este método de editor de categoría. En tercer lugar, este índice dot archivo CSS. Voy a tener mi categoría en el nombre de clase de atmósferas y voy a escoger el código CSF para esta clase. Esto está diciendo que voy a aplicar el método de error de categoría. Pero vamos a entrar en el navegador. Ahora vamos a hacer click en Agregar. Ahora puedes ver que también tenemos el mensaje del ítem para la lista desplegable de categoría. Y en el momento en que selecciones una categoría, desaparecerá. Y lo mismo vamos a utilizar para cada edición y poner relleno. Y no estoy subiendo la imagen para este archivo porque volverá a subir la imagen en Cloudinary. Entonces no voy a subir lo innecesario. Déjalo ahí. Ahora, vamos a agregar nuestro blog en servidor JSON. Tenemos que trabajar en este mango presentar. Vamos al archivo Edit blog.js. Dentro de este mango, presentar. Donde tenemos nuestro mango en algún lugar. Aquí. Tenemos ciento doscientos. Entonces dentro de este mango en alguna parte, primero, voy a llevar tenemos el título. Si tienes la descripción, si obtuviste la URL de la imagen de nuestro Cloudinary, y lo es. Y si es categoría eléctrica, entonces solo se te permite crear un blog. Esta es nuestra primera garrapata. Después de eso, también vamos a la fecha mientras creamos un blog. Por lo que necesitamos un dato también. Entonces costo. Es genial tener que definir esto. ¿ Tuvimos que definir esta función en gran profundidad que son los responsables conseguir la deuda actual al momento de crear el blog. Sin embargo, sólo voy a pegar algún código. ¿ De acuerdo? Sólo estoy esperando un código por aquí. En este código se requiere obtener la deuda actual al momento de crear el nuevo blog. Aquí, tenemos nuestra deuda actual. Ahora. Después de eso, hemos producido nuestro campo de formulario. Necesitamos actualizar nuestro valor de formulario con esta fecha actual. Blog actualizado, objeto delta. Y voy a difundir nuestro valor de forma como título, descripción e imagen URL y categoría. Voy a añadir una propiedad más que está muerta. Sin embargo voy a pasar aquí. Deuda corriente. Después de eso. Esta manijas numeradas será una cosa porque vamos a tratar con la APA aquí. Corresponde a un peso. Sí. Será postsolicitudes porque estamos agregando un nuevo bloque, http localhost. Y nuestro servidor JSON se está ejecutando en cinco mil. Cinco mil. Entonces ya hemos definido estos bloques que puedes ver ahí en nuestro archivo db.json. Entonces están todo bloque se va a almacenar dentro de estos bloques en ella. Después de eso, vamos a pasar estos datos actualizados de bloque. Ahora, vamos a conseguir una respuesta. Entonces si vamos fuentes dot status raíz cuadrada a dos, no uno. Al tiempo que hace una mala frecuencia v siempre mayor a nada un estado de nuestras puertas Y y servidor. Por eso estoy tomando aquí no quiero declararlo. Por lo que me imaginé esto mal dicho. Entonces. Tenemos que fuente de acceso método como blog que creó con éxito. Éxito enseñado. Aquí llegamos tarde. Blog creado con éxito. Y en caso de que tengas algún tipo de mejor. Por lo que podemos dar método como Bush, no material de error. Nos gusta que algo salió mal. Después de esto. Lo que vamos a hacer en nuestro proyecto, vamos a estar totalmente despejados cada campo de entrada. Podemos hacer valor de forma. Y el título se volverá temporal. El campo de entrada de título, descripción obtendrá empatía, y categoría obtendrá entrada D. Vamos también en la imagen que agregó, obviamente, no verá esta URL de imagen, la UA. Vamos a temperatura este también. Después de enviar el blog, queríamos navegar hacia la página de inicio para poder utilizar este navegar. De acuerdo, hemos terminado con la lógica de agregar un nuevo bloque. Vamos al navegador y creamos nuestro primer blog. Quería crear un bloque 4D. Entonces woodblock, podemos darte un teddy let food blog. Sólo voy a terminar algún brazo de carga. Si alguna descripción del contenido. Sólo estoy pegado aquí. Vamos a seleccionar un archivo todavía, estoy creando un bloque 4D, así que vamos a seleccionar esta imagen. Tenemos aquí método como imagen cargada con éxito. Conseguimos esta información de nuestro Cloudinary y es una cuadra de cuatro. Así que seleccionemos la categoría para dn, y hagamos click en Agregar. Observa el método como bloque creado con éxito. Vamos a verificar este en nuestro archivo db.json. Pongamos un archivo db.json. Y aquí se puede ver que tenemos nuestro título, descripción, categoría, imagen, URL, muertos, e ID. Hemos creado con éxito nuestros cinco blogs en esta aplicación. 13. Trabajar en la insignia: Lo siguiente vamos a trabajar en nuestro componente de este lote. Así que básicamente en esta categoría quería mostrar en un lote, un componente de lote, género de lote esto en un poco aquí. Voy a recibir niños. Marcar cuatro. Voy a definir alguna clave de color basada en el objeto categoría B. Entonces para esta moda, entonces será de parámetro de viaje. Y luego pondremos este esfuerzo de acceso se ajusta a net fitness. Entonces será el lesionado. Si es comida, entonces será advertencia. Entonces será la info. Deportes. Ahora, vamos a tener este estilo para info. Vamos a usar aquí F5. F5. Después de esto, voy a usar MDB. Y en tercero esto voy a decidir en base a la categoría, ¿de acuerdo? Por lo que este color embed obtendrá J y en base a esa categoría, color es calendrical a color. Aquí podemos pasar a los niños. Aquí estarán los niños. Ahora, vamos a usar este componente por lotes dentro de este archivo blog.js. Utilizamos etiquetas P para que podamos utilizar el componente por lotes VS código importar automáticamente ese componente de bajo. Ahora vamos al navegador. Se puede ver que tenemos nuestra bonita cama para este blog de comida. Lo siguiente que quería realizar la operación de eliminación. Podemos eliminarlo pertenece. Entonces para eliminar el blog, agreguemos aquí un blog. Voy a añadir en la prueba de blog. Voy a dar alguna descripción aquí. Voy a subir una imagen. Subimos éste. En cuanto a mi imagen cargada con éxito. Subimos dentro de esta moda. De acuerdo, vamos a hacer clic en añadir. Nuestro blog se crea con éxito. Se puede ver que podemos ver en nuestra página de inicio. 14. ¿Eliminar el blog: Ahora queremos que realice la operación de eliminación. Ya hemos definido la función en nuestro archivo home dot js. Vamos al archivo home dot js. Aquí estamos recibiendo el ID de nuestro este archivo blog.js. Y esta será la octava cosa porque vamos a hacer una solicitud aquí. Dentro de esto. Voy a querer que el usuario, como, ¿Estás seguro que quieres que elimine ese blog? Soy una especie de mensaje para usarlo antes de que eliminen este reporte. Entonces nuestro tema, querías eliminar ese blog. Algo como este método que quería mostrarle al usuario. Una vez que el usuario haga clic en el bloque se diluirá. Simplemente puedes copiar este. Todo, porque será lo similar sólo se querrá cambiar la solicitud. Por lo que entregar esa eliminación. Lo vamos a hacer un blog basado en el ID. Por lo que voy a usar aquí mochila para que podamos pasar el DNI. Una vez que obtienes esa respuesta, que Theta es como 200. Eso significa que nuestro blog se elimina con éxito. Podemos darles dedos de los pies hacia el éxito. Blogs borrados. Eso dice completamente, está bien. Quería terminar los datos de látex para el modo todavía y terrible. Puedo ejecutar esta función. Bueno para buscar el bloque de orden y servidor JSON y una L, el método será el mismo. Vamos a realizar si somos capaces diluir un blog o no. Entrémonos en el navegador. Demos clic en esto y eliminemos el icono. Observa este método como Audi mostró que querías eliminar ese blog. Y si haces clic en Okay, puedes ver que hemos conseguido método como blog, eliminado con éxito. Eliminar operación. También tenemos realizar. 15. Blog de actualización: Por lo que ahora tenemos que hacer estallar en el irritante bloque adjetivo. Entonces si hace clic en este ícono de edición, será éticamente navegar hacia el agregado con cinco, vamos a poblar todo el valor existente en cada campo de entrada respectivo. Tenemos que actualizar el modo de filtrado, como el título será la actualización, bloque, valor de botón será la actualización. Y en caso de actualización, no vamos a actualizar también la imagen porque no es posible poblar el valor del archivo con en la etiqueta de entrada HTML. Por lo que poblando el valor de nuestro archivo, no está permitido con el archivo de tipo de entrada ubicado. En caso de actualizaciones, no vamos a permitir que el usuario actualice la imagen. Primero trabajemos en poblar el valor de expulsión en el relleno de entrada respectivo. Se puede ver que en la URL, estamos obteniendo el ID. Necesitamos este ID ahora lo agregó blog dot js archivo. Para conseguir eso agregado, vamos a usar usar param de nuestro reactor hacia abajo. Tú salpicas. Podemos utilizar pantalla LED. Usa artículos. Podemos detector el ID que tenemos en. Ahora. Tenemos que hacer algo más todavía. Tenemos que escribir uno, usar el efecto primero. Y aquí tenemos predefinido un estado determinará si estamos en modo inmediato o no. El modo. Más. Será. Ahora si tenemos el ID, este enorme efecto en más adelante, una vez que tengamos el ID, tenemos el ID. Eso significa que los usuarios actualizan el bloque existente. En ese caso, lo que quería hacer, quería establecer el modo de edición a prueba. Queríamos buscar el único blog basado en el ID. Para que así podamos poblar el valor en cada campo de entrada respectivo. Bloque único. Entonces esta función vamos a redefinir, conseguir bloque más delgado. Y aquí vamos a pasar el DNI. De lo contrario marcado. Tenemos que hacer modelado con una falsa obviamente. Valor firme también va a ajustarse. Será como estado inicial. Ahora vamos a definir esto consigue blog singular para enfrentar el único blog basado en el único ID del blog. Y será la cosa porque vamos a hacer una lista periódica. Vamos a conseguir un solo bloque. Vamos a conseguir, conseguiremos un solo bloque en objeto solamente. Cs dot get. Aquí. Podemos simplemente copiar esto a usted que tenemos en nuestro mango presentar. Podemos pegarlo aquí. Y después de esto, básicamente podemos establecer valor. Será solo datos de punto de blob. Entrémonos en el navegador. Ahora se puede ver que somos capaces de poblar todo el valor adjetivo en él. Vamos productivo y portafolio para este ID de blog. También puedes hacer una pequeña modificación aquí así que en caso de que la API se llene, por lo que un solo blog dot status, Two 100. Entonces solo querías establecer el valor del formulario. Simplemente puedes resolver esa notificación al usuario. Como si algo saliera mal. Ahora, será un veredicto en lo que está. Puedes ir a la página de inicio. Ahora vamos a hacer click en este icono de Editar. Ahora se puede ver que somos capaces de poblar el cada valor en su campo de entrada respectivo. Ahora tenemos que restringir esta carga, archivar GitHub, actualizando el blog existente. Grabarlo no es posible con el archivo de tipo de entrada. Y tenemos que cambiar este rubro. Ahora, agrego un bloque para actualizar vlog. El botón será el también GitHub en él de add to update. Hagamos todos estos cambios. Entonces actualizaremos el bloque existente. En el interior regreso. Podemos determinar si no lo había hecho más de lo que será el bloque de actualización. Será el botón Agregar. Además, podemos hacer lo mismo como si estamos en un poco más, ese usuario está operando el blog existente, lo contrario que está agregando el nuevo bloque. Y después de eso, lo que tenemos que hacer, tenemos que restringir esto subiendo el archivo de imagen. Aquí. Podemos comprobar como si no estamos en modo de edición ese mes usted, es que cuando lo usas está agregando un nuevo bloque. Entonces en ese caso, quería mostrar esto. Vamos a cortar éste, pegarlo aquí. Aquí puedes usar, creo fragmento. Vamos a cortar o menos cosa para aparecer. Ahora vamos a entrar en el navegador. Ahora puedes ver que en GitHub actualizando blogs, no puedes actualizar la imagen. Por lo que sólo se puede actualizar el título, descripción y categoría. El valor del botón también se cambió y el encabezado también consiguió cambio. Ahora vamos a hacer click en este Agregar bloques. Estamos obteniendo este archivo de entrada, subir la imagen. Esto está funcionando. Continuemos trabajando en nuestra actualización del blog existente. Tenemos que trabajar ahora en manejado algo. Entonces en el mango presentar, lo que tenemos que hacer. Tenemos que determinar si estamos en modo de edición o no. Entonces si no estás en modo de edición que cuando el usuario está agregando un nuevo bloque, podemos cortar todo este pedazo de código y podemos pegarlo aquí. Y esto también se le recortará parte. Básicamente vamos a actualizar nuestro blog de rechazo. Aún así. Sólo podemos copiar éste. Aquí. No vamos a pasar estos datos un día. Será aplicable por solo agregar el nuevo bloque. Aquí solo podemos pasar nuestro valor de formulario porque el valor del formulario ya contendrá correos electrónicos, título, descripción, categoría, hizo todas estas cosas. También tenemos que determinar si estamos en modo de edición o no. Por lo que la validación de imágenes solo se cuidará en GitHub añadiendo el nuevo bloque. Por lo que tenemos que ajustar también este. Entonces contras, validación de imagen. Si estás tomando como si no estás en modo de edición, que tenemos que hacer una validación de la imagen. Ya sea subido o no. Será la fila. Eso significa que no estamos haciendo una validación de imagen en caso de actualizar el blog existente. Aquí vamos a actualizar el blog basado en el ID. Entonces aquí voy a usar vector. Y voy a actualizar un blog basado en el ID. Aquí estoy pasando formado por la regresión será el status. Estamos consiguiendo 200 y levantamos un edificio el blog adjetivo. Y el mensaje se obtendrá del bloque relacionado con el blog actualizado con éxito. En ambas puertas como agregar el nuevo bloque Albert interjecting blog. Queríamos, queríamos despejar campo de entrada de calor. Y después de eso, quería navegar hacia la página de inicio. Veamos si son capaces de actualizar el blog existente o no. Así que vamos a entrar en el navegador. Más rápido. Vamos a la página de inicio. Demos clic en el ícono Editar. Actualicemos el título. Blog de alimentos actualizado. Demos clic en Actualizar. Ahora se puede ver que tenemos nuestra notificación que está diciendo ahí, bloque actualizado con éxito y tenemos nuestro apretado y nuestro título se actualizó de bloque de código a woodblock actualizado. También tenemos realizar la operación de actualización. 16. Página de detalles de los blog: Ahora lo siguiente vamos a trabajar en nuestra página de un solo bloque, por lo que debe hacer click en Modo de lectura. Entonces serás éticamente navegar hacia el bit de un solo bloque donde podrás leer más sobre este blog en particular. Ahora, vamos a trabajar en esta sola página de blog. Es decir, trabajemos en esta pasta de bloque de singlet. Por lo que voy a entrar a mi VS Code it para traer algún componente de nuestro bootstrap de diseño de materiales. De un derivado N bootstrap, necesitamos traer un componente. Voy a escoger todos esos componentes aquí. Este componente es necesario en este archivo. Problema Material Diseño, mueva viaje. Y también necesitamos aquí usar enlace paramétrico de nuestra cúpula reaccionada después de porque vamos a mostrar el único detalle del blog con la ayuda de ID. Necesitamos usar param. Traamos también el enlace. Después de eso. Vamos a traer x aquí. X aquí es porque vamos a hacer solicitud de API y dejarles traer nuestro componente por lotes también aquí. Ahora, tenemos que traer también ganchos, donde acabas de usar efecto. Definir un estado, establecer blog. Tenemos que definir esto como tercero aquí. Que sea con lástima. Y después de eso, necesitamos, tenemos que esperar para agarrar el ID que viene aquí en URL. Este ID, necesitamos ese propósito. Yo he traido eso, usa params. Hemos añadido aquí. Ahora, lo que tenemos que hacer, podemos escribir un efecto estadounidense. Este usuario solo se ejecutará una vez que tengamos ID en la URL. Aquí, podemos comprobar que tenemos el ID, luego el bloque único. Esta función voy a definir ahora, bloque único. Esta será la idea de ello. Hagámoslo una cosa. Porque Sevilla, porque vamos a estar haciendo una solicitud API, la respuesta es igual a x naught post. Y aquí voy a copiar la URL de nuestro archivo de bloque agregado. De acuerdo, así que vamos a copiar este. Ven al archivo blog.js y péguelo aquí. Después de eso. Lo que tenemos que hacer, por lo que obtendrá la respuesta en un solo objeto porque estamos buscando el único objeto basado en el ID. Aquí. Podemos hacer set, blog y datos de puntos de respuesta. Y aquí también se puede hacer una cosa más. Si el estado de punto de respuesta. Si conseguimos 200, esta solicitud será la buena no post. Porque estamos recuperando los datos de nuestro servidor JSON. En ese caso, sólo vamos a poner el bloque, abatiendo nuestros datos. Y podemos conseguir alguna notificación para usar eso. Algo salió mal. Podemos dar método como si algo saliera mal. Ahora después de eso, así que formateemos este. Ahora después de eso, tenemos que diseñar un estilo en cuatro por hora insignia dial in for. Aquí. Será pantalla en línea. Por qué estoy haciendo esto y porque habrá un diferente Este mosaico tenemos que proporcionar para nuestro componente por lotes en nuestro solo bloque porque estamos utilizando el mismo componente por lotes para nuestra página de inicio también como sola página de blog. Tenemos que abordar algún estilo. Entonces desde este componente, estoy pasando todo este estilo. Margen dejó cinco píxeles, va a ser correcto. Margen, arriba. Te voy a dar siete pixeles. Ahora, ¿qué tenemos que hacer aquí? Aquí podemos quitar toda esta cosa. Podemos usar aquí, contenedor MDB. Y dentro de esto los voy a pasar en el estilo de línea. Será como frontera, frontera alrededor de nuestro blog, un píxel. Entonces voy a dejar, voy a dar este color EB. Después de eso, te voy a dar un enlace porque vamos a tener un ir hacia atrás y link a él no me dejaría volver a la página de inicio. Aquí voy a usar etiqueta fuerte con el nombre de la clase, guión vacío tres. Y será como volver aquí también, voy a proporcionar baldosas. Te diré que te voy a dar un flotador. Se dejará. Te voy a dar un color negro tradicional. Ahora después de este enlace. ¿ Qué tenemos que hacer? Entonces topografía MDB. Aquí, voy a mostrar el título del blog. Blog. Tenemos que escribir como este blog, blog dot title. Recibirás un error. Veamos si somos capaces de mostrar esto en el título de bloque o no. Vamos al navegador. Conseguimos nuestro título de bloque, eso es para blog actualizado. Ahora tenemos que dar estilo a éste también. Topografía Mbb. Aquí, voy a dar etiqueta, nombre de clase. Voy a dar aquí será Bootcamp como neumonía o texto, silenciado, md, guión al estilo. Voy a dar alguna baldosa de idioma que será mostrar bloque en línea, bloque . Ahora vamos al navegador. Esto se ve bien. Ahora después de esta topografía MDB, lo que tenemos que hacer, así que voy a tener una imagen aquí, así que vamos a mostrar imagen después de nuestro título. Aquí. Están todos los tipos presentes en un bloque y es un solo objeto. Para que podamos escribir así, un blog, blog y blog dot image URL a mirar. Y podemos dar algún nombre de clase aquí como imagen fluida, redondeada. Ok. Te podemos dar L. Sólo podemos darle ese título. Así que vamos a copiar este. Pega aquí. Y podemos darle un azulejo a alguien. Esta etiqueta de imagen. El ancho será un 100% y la altura máxima será de 600 píxeles. Veamos cómo se ven nuestras imágenes. Luciendo bien. Ahora, volvamos al código VS. Después de esto. Voy a tener div. Voy a proporcionar algún margen de mosaico, arriba. Voy a proporcionar alguna parte superior de margen de asentamiento interior. Pasemos a los pixeles. Voy a tener un div más. Esta altura de azulejo, fondo de 43 píxeles. Puedo dar aquí F6, F6, F6. Y luego voy a usar MDB. Mbb. Voy a tener un estilo, por lo que será flotar, izquierda. Nombre de clase. Te voy a dar md guión tres icono. Voy a usar ícono aquí como Calendario, Árabe. Entonces básicamente estamos mostrando los datos. Blogs. icono del calendario estará ahí en vivo. Entonces te estoy dando energía. Después de eso. Vamos a tener una clavija fuerte en la que voy a ordenar el blog de datos, blog, blog. En tercer lugar, esto, voy a volver a proporcionar algunos alicatados. Voy a dar flotador margen izquierdo, arriba. Margen, superior será de 12 píxeles de margen izquierdo pixel. Después de esto, voy a usar nuestro mal componente. Ya he importado esa. Dentro de esto. Voy a proporcionar blog y blog categoría dot. Aquí tenemos que pasar nuestro estilo de azulejo Info. Información de azulejo. Podemos revisar éste. Parecía. Luciendo bien. Ahora debajo de esto voy a hacer Dale subir este contenido de bloque. Después de esta cama. Pongo esto en hacer vamos a tener tipografía MDB. Voy a usar tu nombre de clase, nombre de clase lead, md, guión. Aquí. Voy a dar blog. Blog. La descripción del punto la está fallando en correcta, por lo que será descripción. Entrémonos en el navegador. Desplázate hacia abajo. Ahora tenemos nuestra la descripción para este bloque. Hemos completado este solo bloque que también. 17. Mostrar el blog relacionado: Ahora tenemos que mostrar también los posts relacionados a esta categoría. Hagamos eso. Hasta ahora que voy a crear un par de blog. Voy a crear un bloque más como prueba para perros. Y yo voy a escoger el contenido aquí. Por lo que voy a seleccionar un archivo aquí. Entonces voy a seleccionar éste, esta vez. Método de Regard como imagen cargada con éxito. Vamos a seleccionar categoría como comida. Ahora vamos a añadir esto es conseguir aire. Y voy a sumar un bloque más con una categoría diferente. Entonces vamos a añadir ese también. Entonces voy a subir un pariente de sangre para tomar blog, voy a subir, vamos pegar la descripción, seleccionamos la imagen. Voy a usar esta. Ahora seleccionemos la categoría. Será etiquetada. Demos clic en. Los detalles también están llegando a. Ahora. Voy a soldar relacionado con esta categoría de bloque, eso es comida. Hasta el momento que también necesitamos hacer una llamada API más. Entonces hagamos eso 1. Primero. Lo que tenemos que hacer aquí, voy a encontrar uno que sea como relacionado, relacionado con el blog. Cualquier cosa que vayas a establecer post relacionado aquí. Por lo general se indica estará ahí y serán datos de entrada. Ahora después de eso, ¿qué tenemos que hacer? ¿ Mientras obtienes el solo bloque? Vamos a filtrar post relacionado también. Entonces costo relacionado post. Aquí. Podemos darle como relativo para los datos, ¿de acuerdo? No hará ninguna confusión. Mano todavía. Se puede hacer como esperar. X aquí no es bueno. Sólo podemos usar esta URL. Y en lugar de usar RD, vamos a usar punto de respuesta de luz, categoría de puntos de datos de punto. Esta respuesta a particular que contiene un solo objeto en el que tendremos descripción del título, URL de imagen de categoría. Podemos acceder a la categoría luz de esta manera. Y haremos otro líquido ABI con Italia encajar todo el tablero relacionado con la categoría Ford. Entonces básicamente aquí se enfrentará a los ambos poemas que tenemos en nuestra página de inicio. Aquí puedes ver que tenemos un blog relacionado con la categoría de comida. Y si haces clic en el modo Leer, así que aquí, básicamente estás haciendo una solicitud de API para obtener el único blog. Y al mismo tiempo también estamos haciendo las solicitudes API para obtener lo relacionado tanto con esa categoría de alimentos. Pero típicamente va a llenar el blog de la junta. Qué podemos hacer aquí, post relacionado aquí si podemos hacer como datos relacionados, datos de puntos. Ahora en el puerto relacionado tenemos dos, por lo que sólo un blog. No queremos que muestre bloque, así que leamos éste. Algo no está funcionando, ¿verdad? No está funcionando. Necesitamos hacer un año o condición. Y también podemos tomar tarde relacionados ambos datos. Dot es theta 200. Entonces podemos establecer eso. Vamos al navegador. Refresca éste. Entonces no vamos a conseguir nada. Por lo que será categoría. Estamos haciendo un pequeño error aquí. Categoría se llama hacer así. Entonces solo obtendrás tu blog relacionado con, relacionado con esta cuarta categoría. Y sólo queríamos ordenar tres blog en la cuarta área relacionada con la cabeza, podemos usar el ampersand empezar ir a 0% n es igual a tres. Sólo llenaremos las tres partes relacionadas con esa categoría en particular. Ahora, vamos al navegador. Está funcionando como se esperaba. Ahora vamos a mostrar los relacionados ambos a continuación lo que tenemos que comprobar. Si se elige y longitud de punto mayor que 0. Entonces sólo tenemos dos post relacionado. Aquí. Voy a usar la etiqueta H1. Será como el encabezado de post relacionado. Voy a pegarlos Theta h estrechamente relacionado con esta etiqueta dentro de este index dot estilo de archivo CSS. Voy a darle la vuelta aquí por una etiqueta. Puedes copiar todo este estilo haciendo una pausa de este video. Espero que tengan copia todo esto que alicatado. Si vas al navegador, no reflejando nuestros cambios. Guardemos este archivo. No hemos guardado este archivo. Vamos al navegador. Y ahora aquí puedes iniciarlo. Conseguimos nuestro rumbo portuario relacionado. Pero cuando esta línea horizontal, después de eso, tenemos que mostrar post relacionado. Sin embargo voy a usar la fila MDB con el nombre de la clase. Entonces voy a usar la fila de nombre de clase. Llama, divertido uno. Después sorteo llamadas D tres, D cuatro. Aquí. Vamos a usar fragmento. De lo contrario, seguiremos recibiendo este error. Dejar cortar este. Y aquí vamos a tener nuestro borrado ambos mapa de puertos. Podemos tener índice de artículos. Podemos usar aquí la llamada MDB a eso, que podamos usar. Mbb puede usar su enlace. Aquí. Lo que tenemos que hacer desde aquí también, nunca se puede ir a una sola base de blob. Entonces te estoy especificando que ya. Sí. Por lo que aquí podemos darle ID item dot ID debajo de este link que puedo usar MDB, imagen de tarjeta MDB. Podemos tener fuente, elemento dot imagen, URL. Podemos darle un término como título de punto, posición. Vamos a dar tope. Al hacer clic en el correo electrónico. Nunca llegarás hacia la sola cuadra. Pero sólo podemos tener algún contenido cuerpo de la tarjeta IMDB. Dentro de eso puedo usar el título de la tarjeta MDB, como título de punto de elemento. Entonces puedes tener tarjeta MDB. Este será el texto con el texto. Y aquí podemos usar descripción. Aquí de nuevo, voy a usar x. traeremos ese método home dot js file, etcétera necesitamos aquí. Y vamos a copiar esta lógica. Deja que nada vaya a la página del blog. Vamos al navegador. Por lo que ahora se puede ver que estamos consiguiendo nuestros relacionados, o usted tiene podría notar que también estamos recibiendo este blog. Debajo de esto relacionado no lo queremos, este blog aquí porque ya estamos en esta cara. No queremos que muestre este blog bajo los relacionados ambos. Lo que podemos hacer aquí. Podemos crear extracto. Vamos a darte un cautivo. Vamos al navegador. Podemos dar seguridad alrededor. Eso será bueno. Ok. No queremos que muestre este blog bajo lo relacionado porque ya estamos en este blog. ¿Qué podemos hacer? Podemos aplicar un filtro. Después de esto. Podemos usar filtro. Podemos llevar aquí ítem, ítem dot ID. Si no se cumple, entonces queríamos. Entonces no se cumple todo ese ID del blog. Se filtrará automáticamente ese blog. Se puede ver que ahora no podemos ver ese blog. Hemos filtrado. Y si vas a homepage, si haces click en ésta, lee más. Ahora, aquí no tenemos relacionado para, así que no queremos que muestre este rumbo adulto. Si no tienes ningún puerto relacionado a esta categoría, toma si no tienes ningún blog relacionado con esta etiqueta de categoría, entonces, entonces esta ABA siempre devolverá el área única de objeto. Podemos escribir una lógica aquí. Cortemos este, cortemos esta parte. Podemos comprobar de nuevo si se relaciona para la longitud del punto mayor a uno. Eso significa que tenemos más blog relacionado con esa categoría. Entonces en ese caso, queríamos mostrar esos bloqueos bajo los posts relacionados. Aquí, puedes dar como un post relacionado. Vamos al navegador. Ahora se puede ver que no somos capaces de ese rumbo porque, porque no tenemos ningún blog relacionado con esta categoría. Y si vas a la página de inicio, si haces click en esto, esto está funcionando como se esperaba. Estamos obteniendo un punto relacionado para esta categoría de alimentos. Y si haces click en este bloque, navegarás a este solo bloque de pago que es el blog de Ford actualizado. Ahora estás en la actualización de blog de comida. Se puede ver el título aquí. También puedes cambiar entre este blog a través de esta manera. Esto está funcionando ahora. Hemos completado esta funcionalidad también en nuestra sola página de blog. 18. Búsqueda de un blog: Ahora tenemos que trabajar en nuestra estrategia. Componentes. El usuario también puede iniciarlo blob. Hagamos eso. Una parte que voy a crear un archivo bajo el componente. Esa será la búsqueda. Sí. Está en un poco. Para traer componente de botón de nuestro material entonces ambos viaje. Vamos a traer ese video MDB. Vamos a recibir algunas gotas del componente casero. Eso será ligero. Valor en entrada, cambio, valor de estado en la cadena de entrada. Estos tres impulsos, si vamos a recibir de nuestro tercer componente. Aquí, vamos a tener div con el nombre de clase. Y después de eso voy a usar componente de formulario. No necesitamos acción. Podemos dar un nombre de clase como d hyphen flex. Podemos tener en algún MIT. Mit, podemos darle manejar ventas, que vamos a obtener de este formulario. Vamos a tener una entrada con un nombre de clase será el control del formulario. Por favor ordene podemos darle un primer blog. Podemos tener valores. Voy a escoger este valor, que estaremos manteniendo componente padre que es hogar. Vamos a formatear este. Ahora vamos a tener en el cambio. Voy a usar este método todavía en cambio de entrada, voy a tener un botón La mediana de MDB será la tercera, será la Primaria. Primaria. No necesitamos especificar el color. Ahí, estará en algún lugar. Ahora, voy a escoger el estilo para esta clase en el archivo CSS index dot. Voy a apostar que el estilo para ese nombre de clase, que es formulario de búsqueda. Este golpe diciéndole que dé nombre satisfactorio de clase. Ahora vamos al archivo home dot js. Vamos a mostrar nuestra entrada táctil aquí. Vamos a traer ese componente satisfacer. Ahora vamos al navegador. Luciendo bien. Ahora, tenemos que trabajar en este prop que estamos pasando a nuestro tercer componente, la moda. Voy a definir un portafolio estatal 13. Fijemos su valor. Set. El valor utiliza tercer método en belleza. Y aquí tenemos valor de longitud preespecificado. Sólo quedará satisfecho. Luego y pon diez. Entonces, ¿qué año a definir? Contamos con maneja enfermedad de servicio también. ¿ También necesita definir la entrada? Entrada, cambio. Recibirá un evento. Podemos detectar conjunto de piernas, es decir valor punto, valor de punto. Después de eso, el camino es uno. Definir un manejador. Te dije que pensaras. ¿ Previene el incumplimiento? Prevenir el defecto. El predeterminado ser capaz de navegador. Vamos a hacer una solicitud, sí, así que const bonos y sólo puedo copiar éste. requiere menor determinante de a. Así que vamos a copiar este. Nivel de usuario. Me movería toda esta cosa minuto a camino. Y sin embargo tenemos que pasar la cola. Si conseguimos el estado de respuesta con 200, entonces terminamos. Entonces vamos a establecer los datos. Establecer datos. Vamos a utilizar los segundos datos, datos de respuesta. Entonces no usé como si algo saliera mal. De acuerdo, vamos a copiar este. Vamos a usarlo aquí. Ahora. Vamos al navegador. Tenemos algunos desaparecidos aquí. Tenemos que proporcionar aquí un poco. Esto también recibirá un evento. Ahora, vamos al navegador. El Fed es uno. Ahora vamos a poner el bloque para que no estamos recibiendo marca cruzada aquí literalmente en nuestra entrada primero. Entonces, lo que podemos hacer, podemos darle un tercero eternamente. Ahora vamos a entrar en el navegador. Refresca éste. Ahora empecemos con dictar de nuevo. Estamos consiguiendo éste y si haces click en esta cruz, se aclarará. Entonces una vez que se borre, entonces queremos que cargue todos los datos que tenemos en nuestro servidor JSON. Eso lo que podemos hacer, vamos al Código VS. Y aquí lo que tenemos que hacer, podemos comprobar si no tienes valor. Entonces E dot target dot dot valor. En ese caso queríamos simplemente cargar o datos de Lovelock. Ahora veamos, esto está funcionando o no. Así que vamos a configurarlo con esta vez así. Entonces estamos consiguiendo este bloque que está relacionado con sabroso. Y si haces click en esto, cross, se borrará y vamos a conseguir nuestro bloque hacia abajo y el servidor de turnos está funcionando. 19. Mostrar la categoría Blog de la categoría: Ahora, lo siguiente que quería básicamente conseguir el blog donde conducta categoría. Quiero una categoría por aquí. Hagamos eso. Voy a crear un archivo y head es componente para esa categoría. Dot js. Vamos a centrar no es un poco. Y esto fue básicamente recibir algunas indicaciones de nuestra página de inicio. Así maneja la categoría uno sobre t de n opciones de Material Design reservado en él para traer algún componente de MDB que te gustaría. Para traer MDB, MDB, grupo de lista, MDB, levantar elemento de grupo. Aquí en lugar de div, vamos a tener tarjeta MDB con algún estilo de aprendizaje. El estilo, te voy a dar un poco de margen de rampa de tinte. Voy a dar tipic cell aquí y voy a tener etiquetas, categorías. Y luego voy a usar el grupo de lista MDB. Voy a pasar una felpa. Ir al mapa son toda opción. Opción mapa de puntos. Vamos a conseguir artículo. Después de esto, vamos a tener nuestro ítem de grupo MDB LET en que vamos a mostrar toda la categoría. Podemos darle un artículo. Vamos a proporcionar el estilo de índice clave. Démosle crédito, señor. Onclick. Onclick. Onclick. Voy a usar este método que se maneja categoría. Y voy a pasar el artículo. Aquí tenemos éste. Entonces vamos a quitar este. Granjero éste. Ahora, vamos al archivo home dot js. Aquí. Cuando tomó parte la opción. Ya hemos definido aquí. Vamos a copiar este. Vámonos al archivo de casa dot js. Aquí. Podemos utilizar este componente de categoría aquí y debajo de esta columna. Oh, podemos tener una columna más. Con la talla tres. Aquí podemos usar componente de categoría, mira cada código automáticamente componente importante. Y aquí podemos pasar nuestras opciones que hemos definido. Un estado enorme. Se puede ver eso aquí. El componente Crawdaddy se importa automáticamente desde VS Code. Primero vayamos al navegador. Se puede ver que tenemos nuestra categoría. ¿ De acuerdo? Esta categoría será fatalmente bajar con, porque aquí vamos a tener nuestro cuarto componente. Marquemos en este componente categorías. Queríamos conseguir el puerto basado en la diferente categoría. Lo siguiente que podemos hacer aquí es que necesitamos definir un método. Aquí. Estamos pasando éste también, manejar categoría. Definamos éste. Tercios es retorno. Podría ser cualquier cosa. Aquí. Podemos hacer una llamada API, así llamada respuesta. Ya hemos utilizado esta API relacionada con categorías. Así que vayamos al archivo blog.js y podemos usar éste. Vamos a copiar esto. Pega por aquí. Vamos a la tarea. Sí. Voy a usar un raro x ts aquí. Veamos que se mueven toda esta cosa. Y vamos a recibir un componente de categoría categoría. Podemos empacar categoría aquí. Ahora aquí, no marcamos estado de punto de respuesta 100. Entonces vamos a establecer los datos, establecer delta bonds dot data. Vamos a resolver los mismos métodos como que algo salió mal. Algo fue algo. Ahora, veamos si está funcionando o no. Ahora, vamos a conseguir el bloque basado en la categoría. Por lo que estamos consiguiendo sólo blog de comida. Si haces click en, estamos obteniendo sólo blog de tecnología. Ahora lo que voy a hacer, así que cinco, voy a añadir un poco más de blog aquí para que podamos implementar la funcionalidad, como dejar que vierta esa vasodilatación. Por lo que tenemos que añadir un poco más de blog todavía. También trabajando. Y se puede ver que tenemos al amigo del color por hora. Hemos creado en general seis bloques. Agreguemos un bloque más. En el circuito. 20. Mostrar el blog reciente del blog: Ahora lo siguiente que queríamos mostrar el bloque que aparece en nuestra aplicación. Siempre que el usuario añada un nuevo bloque. Por lo que aparecerá este lado y sólo vamos a mostrar sólo para, vamos Bloc creado por el usuario. Porque después vamos a tener una paginación. Entonces durante la paginación, solo se mostrarán cinco blogs. Eso será mostrar la orden. No podrás ver el gran blog. Y para que Theta gran bloque, tenemos que tomar básicamente la página Hale-Bopp en esencia. También puedes hacer con esa paginación si querías ir al blog. Pero Last block también podemos mostrar aquí en nuestro componente de bloque. Entonces vamos a implementar esa. Vamos al código VS. Voy a tener luz competente. Blog dot js. En primer lugar, menos que género es en un poco. Aquí. Tenemos que traer componente. Soy DVD accionado desde MDB. Rechazar el subproceso de la interfaz de usuario cuando TI traiga algún componente relacionado con tarjeta, MDB , fila MDB, columna MDB, cuerpo de la tarjeta MDB. También queríamos bajar el enlace de importación del Dr.. Tenemos que traer ese vínculo. Aquí. Vamos a recibir imagen proxy. Agregó la categoría de identificación de mareas. Después de eso, voy a usar link. También queríamos navegar hacia el bloque cantante pagado basado en el ID. Soy nuestra sección de blog, blog. Y tenemos ID de falla de Fitbits. Después de eso, voy a usar componentes de tarjeta, por lo que la tarjeta MDB. Voy a usarlos en el estilo de línea aquí. Max verte. Te voy a dar 300 pixel. Voy a dar aquí un típico que te voy a dar un nombre de clase bootstrap que estará vacío. Pasan a eso como mercadotecnia. Después de eso, voy a usar la fila MDB con el platino G 0. Voy a ser utilizado aquí columna MDB. Te voy a dar un MD. Y aquí voy a usar imagen de guardia MDB. Aquí. Voy a dar fuente que inmediatamente se hereda. Podemos usar el título. Podemos darle un nombre de clase, podemos darle un redondeado para hacer la imagen alrededor. Podemos dar un poco de estilo en línea aquí también. Demos la altura. Representa a un solitario. ¿ De acuerdo? Después de esta MDB, columna MDB, podemos dar a MD nueve. Podemos utilizar aquí cartón MDB, en el que puedo tener una etiqueta p con el nombre de clase. Entonces vamos a titularnos. Vamos a titularnos. Y será como título solamente, que estamos obteniendo de nuestra página de inicio. Estamos predefinidos el alicatado. Pero esta clase tal vez en nuestro índice dot archivo CSS. Vamos al archivo CSS de punto índice. Voy a lanzar un poco de estilo por aquí. Voy a dar este alicatado. Después de eso. Vamos al archivo home dot js. Lo que podemos hacer. Entonces primero voy a definir aquí un estado. Cuál será el pegamento que sostiene el último blog. Blog. Dejemos caer aquí. En tercer lugar, use vector. Podemos tener infuncional como fetch latest, blog. Ahora tenemos que definir esta función. Vamos a definir solamente. Vamos, vamos a bloguear esto un poco de una cosa. Aquí. Literalmente lo que queríamos hacer, queríamos terminar el último disco de cuatro. Queríamos crear un estado API, ya sea que se ajuste a toda su luz para los blogs. Siempre que el usuario agregue un nuevo bloque, se ajustará a la luz para el blog que vamos a mostrar aquí. De acuerdo, hasta ahora que tenemos que hacer básicamente algún ajuste en nuestro servidor APA. Entonces primero necesitamos el bloque total. Bloque total como podemos conseguir sólo podemos copiar éste. Esto es el responsable de conseguir el blog del portal. Ahora, elevamos con Feather star ten y empezamos como portal blog dot data, dot length menos cuatro será nada pero será la longitud total del punto del blog solamente. Tenemos que especificar ancho y datos. Ahora tenemos nuestro inicio y fin. Tenemos que escribir respuestas API. Así que de nuevo, vamos a usar este solamente. Pero esta vez vamos a modificar esta API. Entonces voy a usar tu espalda. Después de eso. Voy a empezar y empezar. El mismo concepto que vamos a utilizar para nuestras necesidades de pacientes. Y también. Vamos a especificar su fin también y valor. Pongamos aquí dólar. Ahora. Sólo podemos copiar éste. Podemos simplemente dividirlo aquí. Queríamos establecer estos datos en un blog. Ahora bien, esto vamos a ver qué está recibiendo. Recibir IV es ID de URL y categorías. Por lo que categoría no necesitamos aquí. Entonces vamos a quitar este. Vamos al archivo home dot js. Y después de esto, lo que tenemos que hacer, bajemos. En tercer lugar, esta etiqueta de columna. Vamos a tener R, Tomemos nuestro blog. Va a usar como para etiqueta. Y será la última clase de post. Entonces te voy a dar un texto. Para empezar. Aquí. Podemos tener luz. Vamos, tapemos mapa de puntos. Voy a tener un índice. Aquí. Puedo sacar, vamos a trazar componente, la Guerra de Vietnam componente automáticamente importante. Aquí podemos usar clave. Aquí sólo podemos extendernos son todo artículo. Podemos estructurar D en nuestro componente de bloque de esta manera. Por lo que aquí solo necesitamos imagen, URL, el título y el ID. También puedes, también puedes cavar textura, otra categoría y esta categoría y descripción, pero para este post no se requiere. Entrémonos en el navegador. Ahora aquí se puede ver que tenemos nuestro vamos a publicar. ¿ De acuerdo? Y si haces click en éste, éste también, puedes navegar hacia un solo bloque. Esto está funcionando parece que hemos implementado el widget también en nuestra aplicación. 21. Paginar - Parte 1: Por lo que el último rasgo es la pierna izquierda. Implementar la paginación. En la paginación, queríamos mostrar sólo el blog cinco, pero veamos cómo vamos a implementar este. Vamos al Código VS. Cinco. Voy a crear un componente en el componente de hoy para eso se origina la paginación y dot js. Dejemos aquí un fragmento para paginación. Aquí la ventana para traer algún componente de nuestro activo pude implementar la paginación desde MDB, MDB, MDB, MDB, Basie, link nación, y MDB butene. Podemos hacer algún prof que vamos a recibir de nuestro componente padre. Es decir, recibirá el límite de página actual. Entonces no puede recibir un delta de bloques de carga, ¿de acuerdo? Datos y blog total. Aquí. Voy a definir una función y que este render. Voy a comprobar como si tenemos la página actual que está en 0, entonces tenemos el botón Siguiente para navegar hacia la página diferente. Aquí. Voy a escribir como página IMDB. Va a tener un centro. Voy a usar mb guión 0. Vamos a tener ítem de paginación MDB. Entonces enlace de paginación MDB. Vamos a quitar este extra. Estará a continuación. Aquí, será uno. Ahora, vamos a tener un elemento más de paginación. Vamos a bombear. Dentro de eso. Vamos a tener nuestro botón. Dentro de esto. Vamos a tener nuestro botón aquí. Voy a usar el botón MDB y btn será redondeado. Voy a tener onclick. Onclick. Estos serán los datos de bloques de cargas. El valor de nuestro botón será el siguiente. Ahora, tenemos que revisar una condición como si él-si vamos a revisar una condición como actualmente límite de periodo latente menos un límite de longitud de punto delta . Quería, por lo que el botón de conferencia anterior, por lo que ambos botón quería mostrar. En ese caso, sólo podemos copiar éste. Sólo podemos tomar el control aquí. Aquí tenemos que hacer algún ajuste. Aquí, el valor volverá a ser. ¿ De acuerdo? Aquí estoy MDB enlace de paginación no es necesario. Así que primero vamos a mover este. Aquí. También necesitamos aumentar la página para que podamos recortar esto y podemos usar aquí desde aquí también. No necesitamos enlace de paginación de página, así que eliminemos este. Aquí. Cualquiera que sea el pago actual estará ahí, obtendrá ingrediente. Y el valor del botón será el anterior. De nuevo, vamos a tener uno más. Elemento de acción de paginación. Sólo voy a copiar este. Voy a pegarlo debajo de este botón de paginación. Nos acercaremos aquí. Vamos a copiar este. Voy a cortar este por aquí. Esta regeneración. Pero entonces y este ítem de paginación. Nos acercaremos aquí para que podamos quitar éste. Aquí, estará ahí. Y creo que eso es todo. Y vamos a tener otra condición en la que haya alcance a la gran rejilla. Entonces en ese caso quería mostrar el número de página y el botón anterior. Por lo que sólo podemos copiar esto una cosa entera otra vez. Antes de copiar, tenemos que poner a cambio, lo contrario no será vertical. Entonces vamos a copiar todo esto y ponerlo a cambio. Ahora dentro de esto más, queríamos ordenar el botón anterior junto con ese número de página. Podemos copiar este. Podemos pagar dos niveles será paciente IMDB. Por lo que necesitamos proporcionar ese soporte de cierre cuando TI para proporcionar esa etiqueta de cierre. Y también tenemos que poner en Thaddeus regreso, lo contrario no se mostrará a usted. Vamos a copiar. Vamos a cortar este. Simplemente podemos hacer renderizado paginación. En octubre con la generación P. Tenemos que hacer algún ajuste en nuestra APA existente. Queríamos ordenar el blog cinco por página. De acuerdo, entonces a partir de aquí vamos a proporcionarles valor predeterminado 05. Esto es n y este detalle en mayor valor de grado. Por defecto, estamos recuperando los cinco bloques por página en la página de inicio. Ahora no podemos usarlo así. Entonces tenemos que hacer como diferir. Podemos aportar nuestro valor inicial y final. Aquí va a ser el final. Estamos recibiendo mientras este valor desde aquí, 0 e incrementamos. ¿ De acuerdo? Después de esto, lo que tenemos que hacer, tenemos que hacer actual, ¿de acuerdo? Tenemos que definir primero este tercer escenario lejano. El actual será la página actual. Esta será la g. Vamos a tener sin supervisión para el límite de páginas. Límite. Queríamos mostrar los cinco bloques por página. Y también vamos a tener un estado más estableciendo la longitud total del bloque. De acuerdo, así que pongamos éste. Este será blog total. Blog. Esto podría ser nulo inicialmente. Ahora, tenemos que establecer la página actual. Podemos darle unos bits actuales más aumento. Ahora, primero vayamos al navegador. Ahora se puede ver que somos capaces de ver sólo cinco cuadra, pero paga. Ahora tenemos que trabajar en nuestra paginación. Entonces cualquier cosa que ya hayamos creado. Ahora lo que podemos hacer aquí, tan rápido, vamos a la parte escrita. Después de la columna db. Md Bureau, vamos a tener un div más con el nombre de clase guión vacío tres. Y en cambio esta clase, ahora, vamos a traer la paginación. Veamos. Negocios y se está mostrando o no, conseguimos el negocio y luego actualmente no estamos aportando ningún valor. Entonces, proporcionemos esos valor. Página actual carga bloques, datos, carga y bloques y datos. Tienes que proveer. Entonces limite los datos también necesitamos proporcionar nos llaman para proporcionar la red total de bloques. Sin embargo, cuánta sangre tenemos en nuestro archivo db.json, ¿es eso lo que podemos hacer? Entonces aquí estamos consiguiendo están todas las cuadras. Por lo que aquí podemos decir el blog total. Aquí podemos escuchar, podemos hacer datos totales de puntos de blog, longitud de punto. Esta función siempre la ejecutará porque hemos puesto dentro de este efecto de uso de esta manera. Pero ojalá podamos obtener la longitud del blog de trimestre que tenemos en nuestro archivo db.json. Ahora podemos pasar éste también. Total blog. Entonces vamos al navegador, refrescarlo. Ahora este natural no funcionará como se esperaba porque tenemos que hacer algún ajuste también. En nuestro componente de paginación. Vamos al componente de paginación. Aquí lo que tenemos que hacer, tenemos que volver a aportar algún valor predeterminado de este bloque de carga theta porque esta API consiguió modificar aquí, se puede ver que tenemos que proporcionarlo en 3D. Por este escenario. Tenemos que pasar la siguiente cuadra cinco. Nos vamos a conseguir haciendo clic en el botón Siguiente. Y vamos a aumentar el pH. Por este escenario. Tenemos que pasar por este camino. Aquí con feo, vamos hacia atrás. Por lo que aquí podemos dar Página Actual menos 15. Tenemos dos caminos como este, puja actual y B25. Estamos yendo hacia atrás, así que tenemos que hacer en decremento. Entonces tenemos que hacer un decremento menos uno. Ahora aquí, lo que tenemos que proporcionar, así que vamos a copiar éste. Pega aquí. Aquí típicamente vamos de nuevo. Siguiente. Tenemos un poco más de blog. Aquí lo que podemos hacer. Entonces vamos a quitar este extra rápido, y aquí será el actual más uno en cinco más para poner este en el soporte también. Y haz cinco. Y esta vez tenemos haciendo por este escenario o este escenario que podemos hacer, podemos pasar esto en pegamento porque va a funcionar de la misma manera. Ahora, vamos al navegador. Por éste. Tenemos la página uno y tenemos el botón Next. Y tenemos guardia página h2. Y no tenemos más blog. Estamos llegando aquí botón anterior y tenemos que blog todavía, está bien. 22. Paginar - Parte 2: Y tenemos que hacer también algunos objetos más en este componente de paginación. Entonces aquí estamos tomando como si no tuviera página actual, eso es 0 y la longitud de los datos es menor a tres, es menos de cinco, entonces no queremos que lo haga. Entonces los componentes de visualización ponen, vamos a poner un soporte más porque vamos a tener un motor, nuestra condición, nuestro engaño, la única condición, eso significa que si estamos en periodo actual, que es de 5 bits, tenemos el blog alargar archivo. Entonces en ese caso, no lo quiero al componente de paginación. Y para la segunda condición, lo que vamos a cambiar. Entonces estamos consiguiendo blog del portal, así blog total, pero no hicieron nada pero está ahí va la longitud de bloque que tenemos en nuestro archivo db.json. Entonces por el momento tenemos siete cuadras. Se puede ver que por cuadra en este espacio y para bloquear. Y luego a continuación, tenemos el blog de Steven. Podemos comprobar si el blog total es menor a d dt limit, lo siento, blog es igual al límite. Eso significa lo que estoy tratando de hacer aquí. Entonces supongamos que sólo tenemos cinco blogs en nuestro archivo db.json. Entonces en ese caso también, no quiero que ordene la página en cierto sentido porque si haces click en Siguiente, obtendrás un espacio en blanco. En ese caso también, quería evitar soldar componente de vasodilatación. Por eso estoy tomando este escenario. A medida que nos acercamos a nuestro tema, estamos tomando más de 5 bits solamente, no otra base. En ese caso, sólo quería hacerlo. Ninguno. Vamos a un navegador. No lo cambias aquí hasta que elimines cualquier blog. Ejemplo, si elimino los dos bloques, y si elimino éste, el blogger se borra. Pero estamos consiguiendo algún tema. Por qué estamos recibiendo este tema porque diluyendo los datos de nuestro archivo home dot js. También estamos creando el blog con esta carga lo bloqueó y decir Aquí también tenemos que pasar el argumento. Entonces, ¿qué tenemos que hacer? Entonces vamos a proporcionar, de nuevo valor predeterminado. Por lo que queríamos comenzar desde 5050 y también tenemos que proporcionar aún una operaciones adicionales más como delete. ¿ De acuerdo? Entonces con la ayuda de este argumento, vamos a establecer el camino actual hacia el valor inicial. Entonces necesitamos éste. Vamos a la función de datos de bloque de cargas. Aquí. Lo que tenemos que hacer aquí con feo, podemos pasar el argumento operación Lago. Dentro de esto. Lo que tenemos que hacer. Entonces después de configurar estos datos, podemos comprobar, como si tienes la operación, Esto funcionará en caso Lynne. Voy a borrar. Eso se establece actual en 0. Ya aumentará el escenario base. Probemos éste y éste. Vayamos a la siguiente. Aquí solo tenemos una cuadra. Eliminemos éste. Ahora, nuestro blogging siendo borrado aquí. Tenemos sólo cinco cuadras. Esto no debería estar exhibiendo. Algo no se está actualizando correctamente porque el blog total es básicamente se utiliza aquí dentro de este Fitch, este blog. Tenemos que usar esta lógica aquí realidad no encajan en el bloque de texto. Tenemos que hacer esta lógica aquí. Tenemos que alterar tu DCPA aquí. Obteniendo la longitud total del bloque. Voy a añadir un par de blog en esta aplicación. Entonces chicos, he sumado dos bloques más antes de volver a realizar una operación de eliminación con la paginación. Demos clic en Siguiente. Se puede ver que también tenemos este escenario. Esta condición else-if también tenemos la tercera y tenemos un bloque más en la tercera píldora. Ahora, quería escribir una condición más en 30s LCF por si no te has bloqueado en el arte, entonces no quiero que muestre este soporte potencial anterior y siguiente. Lo que todo tenemos un bloque de diez en nuestro expediente db.json. En ese caso, no quiero que muestre esto en ambos botones que es Anterior y Siguiente. Quería mostrar un pequeño botón Previous. Por lo que necesitamos escribir una condición más. Entonces antes de realizar la operación de eliminación, vamos a escribir esa condición. Aquí. Lo que voy a tomar, portal blog menos theta dot length no es igual al límite de página. Entonces sólo se obtendrá la exhibición. De acuerdo, vamos a pelear. Entra en el navegador, refrescarlo. Demos clic en Siguiente. Tenemos esto bastante bueno porque tenemos más blog sobre el tema. Ahora vamos a eliminar éste. Haga clic. De acuerdo, Así blog borrado con éxito. Ahora estamos por debajo de cinco páginas. Ahora vamos a hacer click en Siguiente. Ahora aquí se puede ver que no tenemos ese botón siguiente porque, porque tenemos un bloque de diez en nuestro archivo db.json, estamos diciendo cinco bloque, pero también tenemos hecho que es pequeño tema en nuestra paginación. Si vuelves anterior, esto está funcionando. Vamos a eliminar uno más. Nuevamente, se desprenderá de las cinco páginas. Demos clic en Siguiente. Recibimos este botón anterior solamente. Esto está funcionando. Así que los chicos pagan lo siguiente. También se completó en nuestra solicitud. 23. Corregir la chinche: Ahora tenemos un tema en nuestra aplicación. Entonces si buscas un blog, supongamos que tienes desde el bloque de tinker, estamos consiguiendo a este niño de 30 años con esta cinta de palabras clave, ¿de acuerdo? Y si borras este campo de entrada, ahora no estamos obteniendo ningún formulario de bloque. ¿ Qué está pasando por aquí? Entonces tenemos que ir al Código VS y en el archivo home dot js, por qué está sucediendo. Por lo que aquí, oninput cambio en la cadena de entrada con feo manejo de la cartera 13. Por lo que aquí no estamos pasando el valor inicial predeterminado para nuestro inicio y un valor incrementado. Entonces aquí tenemos que pasar también hacia valor predeterminado como 050. El modo en que hemos pasado el uso IN OUT. Si te acuerdas, aquí. Aquí tenemos nuestro inicio y luego aumentar el valor. De igual manera, también tenemos que pasar el valor aquí. Vamos al navegador, actualízate éste. Ahora vamos a buscar de nuevo blog con la tecnología. Ahora vamos a hacer clic en esta cruz. Ahora estamos recuperando todos los datos del blog que tenemos en nuestro archivo JSON. Por lo que hemos solucionado este problema. 24. 404 y Acerca de la página: De acuerdo, entonces ahora vamos a trabajar en otras páginas que no se encuentran y sobre pagadas. Entonces voy a empezar primero con la página no encontrada. Dar algunas URLs aleatorias. No te vas a divertir, pero yo quería resolver una imagen aquí. Hagamos eso. Vamos a no encontrar el archivo dot js aquí. ¿ Qué tenemos que hacer? ¿Aquí? Sólo estoy pegando una línea de código. Ahora vamos navegador. Ahora aquí estamos consiguiendo uno bellamente. Bueno, si la URL no coincide NET, tenemos en nuestro archivo app.js. Ahora tenemos que trabajar también en esta página Acerca de solo voy a mirar el contenido ahí sobre el archivo dot js. Así que solo estoy prediciendo el contenido para este archivo Acerca de dot js. Cuando TI para traer algo de confianza de MDB, contenedor MDB. Soy tipográfico DB. Vamos a dar algún margen, margen superior, top 100 pixel. Puedes dar cualquier contenido dentro de este archivo About dot js. Entrémonos en el navegador. Por lo que estamos obteniendo esta línea de descripción sobre esta aplicación. 25. Gracias: Si estás viendo este video que fue, has completado estadísticamente este curso. Estoy seguro que has disfrutado construyendo esta aplicación de blog React conmigo. Espero que este curso te ayude a crear tu propio sitio web de blogs con reaccionar y diferente conjunto de eso desde mi cabeza. Si tienes alguna consulta o sugerencia, siempre puedes contactar conmigo. Muchas gracias chicos por inscribirse en este curso. Te veré en algún otro curso. Hasta entonces, ve a comprar y cuidar. Y no olvides revisar también mi código.