Scribd
Cargar
85 vistas

Tutorial Básico de Cliente REST Con React

Este documento presenta un tutorial básico para implementar un cliente REST con React JS. Explica cómo crear un proyecto de React, instalar dependencias como Axios y Bootstrap, y desarrollar componentes para listar, crear y ver datos de clientes haciendo llamadas a un API REST mediante un servicio cliente.

Cargado por

Jose Garcia
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
85 vistas

Tutorial Básico de Cliente REST Con React

Este documento presenta un tutorial básico para implementar un cliente REST con React JS. Explica cómo crear un proyecto de React, instalar dependencias como Axios y Bootstrap, y desarrollar componentes para listar, crear y ver datos de clientes haciendo llamadas a un API REST mediante un servicio cliente.

Cargado por

Jose Garcia
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 16

TUTORIAL BASICO CLIENTE-

REST CON REACT JS


Implementación de Cliente REST

Descripción breve
Mini tutorial introductorio de desarrollo de clientes REST con React JS

Ms. Camilo E. Suárez Rebaza


[email protected]
Tutorial Básico API-REST y Spring Boot
Requerimientos Previos:

Descargar e Instalar Visual Studio Code.

Descargar e Instalar Node.

Abrimos una terminal en Visual Studio Code y creamos el proyecto:

Luego ejecutamos el proyecto para ver como quedo inicialmente:

Y muestra la pantalla inicial, con lo que el proyecto fue creado exitosamente:

1
Paso seguido instalamos Bootstrap:

Abrimos el proyecto:

Abrimos el archivo “src/index.js”, que viene a ser el renderizador principal de la aplicación e


importamos a Bootstrap:

2
Quedando el archivo como se muestra a continuación:

Agregamos la Librería JS “Axios” para hacer peticiones GET, POST, PUT, PATCH, DELETE.

Creamos la carpeta “services” dentro de la carpeta “src” y creamos “ClienteService.js”, esta


clase es la que permitira hacer las llamadas al API-REST, utilizando la librería AXIOS:

3
El código de ClienteService.js es como sigue:

Paso siguiente se creamos un folder “components” dentro “src”, en el cual creamos los
archivos “HeaderComponent.js”, “FooterComponent.js”, “ListarClientesComponent.jsx”,
“CrearClienteComponent.jsx” y “VerClienteComponent.jsx”:

4
El código de “ListarClientesComponent.jsx” es como se muestra a continuación:

5
6
El código para “HeaderComponent.js” es:

7
El código para “FooterComponent.js” es:

El código para “CrearClienteComponent.jsx” es:

8
9
10
11
El código para “VerClienteComponent.jsx” es:

12
Instalamos el paquete “React Router Dom”, usando NPM:

Reemplazamos el código del componente App.js con lo siguiente:

13
Para ejecutar la aplicación introducimos el siguiente comando en consola:

Se muestra la siguiente pantalla inicial (http://localhost:3000/):

14
15

También podría gustarte