Aller au contenu

Structure typique d'un projet React

Structure

.
├── eslint.config.js
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── assets
│   ├── components
│   │   ├── App
│   │   │   ├── App.css
│   │   │   ├── App.tsx
│   │   │   └── index.ts
│   │   └── Personnage
│   │       ├── index.ts
│   │       ├── Personnage.css
│   │       └── Personnage.tsx
│   ├── index.css
│   └── main.tsx
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

Les dossiers

Dossier Utilisation
src Tout le code de l'application React
src/assets Les images, vidéos et autres média utilisés dans l'application
src/components Les composantes de React

La racine - Index.html

Index.html est le point d'entrée du site Web.

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>personnage_base</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Le contenant principal - main.tsx

main.tsx contient l'application React.

/src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './components/App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

La composante principale - App.tsx

App.tsx est l'application React. C'est ici que l'on modifie le code pour faire notre application.

/src/components/App/App.tsx
import './App.css';
import Personnage from '../Personnage';

function App() {
  return (
    <>
      <Personnage />
    </>
  );
}

export default App;

Dans la structure utilisée pour le cours, chaque composante est dans son propre dossier. Pour faciliter l'importation des composantes, un fichier index.ts est créé, pour exporter la composante.

/src/components/App/index.ts
export * from './App';
export { default } from './App';

Le CSS spécifique à une composante peut résider dans le dossier de la composante :

/src/components/App/App.css
#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

Une composante spécifique à votre projet

Personnage.tsx est une composante spécifique à votre application React.

/src/components/Personnage/Personnage.tsx
import './Personnage.css';

const Personnage = () => {
  const nomDuPersonnage = 'Fluffy McChat';
  const photoDuPersonnage = 'https://placecats.com/300/300';
  const adresseDuPersonnage = '123 Ave Des Félins';

  return (
    <div className="container">
      <div className="photo">
        <img src={photoDuPersonnage} />
      </div>
      <div className="info">
        <p>{nomDuPersonnage}</p>
        <p className="addresse">{adresseDuPersonnage}</p>
      </div>
    </div>
  );
};

export default Personnage;
/src/components/Personnage/index.ts
export * from './Personnage';
export { default } from './Personnage';

Le CSS spécifique à une composante peut résider dans le dossier de la composante :

/src/components/Personnage/Personnage.css
.container {
  max-width: 600px;
  width: 400px;
  margin: 0 auto;
  background-color: #fff;
  color: #000;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.photo {
  text-align: center;
  margin-bottom: 20px;
}

.photo img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.info {
  margin-bottom: 20px;
}

.address {
  font-style: italic;
}