Set-up Front-end Local

1. Git Repository

Asemenea inițializării Git pentru Back-end

• Creați un repository public nou în GitHub ( !bifați optiunea Add a README file și selectați Add .gitignore template - Node (nu exista optiunea React by default, putem păstra un gitignore specific Node și il mai modificăm daca observăm că avem nevoie))

• Copiați link-ul de clonare al repository-ului și rulați din terminal comanda git clone într-un folder local cu respectivul link

2. Inițializarea Front-end

React in 100 seconds - worth a watch

• Deschideți proiectul nou creat în editor

• În terminal, în directorul specific proiectului, rulați npx create-react-app . (atenție la punct, ne dorim ca noul proiect să fie creat în fișierul curent)

• Așteptăm crearea proiectului.

• Pornim aplicația folosind comanda npm start în terminal. Putem accesa http://localhost:3000/ pentru a vedea aplicația Front-end inițială.

• Un prim pas (din categoria preferințe personale) este reorganizarea sistemului de fișiere. Pentru a nu avea probleme legate de import-uri, recomand utilizarea unei organizări a fișierelor astfel (+adăugarea unor fișiere care ne vor folosi mai târziu)

• În fișierul index.js, ștergem eticheta React.StrictMode

Este important să parcurgeți acest pas, întrucât Modul Strict poate cauza unele comportamente neașteptate în aplicație

// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

reportWebVitals();

• Putem sterge codul inițial din fișierul App.js

// App.js
import './App.css';
import MainPage from './javascript/components/MainPage';

function App() {
  return (
    <div className="App">
      <MainPage />
    </div>
  );
}

export default App;

• Fișierul (componenta) MainPage.jsx în care vom lucra inițial

// MainPage.jsx
import React from 'react';

function MainPage() {
    return ( 
    <div id="MainPage">

    </div>
    );
}

export default MainPage;

• Adăugam și fișierul .env in root.

• Pentru a trimite codul în repository-ul remote, rulați git add . , git commit -m "Initial setup" , git push origin [numele branch-ului] . Pentru mai multe detalii despre Git - https://education.github.com/git-cheat-sheet-education.pdf

3. TailwindCSS*

Tailwind in 100 seconds - worth a watch for a quick intro

Pentru a ușura procesul de stilizare putem folosi TailwindCSS - un framework care creează clase utile de CSS pe care le putem combina și utiliza direct în componentele noastre. Astfel, în locul definirii de clase descriptive și adăugării de proprietăți pentru fiecare în parte, putem preciza direct în definiția componentelor stilurile pe care ne dorim să le folosim într-un mod cât mai "curat" și în același timp rapid.

• Instrucțiunile pentru inițializarea TailwindCSS pentru un proiect React le puteți urmări aici

Putem începe acum să construim interfața aplicației.