Configurare mediu de lucru

Node.js:

React necesita Node.js pentru compilare si unelte de dezvoltare. Instalati versiunea LTS (Long Term Support) de pe nodejs.org. In 2026, versiunea LTS recomandata este Node.js 22.x.

# Verificati instalarea
node --version    # v22.x.x
npm --version     # 10.x.x

Editor de cod:

VS Code este editorul recomandat pentru React development. Instalati extensiile esentiale:

• ES7+ React/Redux/React-Native snippets - scurtaturi de cod
• Prettier - formatare automata cod
• ESLint - detectare erori si best practices
• Tailwind CSS IntelliSense - autocomplete pentru Tailwind
• Auto Rename Tag - redenumire automata tag-uri pereche

In 2026, Vite este toolul standard pentru creare proiecte React (Create React App este depreciat oficial).

# Creare proiect nou
npm create vite@latest my-app -- --template react

# Navigare in folder si instalare dependente
cd my-app
npm install

# Pornire server de dezvoltare
npm run dev

Structura proiect Vite + React:

my-app/
public/          # Fisiere statice (favicon, imagini)
src/
assets/        # Imagini, fonturi importate in cod
components/    # Componente reutilizabile
pages/         # Pagini/ecrane ale aplicatiei
App.jsx        # Componenta principala
App.css        # Stiluri pentru App
main.jsx       # Punctul de intrare (entry point)
index.css      # Stiluri globale
index.html       # Template HTML
vite.config.js   # Configurare Vite
package.json     # Dependente si scripturi

# Creare proiect Next.js (cu App Router)
npx create-next-app@latest my-nextjs-app

# Optiuni recomandate la prompt:
# TypeScript? Yes
# ESLint? Yes
# Tailwind CSS? Yes
# src/ directory? Yes
# App Router? Yes
# Import alias? Yes (@/*)

Structura proiect Next.js:

my-nextjs-app/
public/              # Fisiere statice
src/
app/
layout.tsx       # Layout principal (obligatoriu)
page.tsx         # Pagina principala (/)
globals.css      # Stiluri globale
about/
page.tsx       # Pagina /about
components/        # Componente reutilizabile
lib/               # Utilitare, configurari
next.config.js       # Configurare Next.js
tailwind.config.ts   # Configurare Tailwind
tsconfig.json        # Configurare TypeScript
package.json