Science & Technology

#20 Understanding React Frontend

📚 Temas principales

Separar el frontend y el backendEl proyecto tendrá un backend Spring y un frontend React, que se comunicarán mediante APIs. React será la interfaz que usará el cliente, aunque también se pueden probar las APIs con herramientas como Postman. 0:00
Componentes y aplicaciones de una sola páginaReact permite crear componentes reutilizables, como piezas de Lego, y actualizar el contenido de una página sin recargarla. 2:35
Estructura de la aplicación ReactEl archivo index.html contiene el elemento raíz; main.jsx carga el componente App, que define rutas para la página principal y la de agregar productos. 3:36
Cómo se muestran los productosLa página principal solicita los productos al backend, guarda la respuesta en el estado y recorre la lista para mostrar el nombre, la marca y el precio. 6:11
Ejecutar el frontendSe instala lo indicado en package.json con npm install y se inicia la aplicación con npm run Dev. 7:44

✨ Conclusiones clave

Los datos vienen del servidorEl frontend contiene la presentación y la lógica de la interfaz, mientras que los datos de productos deben llegar desde el backend a través de una API. 6:11
El error se debe a que falta el backendLa aplicación muestra un problema al abrirse porque la API de productos aún no está disponible; la dirección tampoco responde en el navegador o en Postman. 8:16

🧠 Lecciones aprendidas

Componentes reutilizablesOrganizar la interfaz en componentes ayuda a reutilizar elementos y a mantener los cambios coherentes en distintas partes de la aplicación. 2:35
React usa JSX y funcionesEl componente App se importa y se utiliza como una etiqueta personalizada; los componentes pueden devolver la interfaz que se presenta en la página. 4:07

🏁 Conclusión y próximos pasos

Preparar el backendEste video se centra en entender el frontend existente. En el siguiente, se creará el proyecto Spring para que la aplicación pueda obtener los datos que necesita. 8:48

telusko navin reddy tutorial Java Blockchain

Transcript excerpt

0:00 welcome back aliens my name is Navin Reddy and let's continue the series on Spring framework now till this point we have talked about what is spring framework we have talked about spring web spring boot now it's time to focus on the project remember in the first or second video we have talked about the project which we going to build now to build this project of course we have two sides of it so if you see this diagram here or this drawing kind of so on the left hand side we have this thing right which is your

0:31 client a client can be react application a client can also be a post man to test your apis or maybe can we can use swag swagger but when I talk about client here which we are using we will be building a react application and of course I don't want to code the entire stuff we have a code let's understand the code first uh what we have already done so this is actually ready for the first video this is something we want to build of course right we want a database we want to have different layers and when you want to get something from data database we have to build all these

🔒 The full, searchable transcript is available with Pro.

Suggestions