Meu React App Template

PedroVic12

Conjunto de arquivos para um aplicativo inicial com mobile first para arquivos React usando Vite, tailwind, MUI material e Ionic

Download

meu-react-app-template

Conjunto de arquivos para um aplicativo inicial com mobile first para arquivos React usando Vite, tailwind, MUI material e Ionic

Instale NodeJS e npm na maquina
rode o comando para criar um projeto React e Vite


npm create vite@latest meu-app-template -- --template react

Copie e cole os seguintes arquivos ***package.json** e toda pasta src e substuita pelo atual (SUGIRO APAGAR OS ARQUIVOS, COPIAR e COLAR)
Faça isso apr instalar as depedencias necessarias


npm install

E por fim, rode o projeto


npm run dev

Pronto! Agora voce tem um start kit app em React e Vite pronto para iniciar seu aplicativo!

🗂️ Projeto Monorepo com Vite + Tailwind + React + Rotas Este guia vai te ajudar a configurar um monorepo com Vite, Tailwind CSS e React, permitindo que você gerencie múltiplos subprojetos dentro de um único projeto principal.

Crie a Pasta do Projeto Principal ```bash

mkdir my-app cd my-app

2. Crie o package.json na Raiz
Inicialize o arquivo package.json:

```bash
npm init -y
Adicione as dependências principais:


npm install react react-dom tailwindcss vite react-router-dom

Configure o Tailwind CSS Inicialize o Tailwind:


npx tailwindcss init

Modifique o arquivo tailwind.config.js:


/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./apps/**/*.{html,js,jsx,ts,tsx}", "./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Crie o arquivo postcss.config.js:


module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Crie as Pastas para os Subprojetos


mkdir -p apps/app1/src
mkdir -p apps/app2/src
mkdir -p src

Configure os package.json dos Subprojetos Crie o arquivo apps/app1/package.json:


{
  "name": "app1",
  "version": "1.0.0",
  "main": "src/main.tsx",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

E o arquivo apps/app2/package.json:


{
  "name": "app2",
  "version": "1.0.0",
  "main": "src/main.tsx",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Configurando o Vite na Raiz Crie o arquivo vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@app1': resolve(__dirname, 'apps/app1/src'),
      '@app2': resolve(__dirname, 'apps/app2/src'),
    },
  },
});

Configurando o App Principal 📝 Crie o arquivo src/index.html:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <div id="root"></div>
  <script type="module" src="./main.tsx"></script>
</body>
</html>

📝 Crie o arquivo src/main.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './styles.css';

ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

📝 Crie o arquivo src/App.tsx:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import App1 from '@app1/App';
import App2 from '@app2/App';

function App() {
  return (
    <Router>
      <nav className="p-4 bg-blue-600 text-white flex gap-4">
        <Link to="/">Home</Link>
        <Link to="/app1">App 1</Link>
        <Link to="/app2">App 2</Link>
      </nav>
      <Routes>
        <Route path="/" element={<h1 className="text-3xl text-center mt-10">Welcome to My App!</h1>} />
        <Route path="/app1" element={<App1 />} />
        <Route path="/app2" element={<App2 />} />
      </Routes>
    </Router>
  );
}

export default App;

📝 Crie o arquivo src/styles.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Configurando os Subprojetos (App1 e App2) Para App1:

📝 Crie apps/app1/src/App.tsx:


import React from 'react';

function App1() {
  return (
    <div className="text-4xl text-center text-blue-500">
      Hello from App 1!
    </div>
  );
}

export default App1;

Para App2:

📝 Crie apps/app2/src/App.tsx:

import React from 'react';

function App2() {
  return (
    <div className="text-4xl text-center text-green-500">
      Hello from App 2!
    </div>
  );
}

export default App2;

Facilite com o Script run_dev.sh Crie o arquivo run_dev.sh:

#!/bin/bash

echo "Starting Vite Dev Server for My App..."
vite --open
Torne o script executável:

chmod +x run_dev.sh

Agora você pode rodar o projeto inteiro com:

./run_dev.sh

Rodando o Projeto Agora é só instalar as dependências dos subprojetos:


cd apps/app1
npm install
cd ../app2
npm install
cd ../..
npm install

E rodar:

./run_dev.sh

🎯 Próximos Passos: Adicionar mais apps.

Criar componentes reutilizáveis entre os apps.

Adicionar autenticação e controle de acesso.

Implementar testes com Jest ou React Testing Library.

Top categories