Configurare Proiect

React + Vite + TailwindCSS

1. Generare proiect

Deschidem un terminal în cadrul folderului în care dorim să generam proiectul.

Tastăm urmatoarea comandă:

npm create vite@latest client --template react

• npm – manager de pachete Node.js.

• create vite@latest – creează un proiect Vite la ultima versiune. Vite este un builder rapid și modern pentru aplicații web, optimizat pentru dezvoltare și bundling.

• client – numele folderului/proiectului.

• --template react – folosește șablonul React pentru proiect.

Mai departe va trebui să alegem ce template dorim pentru proiectul nostru, așadar va trebui să trecem printr-o serie de intrebări la care trebuie să raspundem prin intermediul tastaturii:

1. Select a framework -> React

2. Select a variant -> JavaScript

3. Use rolldown-vite (Experimental) -> No

4. Install with npm and start now? -> Yes

2. Testarea template-ului generat

După ce am generat proiectul și l-am pornit, putem testa proiectul la adresa: http://localhost:5173/

3. Instalarea și configurarea librăriei TailwindCSS

Pentru a putea lucra mai ușor în cadrul acestui proiect, folosim componente TailwindCSS deja create pentru a economisi timp, păstra consistența vizuală și prototipa rapid interfețe fără să scriem CSS de la zero.

Pasul 1. Oprim terminalul prin combinația de taste CTRL+C, după care rulăm urmatoarea comandă:

npm install -D tailwindcss postcss autoprefixer @tailwindcss/postcss @heroicons/react @headlessui/react

Lista librăriilor necesare

Pasul 2. Mergem în cadrul folderului client și creăm manual un fișier cu numele tailwind.config.js, unde dam punem aceste linii de cod, care va permite ca toate componentele de React pe care le vom crea să poată folosi beneficiile TailwindCSS:

/** client/tailwind.config.js */
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Pasul 3. Ștergem tot conținutul fișierului index.css și punem aceste linii:

@import "tailwindcss";

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

Pasul 4. Mergem în cadrul folderului client și creăm manual un fișier cu numele postcss.config.js, care este un tool folosit pentru procesarea fișierelor CSS înainte ca ele să fie folosite de aplicație.

// client/postcss.config.js
export default {
    plugins: {
        '@tailwindcss/postcss': {},
    }
}

Pasul 5. Ștergem complet fișierul App.css și curățăm componenta App.jsx:

export default function App() {
  return (
    <h1 className="text-3xl font-bold text-center mt-10">
      Tailwind Works! ✅
    </h1>
  );
}

JSX, care provine de la JavaScript XML, este o extensie de sintaxă pentru JavaScript care permite dezvoltatorilor să scrie cod asemănător HTML direct în fișierele lor JavaScript.

Acesta facilitează crearea componentelor de interfață prin oferirea unui mod mai intuitiv și mai ușor de citit de a descrie cum ar trebui să arate interfața.

JSX este adesea asociat cu biblioteca JavaScript React, care îl folosește pentru a descrie structura componentelor UI.