Scribd
Importer
35 vues4 pages

Cours React.js avec Vite.js pour Débutants

Ce document présente un cours complet sur l'utilisation de Vite.js pour démarrer un projet React.js, en expliquant ses avantages et ses fonctionnalités. Il fournit des instructions détaillées pour créer un projet, ainsi que des exemples de code pour afficher des messages et gérer des composants avec des props. Enfin, il compare les approches en JavaScript natif et en React pour ajouter des éléments à une liste.

Transféré par

azizhounnous
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
35 vues4 pages

Cours React.js avec Vite.js pour Débutants

Ce document présente un cours complet sur l'utilisation de Vite.js pour démarrer un projet React.js, en expliquant ses avantages et ses fonctionnalités. Il fournit des instructions détaillées pour créer un projet, ainsi que des exemples de code pour afficher des messages et gérer des composants avec des props. Enfin, il compare les approches en JavaScript natif et en React pour ajouter des éléments à une liste.

Transféré par

azizhounnous
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Cours Complet : Démarrer avec [Link] et Vite.

js (Débutant)

1. C'est quoi [Link] ? Pourquoi on l'utilise ?

[Link] est un outil moderne de création de projet front-end rapide, utilisé à la place de Create React App
(CRA). Il est ultra rapide grâce au module ES natif et une configuration simple.

Il sert à :
- Créer un projet React facilement.
- Démarrer rapidement le serveur local (moins d'une seconde).
- Préparer ton site pour être mis en ligne.

Avantages :
- Chargement ultra-rapide.
- Compatible React, Vue, TypeScript, etc.
- Build optimisé avec Rollup.

2. Créer un projet [Link] avec [Link]

Étapes à suivre dans le terminal :

1. Crée le projet :
npm create vite@latest mon-premier-react

2. Choisis :
- Framework : React
- Variante : JavaScript

3. Va dans le projet :
cd mon-premier-react

4. Installe les dépendances :


npm install

5. Lance le serveur :
npm run dev
Cours Complet : Démarrer avec [Link] et [Link] (Débutant)

3. Fichiers importants dans ton projet

- [Link] : point d'entrée HTML.


- [Link] : démarre React.
- [Link] : composant principal de l'application.
- [Link] : configuration du projet.

4. Exemple simple - Afficher Bonjour Sarah

Dans [Link] :

function App() {
return (
<div>
<h1>Bonjour Sarah</h1>
</div>
);
}

export default App;

5. Créer un composant avec des props

[Link] :

function Bienvenue(props) {
return <p>Bienvenue, {[Link]} !</p>;
}

Dans [Link] :

import Bienvenue from './Bienvenue';

function App() {
return (
<div>
Cours Complet : Démarrer avec [Link] et [Link] (Débutant)

<h1>Accueil</h1>
<Bienvenue nom="Sarah" />
<Bienvenue nom="Kevin" />
</div>
);
}

6. Comparatif : JS natif vs React

Projet : ajouter un prénom dans une liste.

HTML/JS natif :
<input id="champ" /><button onclick="ajouter()">Ajouter</button>
<ul id="liste"></ul>

<script>
function ajouter() {
const val = [Link]("champ").value;
const li = [Link]("li");
[Link] = val;
[Link]("liste").appendChild(li);
}
</script>

React version :
import { useState } from 'react';

function App() {
const [valeur, setValeur] = useState("");
const [liste, setListe] = useState([]);

const ajouter = () => {


if ([Link]() === "") return;
setListe([...liste, valeur]);
setValeur("");
};
Cours Complet : Démarrer avec [Link] et [Link] (Débutant)

return (
<div>
<input value={valeur} onChange={(e) => setValeur([Link])} />
<button onClick={ajouter}>Ajouter</button>
<ul>{[Link]((nom, i) => <li key={i}>{nom}</li>)}</ul>
</div>
);
}

export default App;

Vous aimerez peut-être aussi