Projet de blog React
Ce chapitre vous emmène de zéro, en utilisant Vite pour créer un projet de blog React, et comprendre la syntaxe JSX et la structure du projet.
Configuration de l'environnement
Avant de commencer, assurez-vous que Node.js est installé sur votre ordinateur (v16 ou version ultérieure recommandée).
Node.js est un environnement d'exécution JavaScript, et npm est son gestionnaire de paquets intégré.
Vérifiez si Node.js est installé
$ node -v v20.10.0
Si un numéro de version s'affiche, cela signifie qu'il est installé.
Si ce n'est pas le cas, allez surnodejs.orgTéléchargez la version LTS et installez-la.
Créer un projet React
Vite est l'un des outils de build front-end les plus rapides actuellement, avec un support natif de React.
Dans le terminal, accédez au répertoire où vous souhaitez stocker le projet, et exécutez :
$ npm create vite@latest blog-app -- --template react
Cette commande demande à Vite de créer un projet nommé blog-app en utilisant le modèle React.
Entrez dans le répertoire du projet, installez les dépendances et démarrez le serveur de développement :
$ cd blog-app $ npm install $ npm run dev
Le navigateur ouvrira automatiquement http://localhost:5173. Voir la page d'accueil par défaut de Vite + React signifie que le projet a démarré avec succès.
Si le démarrage signale une erreur concernant des dépendances manquantes, essayez d'exécuter
npm installpuis exécutez à nouveau.
Explication de la structure du répertoire du projet
Ouvrez le dossier blog-app, vous verrez la structure suivante :
blog-app/ ├── index.html # 入口 HTML 文件 ├── package.json # 项目配置与依赖列表 ├── vite.config.js # Vite 构建工具配置 ├── public/ # 不经过编译的静态资源 ├── src/ │ ├── main.jsx # JS 入口，将 React 组件挂载到 DOM │ ├── App.jsx # 根组件，所有页面的外壳 │ ├── App.css # App 组件的样式 │ ├── index.css # 全局样式 │ └── assets/ # 需要编译的静态资源（图片等）
Rôle des fichiers principaux
index.html— Le fichier d'entrée consulté par le navigateur.
Il contient une<div id="root"></div>, et l'application React est montée sur cette div.
src/main.jsx— Le fichier de démarrage de l'application React.
Il est chargé de trouver#rootélément, puiscreateRoothold<App />composant dans lequel effectuer le rendu.
Exemple
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
// Trouver le <div id="root"></div> dans le HTML
// Utiliser createRoot pour créer un nœud racine React, puis effectuer le rendu de <App /> dedans
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Application />
</React.StrictMode>
)
src/App.jsx— Le composant racine.
C'est le conteneur le plus externe de toutes les pages, et le JSX qu'il renvoie sera rendu sur la page.
<React.StrictMode>C'est le Strict Mode de React, actif uniquement en développement. Il effectue des vérifications supplémentaires sur les composants (par ex., double rendu) pour vous aider à trouver des problèmes potentiels. Il est automatiquement ignoré dans les builds de production.
Qu'est-ce que JSX ?
JSXC'est une extension de syntaxe de JavaScript qui vous permet d'écrire du code de type HTML en JS.
Un composant React est essentiellement une fonction qui renvoie du JSX.
Différences clés entre JSX et HTML
| Scénario | HTML | JSX |
|---|---|---|
| attribut class | class="container" | className="container" |
| Balises auto-fermantes | <img src="....html"> | <img src="....html" /> |
| Intégration d’expressions JS | Non pris en charge | <h1>{title}</h1> |
| attribut style | style="color: red" | style={{ color: 'red' }} |
| Commentaires | <!-- comment --> | {/* comment */} |
| Liaison d’événements | onclick="fn()" | onClick={fn} |
Pourquoi utiliser
classNameau lieu declass? Parce que JSX est essentiellement du JavaScript, etclassest un mot-clé réservé en JS. De même,forremplacer parhtmlFor。
Exemple
function Greeting() {
const name = 'EXAMPLE'
const isLoggedIn = true
return (
<div className="greeting">
{/* Commentaire JSX : placez n'importe quelle expression JS entre accolades */}
<h1>Bonjour, {name}!</h1>
<p>Heure actuelle :{new Date().toLocaleDateString()}</p>
{isLoggedIn && <p>Bon retour !</p>}
</div>
)
}
Rappelez-vous la règle essentielle :En JSX, vous pouvez placer n'importe quelle expression JS entre accolades— les variables, les appels de fonction, les opérations ternaires et la méthode map des tableaux fonctionnent tous.
Composants React = Fonctions
L'essence d'un composant fonction React est :Une fonction qui prend des props comme paramètres et retourne un fragment de JSX。
Exemple
// Les noms de composants doivent commencer par une lettre majuscule
function BlogHeader() {
return (
<header>
<h1>Blog EXEMPLE</h1>
</header>
)
}
// Utilisation d'un composant : écrivez-le comme une balise HTML, auto-fermante ou appariée, les deux fonctionnent
function App() {
return (
<div>
<BlogHeader />
<main>
<p>Le contenu du blog sera affiché ici</p>
</main>
</div>
)
}
export default App
Les noms de composants doiventcommencer par une lettre majuscule. Commencer par une lettre minuscule est traité par React comme une balise HTML normale (div, span, etc.), tandis que commencer par une lettre majuscule est traité comme un composant personnalisé.
Mise en pratique : Effacez le modèle et écrivez le squelette du blog
Effacez le contenu des fichiers App.jsx et App.css générés par défaut, et remplacez-les par la structure de base du blog.
Exemple
import './App.css'
function App() {
return (
<div className="app">
{/* Barre de navigation supérieure */}
<header className="navbar">
<h1 className="logo">Blog EXEMPLE</h1>
<nav>
<a href="/">Accueil</a>
<a href="#">À propos</a>
</nav>
</header>
{/* Zone de contenu principale */}
<main className="container">
<p>Le contenu du blog sera affiché ici</p>
</main>
{/* Pied de page */}
<footer className="footer">
<p>© 2024 EXEMPLE Blog. Propulsé par React.</p>
</footer>
</div>
)
}
export default App
Exemple
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f5f5f5;
color: #333;
}
/* Barre de navigation */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 40px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.logo {
font-size: 24px;
color: #61dafb;
}
.navbar nav a {
margin-left: 20px;
text-decoration: none;
color: #333;
}
/* Zone de contenu principale */
.container {
max-width: 960px;
margin: 40px auto;
padding: 0 20px;
}
/* Pied de page */
.footer {
text-align: center;
padding: 20px;
color: #999;
border-top: 1px solid #eee;
}
Après l'enregistrement, le navigateur s'actualisera automatiquement, et vous verrez une structure de blog épurée : barre de navigation en haut + zone de contenu au milieu + pied de page en bas.
Résumé du chapitre
Dans ce chapitre, vous avez accompli trois choses : créé un projet React avec Vite, compris les différences clés entre JSX et HTML, et écrit le squelette JSX de base du blog.
À retenir : un composant React est une fonction qui renvoie du JSX, et en JSX vous pouvez incorporer n'importe quelle expression JS à l'intérieur d'accolades.
Autres extensions