Crear un proyecto en React con TypeScript, Ionic, Redux y Vite

Tiempo de lectura: 2 minutos

1. Crear el proyecto con Vite y TypeScript

npm create vite@latest nombre-proyecto --template react-ts

Cambiamos al directorio del proyecto e instalamos las dependencias

cd nombre-proyecto
npm install

2. Instalar Ionic React y las dependencias de estilo

npm install @ionic/react @ionic/react-router ionicons
npm install @ionic/react/css

3. Configurar Ionic Router

import React from 'react';
import ReactDOM from 'react-dom/client';
import { IonReactRouter } from '@ionic/react-router';
import { setupIonicReact } from '@ionic/react';
import App from './App';
import './index.css';

// Inicializar Ionic
setupIonicReact();

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <IonReactRouter>
      <App />
    </IonReactRouter>
  </React.StrictMode>
);

4. Agregar Ionic Styles

@import "@ionic/react/css/core.css";
@import "@ionic/react/css/normalize.css";
@import "@ionic/react/css/structure.css";
@import "@ionic/react/css/typography.css";
@import "@ionic/react/css/padding.css";
@import "@ionic/react/css/float-elements.css";
@import "@ionic/react/css/text-alignment.css";
@import "@ionic/react/css/text-transformation.css";
@import "@ionic/react/css/flex-utils.css";
@import "@ionic/react/css/display.css";

5. Instalar Redux y Configurarlo

Instala Redux Toolkit con soporte para TypeScript:

npm install @reduxjs/toolkit react-redux

Configuración de Redux:

1. Crea una carpeta store/ en el proyecto.
2. Dentro de store/, crea un archivo store.ts:
3. Envuélvelo con el Provider de Redux en main.tsx:

import { configureStore, createSlice } from '@reduxjs/toolkit';

// Tipos para el estado
interface EjemploState {
  value: number;
}

// Estado inicial
const initialState: EjemploState = {
  value: 0,
};

// Crear slice
const ejemploSlice = createSlice({
  name: 'ejemplo',
  initialState,
  reducers: {
    incrementar: (state) => {
      state.value += 1;
    },
    decrementar: (state) => {
      state.value -= 1;
    },
  },
});

export const { incrementar, decrementar } = ejemploSlice.actions;

// Configurar el store
export const store = configureStore({
  reducer: {
    ejemplo: ejemploSlice.reducer,
  },
});

// Tipos de ayuda
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

import { Provider } from 'react-redux';
import { store } from './store/store';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Provider store={store}>
      <IonReactRouter>
        <App />
      </IonReactRouter>
    </Provider>
  </React.StrictMode>
);

6. Uso en Componentes con TypeScript

Ejemplo de cómo usar Redux en un componente con TypeScript:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { IonButton, IonContent, IonPage } from '@ionic/react';
import { incrementar, decrementar } from './store/store';
import { RootState } from './store/store';

const Home: React.FC = () => {
  const valor = useSelector((state: RootState) => state.ejemplo.value);
  const dispatch = useDispatch();

  return (
    <IonPage>
      <IonContent>
        <h1>Contador: {valor}</h1>
        <IonButton onClick={() => dispatch(incrementar())}>Incrementar</IonButton>
        <IonButton onClick={() => dispatch(decrementar())}>Decrementar</IonButton>
      </IonContent>
    </IonPage>
  );
};

export default Home;

7. Configurar las Rutas

Configura las rutas en App.tsx usando Ionic Router. Ejemplo:

import React from 'react';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { Route } from 'react-router-dom';
import Home from './Home';

const App: React.FC = () => (
  <IonApp>
    <IonRouterOutlet>
      <Route exact path="/" component={Home} />
    </IonRouterOutlet>
  </IonApp>
);

export default App;

Espero que les sirva de ayuda y que tengan un feliz día!