Scribd
Cargar
15 vistas6 páginas

S12 React Web Interactiva - Ppaowz

INTERACTIVA

Cargado por

Gerson David Vega Cisneros
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOC, PDF, TXT o lee en línea desde Scribd
15 vistas6 páginas

S12 React Web Interactiva - Ppaowz

INTERACTIVA

Cargado por

Gerson David Vega Cisneros
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOC, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

WEB INTERACTIVA CON REACT

Aquí tienes un ejemplo de código para una aplicación web interactiva con React. Esta aplicación es
una lista de tareas interactiva (to-do list) que permite agregar, eliminar y marcar tareas como
completadas. Es un proyecto común para entender cómo se maneja el estado, eventos y renderizado
de componentes en React.

Para usar este código, necesitas un entorno React configurado. Puedes crearlo con `create-react-app`
de la siguiente forma:

```bash
npx create-react-app lista-tareas
cd lista-tareas
npm start
```
Luego, reemplaza el contenido de `App.js` con el siguiente código:
Código de una Aplicación Interactiva de Lista de Tareas

```javascript
import React, { useState } from 'react';
import './App.css';

function App() {
// Estado para las tareas y la entrada del usuario
const [tareas, setTareas] = useState([]);
const [nuevaTarea, setNuevaTarea] = useState('');

// Maneja el cambio de texto en el campo de entrada


const manejarCambio = (e) => {
setNuevaTarea(e.target.value);
};

// Agrega una nueva tarea a la lista


const agregarTarea = () => {
if (nuevaTarea.trim() !== '') {
setTareas([...tareas, { texto: nuevaTarea, completada: false }]);
setNuevaTarea('');
}
};

// Marca una tarea como completada o no completada


const alternarCompletada = (indice) => {
const nuevasTareas = tareas.map((tarea, i) =>
i === indice ? { ...tarea, completada: !tarea.completada } : tarea
);
setTareas(nuevasTareas);
};

// Elimina una tarea de la lista


const eliminarTarea = (indice) => {
const nuevasTareas = tareas.filter((_, i) => i !== indice);
setTareas(nuevasTareas);
};

return (
<div className="app">
<h1>Lista de Tareas</h1>
<div className="input-container">
<input
type="text"
value={nuevaTarea}
onChange={manejarCambio}
placeholder="Escribe una nueva tarea"
/>
<button onClick={agregarTarea}>Agregar</button>
</div>
<ul className="task-list">
{tareas.map((tarea, indice) => (
<li key={indice} className={tarea.completada ? 'completed' : ''}>
<span onClick={() => alternarCompletada(indice)}>
{tarea.texto}
</span>
<button onClick={() => eliminarTarea(indice)}>Eliminar</button>
</li>
))}
</ul>
</div>
);
}

export default App;


```

Estilos en CSS (App.css)

Para que la aplicación tenga un estilo básico, puedes agregar el siguiente código CSS en el archivo
`App.css`:

```css
.app {
text-align: center;
max-width: 600px;
margin: 0 auto;
font-family: Arial, sans-serif;
}

.input-container {
display: flex;
justify-content: center;
margin: 20px 0;
}

input {
padding: 10px;
width: 70%;
margin-right: 10px;
font-size: 16px;
}

button {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}

.task-list {
list-style: none;
padding: 0;
}

.task-list li {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ddd;
align-items: center;
}

.task-list li.completed span {


text-decoration: line-through;
color: #aaa;
}

.task-list button {
background-color: #e74c3c;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}

.task-list button:hover {
background-color: #c0392b;
}
```
Descripción del Código
- Estados: Se usa `useState` para manejar las tareas (`tareas`) y la entrada del usuario
(`nuevaTarea`).
- Funciones:
- `agregarTarea()`: Añade una nueva tarea.
- `alternarCompletada()`: Marca o desmarca una tarea como completada.
- `eliminarTarea()`: Elimina una tarea de la lista.
- Renderizado: Cada tarea se representa como un `<li>` en la lista y muestra el texto, un botón de
eliminar y un evento de clic para marcarla como completada.

Ejecución
Con este código, puedes probar la aplicación escribiendo tareas, agregándolas a la lista,
eliminándolas, y marcándolas como completadas. Es una aplicación interactiva sencilla, perfecta
para aprender los fundamentos de React y cómo se manejan estados y eventos.

