https://github.com/astralzz/template-react-full
https://github.com/astralzz/template-react-full
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/astralzz/template-react-full
- Owner: Astralzz
- Created: 2025-02-25T23:10:16.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-03-08T04:52:07.000Z (3 months ago)
- Last Synced: 2025-03-08T05:25:30.539Z (3 months ago)
- Language: TypeScript
- Size: 51.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# 🚀 Plantilla de React Lista y Configurada
## 📌 Contacto
📌 **Portafolio:** [astralzz.io](https://astralzz.github.io/)
📩 **Email:** [[email protected]](mailto:[email protected])
📱 **Telegram:** [t.me/lAstralz](https://t.me/lAstralz)
🔗 **LinkedIn:** [linkedin.com/in/Edain](https://linkedin.com/in/edain-jesus-cortez-ceron-23b26b155)
😺 **GitHub:** [github.com/Astralzz](https://github.com/Astralzz)
---
## 📌 Introducción
Esta plantilla está optimizada para el desarrollo de aplicaciones en **React**, con herramientas modernas preconfiguradas para agilizar el desarrollo y despliegue.
### 📦 Librerías Incluidas
- **React Router**: gestión de rutas.
- **Redux Toolkit**: gestión del estado.
- **Tailwind CSS 4.0**: estilos rápidos y eficientes.
- **Sass**: preprocesador de estilos.
- **Docker**: configuración para facilitar el despliegue.
- **Vite**: bundler para un desarrollo más rápido.
- **Formik**: gestión de formularios y validaciones.
- **Yup**: validación de esquemas en tiempo de ejecución.
- **Axios**: Realizar consulta `XMLHttpRequests`, `HTTPS`, etc.
### ⚙️ Configuraciones Realizadas
- **TypeScript**: ya configurado en toda la app para una mejor experiencia de desarrollo.
- **React Router**: preconfigurado en **src/router.tsx**.
- **Redux Toolkit**: configuración lista en **src/redux/**, incluyendo store y middleware.
- **Tailwind CSS 4.0**: configurado en **src/main.css**.
- **Tema**: gestión de tema en **src/redux/slices/themeSlice.ts**, integrado con Redux.
- **Formik & Yup**: formulario con validaciones listo para usar.
- **Página 404**: ya implementada y funcional.
- **Modal**: implementado y listo para usar en **src/components/modals/ModalDefault.tsx**
- **Api & Request** Se creo un ejemplo del uso de una api en react `19` en **src/pages/ApiPage.tsx**
### 📖 Tutoriales
- **Despliegue con Docker**: consulta **docs/tutorials/docker-tutorial.md** para aprender a configurar y desplegar con Docker.
---
## 📂 Estructura del Proyecto
```bash
📁 app
├── 📁 docker
│ └── app.dockerfile
├── 📁 public
│ └── vite.svg
├── 📁 src
│ ├── 📁 apis
│ ├── App.tsx
│ ├── 📁 assets
│ │ └── react.svg
│ ├── 📁 components
│ │ ├── 📁 err
│ │ ├── 📁 forms
│ │ │ └── EmailForm.tsx
│ │ ├── 📁 inputs
│ │ │ └── InputDefault.tsx
│ ├── main.css
│ ├── main.tsx
│ ├── 📁 pages
│ │ └── NotFoundPage.tsx
│ ├── 📁 redux
│ │ ├── hook.ts
│ │ ├── 📁 slices
│ │ │ └── themeSlice.ts
│ │ ├── store.ts
│ ├── router.tsx
│ ├── 📁 styles
│ │ └── app.scss
│ ├── 📁 tests
│ ├── vite-env.d.ts
├── .dockerignore
├── .gitignore
├── docker-compose.yml
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
```
---
## 🚀 Uso
### 🔧 Instalación
1. Clona este repositorio:
```sh
git clone https://github.com/Astralzz/template-react-full
cd template-react-full/app
```
2. Instala las dependencias:
```sh
npm install
```
3. Inicia el entorno de desarrollo:
```sh
npm run dev
```
### 📜 Scripts Útiles
- **`npm run dev`**: Inicia el servidor en modo desarrollo.
- **`npm run build`**: Compila la aplicación para producción.
- **`npm run preview`**: Ejecuta la versión compilada de la app.
- **`npm run lint`**: Verifica errores en el código.
- **`npm run format`**: Aplica formato automático con Prettier.
- **`npm run test`**: Ejecuta las pruebas automatizadas.
---
## 🛠️ Configuraciones Destacadas
### **Router Configurado**
React Router está listo en **src/router.tsx**, permitiendo agregar rutas fácilmente:
```tsx
const router = createBrowserRouter([
{
path: "/",
element: ,
errorElement: ,
children: routesApp.map((r) => r.route),
},
]);
```
### **Redux Configurado**
Redux Toolkit está preconfigurado con TypeScript en **src/redux/**, incluyendo el store y los slices:
```tsx
import { configureStore } from "@reduxjs/toolkit";
import themeSlice from "./slices/themeSlice";
export const store = configureStore({
reducer: {
stateTheme: themeSlice,
},
});
// Tipos de TypeScript
export type RootState = ReturnType;
export type AppDispatch = typeof store.dispatch;
```
### **Tailwind CSS 4.0**
La configuración de Tailwind está en **src/main.css**. Se puede personalizar fácilmente:
```css
@import "tailwindcss";
@theme {
--color-primary-50: rgba(245, 245, 245, 1);
--color-primary-500: rgba(50, 50, 50, 1);
--color-primary-900: rgba(0, 0, 0, 1);
}
```
### **Gestión de Tema con Redux**
El estado del tema se gestiona en **src/redux/slices/themeSlice.ts**.
```tsx
import { useReduxSelector } from './redux/hook';
const App: React.FC = () => {
const theme = useReduxSelector((state) => state.stateTheme.theme);
return ;
};
```
### **Formularios con Formik & Yup**
La validación de formularios está lista en **src/components/forms/EmailForm.tsx**.
```tsx
const EmailForm: React.FC = () => {
// Action form
const handleSubmit = React.useCallback(
(
values: { asunto: string; },
{
setSubmitting,
resetForm,
}: {
setSubmitting: (isSubmitting: boolean) => void;
resetForm: () => void;
}
): void => {
console.log("Email enviado:", values);
},
[]
);
return (
{/* Está enviando, Es válido, Sucio */}
{({ isSubmitting, isValid, dirty }) => (
{/* Asunto */}
{/* Button action */}
{isSubmitting ? "Enviando..." : "Enviar"}
)}
);
};
```
### **404 Page**
Pagina 404 funcionando correctamente en **src/redux/slices/themeSlice.ts**. se puede cambiar y configurar sin problema.
```tsx
/**
* 404 page
*
* @returns {JSX.Element}
*/
const NotFoundPage: React.FC = () => {
// Variables redux
const theme = useReduxSelector((state) => state.stateTheme.theme);
return (
{/* Header */}
404
{/* Message */}
Página no encontrada
{/* Button */}
Volver al inicio
);
};
```
### **Example Api Page**
Pagina de ejemplo del uso de una api usando react 19 y axios
```tsx
// Component ...
const ApiPage: React.FC = () => {
// Estados para manejar la data y el estado de error
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [isPending, startTransition] = useTransition();
// Función para manejar la petición
const handleSubmit = () => {
// Reseteamos los estados
setError(null);
// Inicio
startTransition(async () => {
try {
// Petición a la API
const response = await getDataRequest();
// * Success
setData(JSON.stringify(response, null, 2));
// ! Error
} catch (err: unknown) {
setError(
err instanceof Error ? err?.message : "Ocurrió un error desconocido"
);
}
});
};
return
;
};
```
```tsx
// Request ...
export const getDataRequest = async (): Promise => {
try {
// Realizar la petición GET
const response = await axios.get("");
// Verificar si los datos son válidos
checkDataRequest(response);
// Retornar los datos obtenidos
return response.data;
} catch (error) {
return await catchAxiosError(error);
}
};
```
---
## 📜 Conclusión
Esta plantilla te permite comenzar rápidamente con **React, Redux, Tailwind, TypeScript y Docker**, sin preocuparte por la configuración inicial. 🚀
---