React Tutorial 2024
1.0.0
2024 Votre nouvel outil d'apprentissageReact est une bibliothèque JavaScript pour créer des interfaces utilisateur. Il permet aux développeurs de créer des composants d'interface utilisateur réutilisables et de mettre à jour efficacement le DOM en utilisant un DOM virtuel pour des performances optimales.
Si vous souhaitez créer une nouvelle application ou un nouveau site Web avec React, je vous suggère de choisir l'un des cadres alimentés par React qui sont populaires dans la communauté.
Vous pouvez utiliser React sans cadre, mais nous avons constaté que la plupart des applications et des sites ont finalement besoin de résoudre des problèmes communs comme la division du code, le routage, la récupération des données et la génération de HTML. Ces défis ne sont pas propres à réagir mais sont communs à toutes les bibliothèques de l'interface utilisateur.
En commençant par un framework, vous pouvez rapidement être opérationnel avec React et éviter de développer votre propre cadre plus tard.
Le routeur des pages de next.js est un cadre de réaction complet. Il est polyvalent et vous permet de créer des applications React de toute taille - d'un blog principalement statique à une application dynamique complexe. Pour créer un nouveau projet Next.js, exécutez dans votre terminal:
npx create-next-app@latest
Next.js est maintenu par Vercel. Vous pouvez déployer une application Next.js sur n'importe quel Node.js ou hébergement sans serveur, ou sur votre propre serveur. Next.js prend également en charge une exportation statique qui ne nécessite pas de serveur.
O App Router Do Next.js est une refonte des API suivant.js visant à réaliser la vision d'architecture complète de l'équipe React. Il vous permet de récupérer des données dans des composants asynchrones qui s'exécutent sur le serveur ou même pendant la construction.
Next.js est maintenu par Vercel. Vous pouvez déployer une application Next.js sur n'importe quel Node.js ou hébergement sans serveur, ou sur votre propre serveur. Next.js prend également en charge l'exportation statique qui ne nécessite pas de serveur.
Présentation Vite (Word français pour "Quick", prononcé / vit /, comme "Veet") est un outil de construction qui vise à offrir une expérience de développement plus rapide et plus maigre pour les projets Web modernes. Il se compose de deux parties principales:
Un serveur de développement qui fournit des améliorations de fonctionnalités riches par rapport aux modules ES natifs, par exemple le remplacement du module chaud extrêmement rapide (HMR).
Une commande de construction qui regroupe votre code avec Rollup, préconfiguré pour produire des actifs statiques hautement optimisés pour la production.
Vite est opiniâtre et est livré avec des défauts sensibles de la boîte. Rendez-vous sur ce qui est possible dans le guide des fonctionnalités. La prise en charge des cadres ou l'intégration avec d'autres outils est possible via des plugins. La section Configage explique comment adapter VITE à votre projet si nécessaire.
Avant de commencer, assurez-vous que Node.js soit installé sur votre système. Si vous ne l'avez pas encore, vous pouvez le télécharger sur le site officiel de Node.js, c'est vraiment simple.
npx create-vite your-project-name --template react
Remplacez votre nom-project par le nom que vous souhaitez pour votre projet. VITE prend en charge de nombreux frameworks, mais dans ce cas, nous spécifions le modèle de réaction avec l'option de réaction - template.
cd your-project-name
N'oubliez pas de remplacer votre nom de projection par le nom réel que vous avez choisi pour votre projet (à moins bien sûr, vous voulez garder ce nom pour votre projet).
npm
npm run dev
Après avoir exécuté ces commandes, vous devriez voir un message dans votre terminal indiquant que votre site Web React est exécuté sur un port spécifique, c'est généralement un numéro de port «aléatoire» comme http: // localhost: 5173. Maintenant, ouvrez votre navigateur et visitez l'URL fournie pour voir votre site Web React en action.
Utilisez des outils de développeur React pour inspecter les composants React, modifier les accessoires et l'état et identifier les problèmes de performance.
Extension du navigateur Le moyen le plus simple de déboguer les sites Web construits avec React est d'installer l'extension du navigateur React Developer Tools. Il est disponible pour plusieurs navigateurs populaires:
Pour d'autres navigateurs (par exemple, Safari), installez le package NPM React-Devtools:
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtools
Ouvrez ensuite les outils du développeur du terminal:
react-devtools
Ensuite, connectez votre site Web en ajoutant la balise <cript> suivante au début de votre site Web:
<html>
<head>
<script src="http://localhost:8097"></script>
JSX est une extension de syntaxe pour JavaScript qui ressemble à XML ou HTML. Il permet aux développeurs d'écrire des éléments et des composants HTML d'une manière plus concise et lisible dans les fichiers JavaScript.
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default App;
Les composants fonctionnels sont des fonctions simples qui acceptent les accessoires comme argument et renvoient des éléments JSX. Avec les crochets React, les composants fonctionnels peuvent également avoir des effets d'état et secondaires.
import React from 'react';
const FunctionalComponent = () => {
return <p>This is a functional component.</p>;
}
export default FunctionalComponent;
Les composants de classe sont des classes ES6 qui étendent le composant React. Ils peuvent maintenir et gérer l'état local et avoir accès aux méthodes de cycle de vie, ce qui les rend plus riches en fonctionnalités que les composants fonctionnels.
import React, { Component } from 'react';
class ClassComponent extends Component {
render() {
return <p>This is a class component.</p>;
}
}
export default ClassComponent;
Les accessoires sont un moyen de passer des données d'un composant parent à un composant enfant dans React. Ils sont immuables et fournissent un moyen de rendre les composants dynamiques et réutilisables.
import React from 'react';
const PropsExample = (props) => {
return <p>{props.message}</p>;
}
export default PropsExample;
State React représente l'état changeant d'un composant. Cela permet aux composants de gérer et de mettre à jour leurs propres données, résultant en des interfaces utilisateur dynamiques et interactives.
import React, { Component } from 'react';
class StateExample extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Increment
</button>
</div>
);
}
}
export default StateExample;
Méthodes de cycle de vie São Métodos Especiais Em composants de classe que são invocados em diffases fases do ciclo de vida de um Componente. ComponentDidmount é um método de ciclo de vida comummente utilizado, exécutado depois de um Componente Ser renderizado no Dom.
import React, { Component } from 'react';
class LifecycleExample extends Component {
componentDidMount() {
console.log('Component is mounted!');
}
render() {
return <p>Lifecycle Example</p>;
}
}
export default LifecycleExample;
React utilise Camelcase pour gérer les événements. Les fonctions peuvent être définies pour gérer des événements tels que des clics, des modifications, etc., fournissant une interactivité aux composants.
import React from 'react';
const EventHandlingExample = () => {
const handleClick = () => {
alert('Button clicked!');
}
return (
<button onClick={handleClick}>
Click me
</button>
);
}
export default EventHandlingExample;
Les crochets React sont des fonctions qui permettent aux composants fonctionnels de gérer les effets de l'état et de la partie. Ils ont été introduits dans React 16.8 et fournissent un moyen plus concis de travailler avec les méthodes d'état et de cycle de vie dans des composants fonctionnels.
import React, { useState } from 'react';
const UseStateExample = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}
export default UseStateExample;
Les composants contrôlés de React ont des entrées et leur état contrôlé par React. Ils reçoivent leur valeur actuelle et le gestionnaire d'OnChange comme accessoires, les faisant contrôler par React et non par le DOM.
import React, { useState } from 'react';
const ControlledComponent = () => {
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => {
setInputValue(e.target.value);
}
return (
<input
type="text"
value={inputValue}
onChange={handleChange}
placeholder="Type here"
/>
);
}
export default ControlledComponent;
Les limites d'erreur sont des composants réagis qui détectent les erreurs JavaScript n'importe où dans l'arborescence des composants enfants et enregistrent ces erreurs, présentent une interface utilisateur de secours ou prenez d'autres mesures.
import React, { Component } from 'react';
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToMyService(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <p>Something went wrong.</p>;
}
return this.props.children;
}
}
export default ErrorBoundary;
Les composants d'ordre supérieur (HOC) sont des fonctions qui prennent un composant et renvoient un nouveau composant avec des fonctionnalités supplémentaires. Ils sont un moyen de réutiliser la logique du composant.
import React from 'react';
const WithLogger = (WrappedComponent) => {
return class extends React.Component {
componentDidMount() {
console.log('Component is mounted!');
}
render() {
return <WrappedComponent {...this.props} />;
}
};
}
export default WithLogger;
// Usage
import React from 'react';
import WithLogger from './WithLogger';
const MyComponent = () => {
return <p>My Component</p>;
}
const EnhancedComponent = WithLogger(MyComponent);
React fournit la fonction map pour rendre dynamiquement les listes d'éléments. Chaque élément du tableau est mappé à un élément de réaction, ce qui facilite la facilité de contenu dynamique.
import React from 'react';
const RenderingList = () => {
const items = ['Item 1', 'Item 2', 'Item 3'];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
export default RenderingList;
L'API de contexte dans React offre un moyen de transmettre des données via l'arborescence des composants sans avoir à passer les accessoires manuellement à chaque niveau. Il est utile pour partager des valeurs telles que les thèmes ou l'état d'authentification.
import React from 'react';
const ThemeContext = React.createContext('light');
export default ThemeContext;
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';
const ThemedComponent = () => {
const theme = useContext(ThemeContext);
return <p style={{ color: theme === 'light' ? 'black' : 'white' }}>Themed Component</p>;
}
export default ThemedComponent;
Les clés de React aident à identifier les éléments modifiés, ajoutés ou supprimés. Ils doivent être uniques dans la liste et aider à réagir avec des mises à jour efficaces.
import React from 'react';
const KeysExample = () => {
const data = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
];
return (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
export default KeysExample;
La gestion des formulaires dans React consiste à gérer les données des formulaires à l'aide de l'état et de la soumission des formulaires via des gestionnaires d'événements. Les composants contrôlés sont utilisés pour synchroniser les éléments de forme avec l'état de React.
import React, { useState } from 'react';
const FormExample = () => {
const [formData, setFormData] = useState({ username: '', password: '' });
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
}
const handleSubmit = (e) => {
e.preventDefault();
console.log('Form submitted:', formData);
}
return (
<form onSubmit={handleSubmit}>
<label>
Username:
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
/>
</label>
<label>
Password:
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
/>
</label>
<button type="submit">Submit</button>
</form>
);
}
export default FormExample;
Styles en ligne: React vous permet de styliser des composants à l'aide de styles en ligne, où les styles sont définis comme des objets et appliqués directement aux éléments.
import React from 'react';
const InlineStyleExample = () => {
const styles = {
color: 'blue',
fontSize: '18px',
};
return <p style={styles}>Styled with inline styles</p>;
}
export default InlineStyleExample;
Render les accessoires est une technique de partage du code entre les composants React à l'aide d'un accessoire dont la valeur est une fonction. Cela permet la composition dynamique des composants.
import React, { useState } from 'react';
const MouseTracker = ({ render }) => {
const [position, setPosition] = useState({ x: 0, y: 0 });
const handleMouseMove = (event) => {
setPosition({ x: event.clientX, y: event.clientY });
}
return (
<div style={{ height: '100vh' }} onMouseMove={handleMouseMove}>
{render(position)}
</div>
);
}
export default MouseTracker;
// Usage
import React from 'react';
import MouseTracker from './MouseTracker';
const App = () => {
return (
<MouseTracker
render={(position) => (
<p>
Mouse position: {position.x}, {position.y}
</p>
)}
/>
);
}
export default App;
Les modules CSS aident à définir la portée des styles pour un composant spécifique, en évitant les conflits de style mondial. Chaque composant peut avoir son propre module CSS avec des styles portée localement.
.myComponent {
color: green;
}
import React from 'react';
import styles from './CSSModulesExample.module.css';
const CSSModulesExample = () => {
return <p className={styles.myComponent}>Styled with CSS Modules</p>;
}
export default CSSModulesExample;
Caractéristiques:
import React, { useState } from 'react';
const TodoApp = () => {
const [tasks, setTasks] = useState([]);
const [newTask, setNewTask] = useState('');
const addTask = () => {
setTasks([...tasks, { text: newTask, completed: false }]);
setNewTask('');
};
const toggleTask = (index) => {
const updatedTasks = [...tasks];
updatedTasks[index].completed = !updatedTasks[index].completed;
setTasks(updatedTasks);
};
const removeTask = (index) => {
const updatedTasks = [...tasks];
updatedTasks.splice(index, 1);
setTasks(updatedTasks);
};
return (
<div>
<input
type="text"
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
/>
<button onClick={addTask}>Add Task</button>
<ul>
{tasks.map((task, index) => (
<li key={index}>
<input
type="checkbox"
checked={task.completed}
onChange={() => toggleTask(index)}
/>
<span style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
{task.text}
</span>
<button onClick={() => removeTask(index)}>Remove</button>
</li>
))}
</ul>
</div>
);
};
export default TodoApp;
Cet exemple d'application météorologique illustre l'application pratique des concepts React, y compris la gestion de l'État, l'utilisation d'effet pour les effets secondaires, la manipulation des événements, l'interaction API et le rendu conditionnel. Les utilisateurs peuvent apprendre à créer une application météorologique fonctionnelle et à comprendre l'intégration des crochets React dans les scénarios du monde réel.
Fetaures:
Composant fonctionnel et crochets d'état:
useState pour weather et city .Utilisation d'utilisation d'effet pour obtenir des données:
Les crochets useEffect sont utilisés pour effectuer des effets secondaires, tels que la récupération des données météorologiques de l'API OpenWeathermap.
La fonction fetchWeatherData est asynchrone et récupère les données météorologiques basées sur la ville sélectionnée à l'aide de l'API fetch .
Rendu conditionnel:
Les données météorologiques sont rendues conditionnellement uniquement si elles existent ( weather && ... ).
Gestion des événements:
setCity est appelée sur son événement onChange .Interaction API:
Mise à jour de contenu dynamiquement:
Style:
Conversion de température:
// src/RealWorldExamples/WeatherApp.js
import React, { useState, useEffect } from 'react';
const WeatherApp = () => {
const [weather, setWeather] = useState(null);
const [city, setCity] = useState('New York');
const apiKey = 'YOUR_OPENWEATHERMAP_API_KEY';
useEffect(() => {
// Fetch weather data from OpenWeatherMap API
const fetchWeatherData = async () => {
try {
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`
);
if (!response.ok) {
throw new Error('Failed to fetch weather data');
}
const data = await response.json();
setWeather(data);
} catch (error) {
console.error(error.message);
}
};
fetchWeatherData();
}, [city, apiKey]);
return (
<div>
<h1>Weather App</h1>
<label>
Enter City:
<input
type="text"
value={city}
onChange={(e) => setCity(e.target.value)}
/>
</label>
{weather && (
<div>
<h2>{weather.name}, {weather.sys.country}</h2>
<p>Temperature: {Math.round(weather.main.temp - 273.15)}°C</p>
<p>Weather: {weather.weather[0].description}</p>
</div>
)}
</div>
);
};
export default WeatherApp;
Meilleures pratiques:
/src
/components
/Button
Button.js
Button.test.js
Button.css
/features
/Todo
TodoList.js
TodoItem.js
TodoForm.js
/styles
global.css
/tests
/unit
Button.test.js
/integration
TodoIntegration.test.js
Meilleures pratiques:
// Using React.memo
const MemoizedComponent = React.memo(({ data }) => {
// Component logic
});
// Using Code Splitting and Lazy Loading
const MyComponent = React.lazy(() => import('./MyComponent'));
// In your component
const App = () => (
<React.Suspense fallback={<LoadingSpinner />}>
<MyComponent />
</React.Suspense>
);
Meilleures pratiques:
Exemple:
// Jest Unit Test
test('renders correctly', () => {
const { getByText } = render(<Button label="Click me" />);
expect(getByText('Click me')).toBeInTheDocument();
});
// Jest Integration Test
test('increments count on button click', () => {
const { getByText } = render(<Counter />);
fireEvent.click(getByText('Increment'));
expect(getByText('Count: 1')).toBeInTheDocument();
});
// React Testing Library
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
test('clicking button increments count', () => {
render(<MyComponent />);
userEvent.click(screen.getByRole('button'));
expect(screen.getByText('Count: 1')).toBeInTheDocument();
});
Meilleures pratiques:
Utilisez le routeur React pour le routage côté client dans une application à une seule page.
Définissez les voies vers différentes vues ou sections de votre application.
Implémentez les composants de navigation, tels que <Link> , pour permettre une navigation facile entre les itinéraires.
Exemple:
// React Router
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const App = () => (
<Router>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Router>
);
Meilleures pratiques:
// Using Local Component State
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
// Using Context API
const ThemeContext = React.createContext('light');
const ThemedComponent = () => {
const theme = useContext(ThemeContext);
return <p style={{ color: theme === 'light' ? 'black' : 'white' }}>Themed Component</p>;
};
// Using Redux
// (Assuming you have a Redux store configured)
import { useSelector, useDispatch } from 'react-redux';
const CounterRedux = () => {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
return (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
</div>
);
};
Meilleures pratiques:
Exemple:
Meilleures pratiques:
Exemple:
// Error Boundary
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToService(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <p>Something went wrong. Please try again.</p>;
}
return this.props.children;
}
}
Meilleures pratiques:
Exemple:
// Semantic HTML Elements
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
// ARIA Roles and Attributes
<button aria-label="Close" onClick={handleClose}>
✕
</button>
// Keyboard Navigation
<input type="text" onKeyDown={handleKeyDown} />
Meilleures pratiques:
Exemple:
// Using React.memo
const MemoizedComponent = React.memo(({ data }) => {
// Component logic
});
// Using Code Splitting and Lazy Loading
const MyComponent = React.lazy(() => import('./MyComponent'));
// In your component
const App = () => (
<React.Suspense fallback={<LoadingSpinner />}>
<MyComponent />
</React.Suspense>
);
// Using PureComponent
class PureCounter extends React.PureComponent {
render() {
return <p>Count: {this.props.count}</p>;
}
Mettre à jour régulièrement les dépendances pour bénéficier de nouvelles fonctionnalités, de corrections de bogues et de correctifs de sécurité.
Suivez les versioning sémantique pour les bibliothèques et les packages utilisés dans le projet.
Soyez prudent avec les mises à jour majeures et testez soigneusement avant la mise à jour.
Exemple:
# Regularly update dependencies
npm update
# Follow semantic versioning
# Example: Major.Minor.Patch
# ^1.2.3 means any version that is compatible with 1.2.3
Configurer WebPack pour les versions de production avec des optimisations:
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
// Other webpack configurations...
};
Merci de votre intérêt à contribuer à ce tutoriel React incroyable! Vos contributions aident à rendre cette ressource encore plus précieuse pour les étudiants de tous niveaux. Que vous corrigez un bogue, améliorez une fonctionnalité existante ou ajoutez quelque chose de complètement nouveau, vos efforts font la différence.
** Fork le référentiel: cliquez sur le bouton "Fork" dans le coin supérieur droit de ce référentiel pour créer votre copie.
** Clone le référentiel: clone le référentiel de votre machine locale à l'aide git clone https://github.com/DaveSimoes/React-Tutorial-2024.git
** Créez une branche: Créez une nouvelle branche pour votre contribution avec un nom descriptif: git checkout -b your-feature .
** Faire des modifications: apportez vos modifications dans les fichiers appropriés. N'hésitez pas à améliorer les exemples existants, à en ajouter de nouveaux, à corriger les fautes de frappe ou à améliorer la documentation.
** Commissez les modifications: soumettez vos modifications avec un message clair et concis: git commit -m "Your message here" .
** Push Modifications: Envoyez vos modifications au référentiel fourchu: git push origin your-feature .
Créez une demande de traction: ouvrez une demande de traction dans le référentiel d'origine. Forneça um título Claro, descreva suas alterações e envie o till demande.
Suivez les styles de codage cohérents. Assurez-vous que votre code est bien documenté, surtout si vous ajoutez de nouveaux exemples ou fonctionnalités.
Merci d'avoir envisagé de contribuer à ce tutoriel React. Votre dévouement à améliorer cette ressource est grandement apprécié. Apprenons et grandissons ensemble!
Si vous avez trouvé ce tutoriel React utile, pensez à lui donner une étoile! Votre soutien est incroyablement motivant et aide les autres à découvrir cette ressource. Merci d'avoir fait partie de notre communauté et de notre hap!
React Bibliothèque officielle
