43 lines
No EOL
1.9 KiB
Markdown
43 lines
No EOL
1.9 KiB
Markdown
# Pour commencer
|
|
|
|
Je vous recommande de lire [README.md](../../../README.md) si ce n'est pas encore fait
|
|
et de mettre en place le projet selon ce qui est écrit.
|
|
|
|
La documentation fera référence à la configuration suivante :
|
|
- [VSCode](https://code.visualstudio.com/) pour l'IDE
|
|
- [pNPm](https://pnpm.io/fr/) pour le gestionnaire de paquet
|
|
- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) pour l'outil d'analyse de projet React
|
|
- [Typescript React code snippets](https://marketplace.visualstudio.com/items?itemName=infeng.vscode-react-typescript) pour les snippets React
|
|
|
|
Si vous n'avez pas installé l'un de ces outils, je vous le recommande **fortement**.
|
|
|
|
# Structure du projet
|
|
|
|
Commençons par nous familiariser avec la structure du projet: 90% du temps, les modifications que vous allez faire seront dans `src/`.
|
|
Si vous souhaitez vous familiariser avec le dossier du projet, lisez [Project_Structure](../../Project_Structure.md).
|
|
|
|
Le dossier est composé de la manière suivante:
|
|
|
|
```
|
|
./src
|
|
├── assets
|
|
├── Components
|
|
├── dts
|
|
├── Enums
|
|
├── Events
|
|
├── Interfaces
|
|
├── test
|
|
├── tests
|
|
├── utils
|
|
├── index.scss
|
|
├── main.tsx
|
|
└── vite-env.d.ts
|
|
```
|
|
|
|
Le point d'entrer est le `main.tsx`, mais vous aurez rarement le besoin de le modifier sauf pour ajouter des fonctionnalité sur le scope global.
|
|
|
|
Les dossiers principaux que vous aurez besoin d'utiliser pour développer un nouveau composant seront : `Components`, `Enums`, `Interfaces`, `utils` (et `assets` si vous mettez des images ou polices d'écriture).
|
|
|
|
Les autres dossiers ne sont pas nécessaire pour faire un composant, mais sont utilisés pour développer d'autres systèmes comme les évents, les définitions typescript et les tests.
|
|
|
|
Si vous avez compris, allons à la suite et regardons [les bases de React](BasesReact.md). |