SALIDA DEL SISTEMA:


En React, puedes ejecutar principalmente aplicaciones de frontend enfocadas en la interfaz de
usuario (UI). React es una biblioteca de JavaScript diseñada para construir interfaces interactivas, y
se utiliza para crear aplicaciones web, móviles y de escritorio que son rápidas y dinámicas. Aquí
tienes algunos ejemplos específicos de lo que puedes hacer con React:

1. Aplicaciones Web Interactivas


React es excelente para desarrollar Single Page Applications (SPA), donde el contenido se
actualiza dinámicamente sin recargar toda la página. Esto lo hace ideal para aplicaciones como
redes sociales, dashboards, y aplicaciones de comercio electrónico, donde la experiencia del usuario
es clave.

2. Interfaces de Usuario Dinámicas


Con React puedes crear interfaces que se actualicen en tiempo real en función de las acciones del
usuario o de los datos recibidos. Los componentes de React permiten construir interfaces
reutilizables y modulares, como menús desplegables, formularios, galerías de imágenes, y mucho
más.

3. Aplicaciones de Tiempo Real


React puede integrarse con WebSocket o Firebase para manejar aplicaciones en tiempo real como
chats, herramientas de colaboración en línea, o paneles de control en tiempo real.

4. Aplicaciones Móviles con React Native


Usando React Native, puedes construir aplicaciones móviles nativas para iOS y Android,
reutilizando la mayoría del código de JavaScript y los conocimientos de React. React Native utiliza
componentes específicos para dispositivos móviles, pero la filosofía y el diseño son similares a los
de React.

5. Aplicaciones de Escritorio con Electron y React


React también puede ser utilizado en Electron para crear aplicaciones de escritorio
multiplataforma, como es el caso de Slack o Visual Studio Code. Electron permite empaquetar
React como una aplicación nativa para Windows, macOS y Linux.

6. Aplicaciones Multiplataforma (Web, iOS, Android)


Al combinar React con frameworks como Next.js (para web) y React Native (para móvil), puedes
construir aplicaciones que compartan gran parte del código entre la web y dispositivos móviles, lo
cual facilita el desarrollo y mantenimiento de aplicaciones multiplataforma.

7. Componentes de UI para Otras Aplicaciones


React es modular, por lo que puedes construir componentes específicos, como formularios,
sliders, gráficos, o visualizaciones de datos, y reutilizarlos en otras aplicaciones web. React permite
crear bibliotecas de componentes que pueden integrarse fácilmente en múltiples proyectos.

8. Progressive Web Apps (PWA)


Puedes usar React para construir aplicaciones web progresivas (PWA), que funcionan como
aplicaciones nativas en dispositivos móviles. Las PWA se instalan en el dispositivo como una
aplicación y funcionan sin conexión en algunas capacidades.

Ejemplo de una Aplicación React Básica

Para comenzar, aquí tienes un ejemplo de un componente React simple que muestra un mensaje y
cambia al hacer clic:
```javascript
import React, { useState } from 'react';

function App() {
const [mensaje, setMensaje] = useState('¡Hola desde React!');

const cambiarMensaje = () => {


setMensaje('¡Has hecho clic!');
};

return (
<div>
<h1>{mensaje}</h1>
<button onClick={cambiarMensaje}>Haz clic aquí</button>
</div>
);
}

export default App;


```

Este componente simple muestra cómo React permite crear interfaces interactivas: cambia el
mensaje cuando se hace clic en el botón.

Complementos y Librerías Populares para React


React tiene un ecosistema robusto, con bibliotecas como:

- React Router para la navegación entre páginas en una SPA.


- Redux o Context API para manejar el estado global en aplicaciones complejas.
- Formik y Yup para manejar y validar formularios.
- Axios o Fetch API para hacer solicitudes HTTP y conectarse a APIs.
- Material-UI o Tailwind CSS para agregar componentes y estilos visuales predefinidos.

React te da gran flexibilidad para construir aplicaciones interactivas y complejas, desde


aplicaciones web dinámicas hasta aplicaciones multiplataforma en dispositivos móviles y escritorio.

También podría gustarte