Differences
This shows you the differences between two versions of the page.
|
pw:laboratoare:04 [2023/02/24 13:02] ciprian.dobre [Testarea integrarii] |
pw:laboratoare:04 [2023/04/24 21:02] (current) ciprian.dobre [Crearea unui proiect React] |
||
|---|---|---|---|
| Line 24: | Line 24: | ||
| - Instalarea Node.js și a managerului de pachete npm (Node Package Manager), dacă nu sunt deja instalate, disponibile aici: [[https://nodejs.org/en/download/]] | - Instalarea Node.js și a managerului de pachete npm (Node Package Manager), dacă nu sunt deja instalate, disponibile aici: [[https://nodejs.org/en/download/]] | ||
| - Instalarea unui editor: VS Code [[https://code.visualstudio.com/download]] sau WebStorm [[https://www.jetbrains.com/webstorm/download]] (Recomandăm VS Code) | - Instalarea unui editor: VS Code [[https://code.visualstudio.com/download]] sau WebStorm [[https://www.jetbrains.com/webstorm/download]] (Recomandăm VS Code) | ||
| - | - Rularea comenzii: <code>npx create-react-app my-app</code> | + | - Rularea comenzii: <code>npx create-react-app my-app |
| + | npx create-react-app my-app --template typescript // pentru initializarea cu TypeScript | ||
| + | </code> | ||
| - Accesarea directorului noului proiect creat cu comanda:<code>cd my-app</code> | - Accesarea directorului noului proiect creat cu comanda:<code>cd my-app</code> | ||
| - Pornirea aplicației cu comanda: <code>npm start</code> | - Pornirea aplicației cu comanda: <code>npm start</code> | ||
| - Accesarea aplicației la [[http://localhost:3000/]] | - Accesarea aplicației la [[http://localhost:3000/]] | ||
| + | |||
| + | <note tip>Ca sa va ajutam pentru proiect aveti [[https://gitlab.com/mobylabwebprogramming/reactfrontend|aici]] un proiect de baza de la care sa plecati ca sa va implementati frontendul pentru proiect.</note> | ||
| Line 261: | Line 265: | ||
| <note>În exemplul de mai sus, ruta /produse/:id include un parametru id care poate fi utilizat pentru a afișa detaliile produsului cu id-ul specificat. Acest parametru poate fi accesat în componenta DetaliiProdus folosind obiectul match.params din React Router.</note> | <note>În exemplul de mai sus, ruta /produse/:id include un parametru id care poate fi utilizat pentru a afișa detaliile produsului cu id-ul specificat. Acest parametru poate fi accesat în componenta DetaliiProdus folosind obiectul match.params din React Router.</note> | ||
| - | ==== Linkuri Utile ===== | ||
| + | ===== Sarcini de laborator ===== | ||
| + | Instalați-vă uneltele necesare pentru laborator și cereți ajutorul daca întâmpinați dificultăți. | ||
| + | |||
| + | Creați un nou proiect și porniți-l. Daca aveți întrebări, întrebați asistentul/a, mai multe informații o să fie furnizate la următoarele laboaratoare. | ||
| + | |||
| + | |||
| + | ===== Linkuri Utile ===== | ||
| + | |||
| + | * GitLab Schelet Frontend: [[https://gitlab.com/mobylabwebprogramming/reactfrontend]] | ||
| * Node.js: [[https://nodejs.org/en/download/]] | * Node.js: [[https://nodejs.org/en/download/]] | ||
| * VS Code [[https://code.visualstudio.com/download]] | * VS Code [[https://code.visualstudio.com/download]] | ||
| * WebStorm [[https://www.jetbrains.com/webstorm/download/]] | * WebStorm [[https://www.jetbrains.com/webstorm/download/]] | ||
| * Tutorial React.js: [[https://reactjs.org/tutorial/tutorial.html]] | * Tutorial React.js: [[https://reactjs.org/tutorial/tutorial.html]] | ||
| + | |||
