Scribd
Cargar
3 vistas

App Con React Api

v xbc

Cargado por

andresf.pulidop
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
3 vistas

App Con React Api

v xbc

Cargado por

andresf.pulidop
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 5

App con React Api

1. Configuración del entorno

Primero, asegúrate de tener configurado tu entorno de desarrollo:

Node.js: Asegúrate de tener Node.js instalado (puedes verificarlo con node -v en la terminal).

Expo CLI (opcional): Expo facilita el desarrollo de aplicaciones React Native. Puedes instalarlo
globalmente usando:

terminal

npm install -g expo-cli

Visual Studio Code: Para trabajar en tu código con este IDE.

2. Crear la aplicación con React Native

Puedes crear la aplicación con Expo (recomendado para principiantes) o con React Native CLI.
Usaremos Expo por simplicidad.

En la terminal, corre el siguiente comando para crear el proyecto:

terminal

expo init MyApiApp

React-native init MyApiApp

Una vez que el proyecto esté listo, navega al directorio del proyecto:

cd MyApiApp
Instala las dependencias necesarias para hacer solicitudes HTTP. Vamos a usar axios:

terminal

npm install axios

3. Crear un servidor local con Node.js

Crea un directorio para el servidor local:

terminal

mkdir api-server

cd api-server

Inicializa el proyecto Node.js:

npm init -y

instala las dependencias necesarias:

npm install express cors

un archivo server.js con el siguiente contenido

const express = require('express');

const cors = require('cors');

const app = express();

const port = 3000;


api.js

app.use(cors());

// Simulando una API simple

app.get('/api/data', (req, res) => {

res.json({ message: "Hola desde el servidor local!" });

});

app.listen(port, () => {

console.log(`Servidor corriendo en http://localhost:${port}`);

});

Inicia el servidor:

node server.js

El servidor estará escuchando en http://localhost:3000/api/data.

4. Consumir la API en React Native

Abre tu proyecto en Visual Studio Code:

terminal

code .
En el archivo App.js, importa axios y configura el uso de la API.

Modifica App.js de la siguiente manera:

import React, { useEffect, useState } from 'react';

import { StyleSheet, Text, View } from 'react-native';

import axios from 'axios';

export default function App() {

const [data, setData] = useState(null);

useEffect(() => {

axios.get('http://localhost:3000/api/data')

.then(response => {

setData(response.data.message);

})

.catch(error => {

console.error('Error al consumir la API', error);

});

}, []);

return (

<View style={styles.container}>
<Text>{data ? data : "Cargando..."}</Text>

</View>

);

Diseño.js

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#fff',

},

});

5. Ejecutar la aplicación

Para ejecutar la aplicación, vuelve al directorio del proyecto React Native y ejecuta

terminal

npm start

Esto abrirá Expo en tu navegador y podrás ver la aplicación en un emulador o en tu dispositivo


móvil.

También podría gustarte