Ejercicios Prácticos para el Capítulo 10: Desarrollando Aplicaciones de una Sola Página

Para solidificar tu comprensión de los conceptos clave cubiertos en el Capítulo 10, presentamos varios ejercicios prácticos. Estos ejercicios están diseñados para ayudarte a adquirir experiencia práctica en el desarrollo de Aplicaciones de una Sola Página (SPA), centrándose en el enrutamiento, la gestión de estado y el modelo SPA.

Ejercicio 1: Enrutamiento Simple de SPA

Objetivo: Implementar un enrutamiento simple del lado del cliente en una SPA con JavaScript puro sin usar ningún marco.

Solución:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple SPA Routing</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </nav>
    <div id="content"></div>

    <script src="router.js"></script>
</body>
</html>

// router.js
const routes = {
    'home': '<h1>Home Page</h1><p>Welcome to the home page.</p>',
    'about': '<h1>About Page</h1><p>Learn more about our SPA.</p>'
};

function handleRouting() {
    let hash = window.location.hash.substring(1);
    document.getElementById('content').innerHTML = routes[hash] || '<h1>404 Not Found</h1><p>The requested page does not exist.</p>';
}

window.addEventListener('hashchange', handleRouting);
window.addEventListener('load', handleRouting);

Ejercicio 2: Gestión de Estado con Redux

Objetivo: Crear una aplicación simple en React que use Redux para la gestión de estado para manejar un contador.

Solución:

# First, set up a new React app and install Redux
npx create-react-app redux-counter
cd redux-counter
npm install redux react-redux

// src/redux/store.js
import { createStore } from 'redux';

function counterReducer(state = { count: 0 }, action) {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 };
        case 'DECREMENT':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

const store = createStore(counterReducer);
export default store;

// src/App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function App() {
    const count = useSelector(state => state.count);
    const dispatch = useDispatch();

    return (
        <div>
            <h1>Count: {count}</h1>
            <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
        </div>
    );
}

export default App;

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './redux/store';
import App from './App';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

Ejercicio 3: Carga Dinámica de Componentes en Vue.js

Objetivo: Implementar una aplicación en Vue.js que cargue componentes dinámicamente según la ruta.

Solución:

<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <button @click="currentView = 'home'">Home</button>
      <button @click="currentView = 'about'">About</button>
    </nav>
    <component :is="currentView"></component>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import About from './components/About.vue'

export default {
  data() {
    return {
      currentView: 'home'
    }
  },
  components: {
    Home,
    About
  }
}
</script>

<!-- components/Home.vue -->
<template>
  <div>
    <h1>Home</h1>
    <p>This is the home page.</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<!-- components/About.vue -->
<template>
  <div>
    <h1>About</h1>
    <p>This is the about page.</p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

Estos ejercicios están diseñados para mejorar tus habilidades en el desarrollo de SPA, enfocándose en la implementación de funcionalidades centrales como el enrutamiento y la gestión del estado en diferentes frameworks y bibliotecas. Al completar estas tareas, obtendrás una comprensión más profunda de cómo funcionan las SPA y cómo gestionar eficazmente los estados y rutas de la aplicación, componentes clave en la construcción de aplicaciones web modernas.