React Tutorial 2024
1.0.0
2024 Ihr neuestes LernwerkzeugReact ist eine JavaScript -Bibliothek zum Erstellen von Benutzeroberflächen. Es ermöglicht Entwicklern, wiederverwendbare UI -Komponenten zu erstellen und das DOM effizient zu aktualisieren, indem ein virtuelles DOM für eine optimale Leistung verwendet wird.
Wenn Sie eine neue App oder Website vollständig mit React erstellen möchten, schlage ich vor, eines der in der Community beliebten React-gestützten Frameworks auszuwählen.
Sie können React ohne Framework verwenden, aber wir haben festgestellt, dass die meisten Apps und Websites letztendlich gemeinsame Probleme wie Codeaufteilung, Routing, Datenabrufen und HTML -Erzeugung angehen müssen. Diese Herausforderungen sind nicht nur für Reaktionen, sondern für alle UI -Bibliotheken gemeinsam.
Wenn Sie mit einem Framework beginnen, können Sie schnell mit React in Betrieb nehmen und vermeiden, dass Sie Ihr eigenes Rahmen später entwickeln müssen.
Next.js 'Pages Router ist ein Full-Stack-React-Framework. Es ist vielseitig und erstellt React -Apps jeder Größe - von einem meist statischen Blog bis zu einer komplexen dynamischen Anwendung. Um ein neues Next.js -Projekt zu erstellen, laufen Sie in Ihrem Terminal:
npx create-next-app@latest
Next.js wird von Vercel aufrechterhalten. Sie können eine Next.js -App für einen beliebigen node.js oder serverlosen Hosting oder auf Ihrem eigenen Server bereitstellen. Next.js unterstützt auch einen statischen Export, für den kein Server erforderlich ist.
O App Router do Next.js ist eine Neugestaltung der nächsten.js-APIs, die darauf abzielt, die Vision der Architektur des React-Teams zu erfüllen. Sie können Daten in asynchronen Komponenten abrufen, die auf dem Server oder sogar während des Builds ausgeführt werden.
Next.js wird von Vercel aufrechterhalten. Sie können eine Next.js -App für einen beliebigen node.js oder serverlosen Hosting oder auf Ihrem eigenen Server bereitstellen. Next.js unterstützt auch den statischen Export, für den kein Server erforderlich ist.
Übersicht Vite (französisches Wort für "Quick", ausgesprochen /vit /wie "veet") ist ein Build -Tool, mit dem ein schnelleres und schlankigeres Entwicklungserlebnis für moderne Webprojekte bereitgestellt werden soll. Es besteht aus zwei Hauptteilen:
Ein Dev -Server, der umfangreiche Feature -Verbesserungen gegenüber nativen ES -Modulen bietet, beispielsweise extrem schneller Hot -Modul -Austausch (HMR).
Ein Build-Befehl, der Ihren Code mit Rollup bündelt, das vorkonfiguriert ist, um hoch optimierte statische Vermögenswerte für die Produktion auszugeben.
Vite ist eins Meinung und verfügt über sinnvolle Standardeinstellungen aus dem Box. Lesen Sie, was im Features Guide möglich ist. Die Unterstützung für Frameworks oder Integration mit anderen Tools ist durch Plugins möglich. Der Konfigurationsabschnitt erläutert, wie Sie bei Bedarf vite an Ihr Projekt anpassen.
Stellen Sie vor Beginn sicher, dass Sie über Node.js auf Ihrem System installiert sind. Wenn Sie es noch nicht haben, können Sie es von der offiziellen Node.js -Website herunterladen, es ist wirklich einfach.
npx create-vite your-project-name --template react
Ersetzen Sie Ihren Projektnamen durch den gewünschten Namen für Ihr Projekt. Vite unterstützt viele Frameworks, aber in diesem Fall geben wir die React -Vorlage mit der Option „Template React“ an.
cd your-project-name
Vergessen Sie nicht, Ihren Projektnamen durch den tatsächlichen Namen zu ersetzen, den Sie für Ihr Projekt ausgewählt haben (es sei denn, Sie möchten diesen Namen für Ihr Projekt beibehalten).
npm
npm run dev
Nachdem Sie diese Befehle ausgeführt haben, sollten Sie eine Nachricht in Ihrem Terminal sehen, die angibt, dass Ihre React -Website auf einem bestimmten Port ausgeführt wird. Es handelt sich normalerweise um eine "zufällige" Portnummer wie http: // localhost: 5173. Öffnen Sie nun Ihren Browser und besuchen Sie die bereitgestellte URL, um Ihre React -Website in Aktion zu sehen.
Verwenden Sie React -Entwickler -Tools, um React -Komponenten zu inspizieren, Requisiten und Zustand zu bearbeiten und Leistungsprobleme zu identifizieren.
Die Browser -Erweiterung Die mit React erstellte Methode zur Debugg -Websites besteht darin, die Browsererweiterung von React Decess Developer Tools zu installieren. Es ist für mehrere beliebte Browser erhältlich:
Installieren Sie für andere Browser (zum Beispiel Safari) das React-Devtools NPM-Paket:
# Yarn
yarn global add react-devtools
# Npm
npm install -g react-devtools
Öffnen Sie als nächstes die Entwicklerwerkzeuge vom Terminal aus:
react-devtools
Schließen Sie Ihre Website an, indem Sie das folgende <Script> -Tag zum Beginn Ihrer Website hinzufügen:
<html>
<head>
<script src="http://localhost:8097"></script>
JSX ist eine Syntax -Erweiterung für JavaScript, die XML oder HTML ähnelt. Es ermöglicht den Entwicklern, HTML -Elemente und -Komponenten in jahrhunderlichen Weise in JavaScript -Dateien zu schreiben.
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default App;
Funktionale Komponenten sind einfache Funktionen, die Requisiten als Argument akzeptieren und JSX -Elemente zurückgeben. Bei React -Hooks können funktionelle Komponenten auch Zustand und Nebenwirkungen haben.
import React from 'react';
const FunctionalComponent = () => {
return <p>This is a functional component.</p>;
}
export default FunctionalComponent;
Klassenkomponenten sind ES6 -Klassen, die die React -Komponente erweitern. Sie können den lokalen Zustand pflegen und verwalten und Zugriff auf Lebenszyklusmethoden haben, wodurch sie reichenreiche als funktionale Komponenten sind.
import React, { Component } from 'react';
class ClassComponent extends Component {
render() {
return <p>This is a class component.</p>;
}
}
export default ClassComponent;
Requisiten sind eine Möglichkeit, Daten von einer übergeordneten Komponente an eine untergeordnete Komponente in React zu übergeben. Sie sind unveränderlich und bieten eine Möglichkeit, Komponenten dynamisch und wiederverwendbar zu machen.
import React from 'react';
const PropsExample = (props) => {
return <p>{props.message}</p>;
}
export default PropsExample;
Status React repräsentiert den sich ändernden Zustand einer Komponente. Auf diese Weise können Komponenten ihre eigenen Daten verwalten und aktualisieren, was zu dynamischen und interaktiven Benutzeroberflächen führt.
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;
Lebenszyklusmethoden São Métodos Especiais em componentes de classe que são invocados em tiferentes fasen do ciclo de vida de um componente. componentDidmount é um método de ciclo de vida comummente utilizado, Executado 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 verwendet Camelcase, um Ereignisse zu verarbeiten. Funktionen können definiert werden, um Ereignisse wie Klicks, Änderungen usw. zu verarbeiten und die Komponenten Interaktivität zu bieten.
import React from 'react';
const EventHandlingExample = () => {
const handleClick = () => {
alert('Button clicked!');
}
return (
<button onClick={handleClick}>
Click me
</button>
);
}
export default EventHandlingExample;
React -Hooks sind Funktionen, mit denen funktionale Komponenten Status und Nebenwirkungen verwalten können. Sie wurden in React 16.8 eingeführt und bieten eine prägnantere Methode, um mit Zustands- und Lebenszyklusmethoden in funktionellen Komponenten zu arbeiten.
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;
Kontrollierte Komponenten in React haben Eingänge und ihren Zustand, der von React gesteuert wird. Sie erhalten ihren aktuellen Wert und den Onchange -Handler als Requisiten, wodurch sie von React und nicht durch das DOM gesteuert werden.
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;
Fehlergrenzen sind reagierte Komponenten, die JavaScript -Fehler überall im untergeordneten Komponentenbaum erkennen und diese Fehler protokollieren, eine Fallback -Benutzeroberfläche vorlegen oder andere Maßnahmen ergreifen.
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;
Komponenten höherer Ordnung (HOCs) sind Funktionen, die eine Komponente übernehmen und eine neue Komponente mit zusätzlichen Funktionen zurückgeben. Sie sind eine Möglichkeit, die Logik der Komponente wiederzuverwenden.
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 bietet die map , um Listen von Elementen dynamisch zu rendern. Jedes Element im Array wird einem React -Element zugeordnet, wodurch dynamische Inhalte leichter rendern.
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;
Die Kontext -API in React bietet eine Möglichkeit, Daten über den Komponentenbaum zu übertragen, ohne Requisiten auf jeder Ebene manuell übergeben zu müssen. Es ist nützlich, um Werte wie Themen oder Authentifizierungsstatus zu teilen.
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;
Schlüssel in React ermitteln, welche Elemente geändert, hinzugefügt oder entfernt wurden. Sie sollten in der Liste eindeutig sein und helfen, mit effizienten Aktualisierungen zu reagieren.
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;
Die Handhabungsformulare in React beinhalten die Verwaltung von Formdaten unter Verwendung von Status- und Handhabungsformulareinreichungen über Ereignishandler. Controllierte Komponenten werden verwendet, um Formelemente mit Reacts Zustand zu synchronisieren.
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;
Inline -Stile: React ermöglicht es Ihnen, Komponenten mithilfe von Inline -Stilen zu stylen, bei denen Stile als Objekte definiert und direkt auf Elemente angewendet werden.
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 Props ist eine Technik, um Code zwischen React -Komponenten mithilfe eines Requisits zu teilen, dessen Wert eine Funktion ist. Dies ermöglicht die dynamische Zusammensetzung von Komponenten.
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;
CSS -Module definieren den Umfang der Stile für eine bestimmte Komponente und vermeiden globale Konflikte im Stil. Jede Komponente kann ein eigenes CSS -Modul mit lokal geschobenen Stilen haben.
.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;
Merkmale:
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;
In diesem Beispiel für Wetteranwendungen wird die praktische Anwendung von ReACT -Konzepten dargestellt, einschließlich des Zustandsmanagements, der Verwendung von Nebenwirkungen, Ereignisbearbeitung, API -Interaktion und bedingten Rendering. Benutzer können lernen, wie Sie eine funktionale Wetteranwendung erstellen und die Integration von React-Hooks in reale Szenarien verstehen.
Fetaise:
Funktionale Komponenten und Zustandshaken:
useState -Haken für weather und city kontrolliert.Verwenden Sie die Verwendung von UseEffect, um Daten zu erhalten:
Die useEffect -Hooks werden verwendet, um Nebenwirkungen durchzuführen, z. B. Wetterdaten aus der OpenWeatherMap -API.
Die fetchWeatherData -Funktion ist asynchron und Abrufdaten basierend auf der ausgewählten Stadt mit der fetch -API.
Bedingte Rendering:
Die Wetterdaten werden nur dann bedingt gemacht, wenn sie existiert ( weather && ... ).
Ereignishandhabung:
setCity -Funktion wird auf dem onChange -Ereignis aufgerufen.API -Interaktion:
Dynamisch Aktualisierung von Inhalten:
Styling:
Temperaturumwandlung:
// 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;
Best Practices:
/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
Best Practices:
// 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>
);
Best Practices:
Beispiel:
// 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();
});
Best Practices:
Verwenden Sie React Router für das clientseitige Routing in einer einseitigen Anwendung.
Definieren Sie Routen zu verschiedenen Ansichten oder Abschnitten Ihrer Bewerbung.
Implementieren Sie Navigationskomponenten wie <Link> , um eine einfache Navigation zwischen den Routen zu ermöglichen.
Beispiel:
// 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>
);
Beste Practice:
// 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>
);
};
Best Practices:
Beispiel:
Best Practices:
Beispiel:
// 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;
}
}
Best Practices:
Beispiel:
// 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} />
Best Practices:
Beispiel:
// 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>;
}
Aktualisieren Sie regelmäßig Abhängigkeiten, um von neuen Funktionen, Fehlerbehebungen und Sicherheitspatches zu profitieren.
Befolgen Sie die Semantic Versioning für Bibliotheken und Pakete, die im Projekt verwendet werden.
Seien Sie vorsichtig mit wichtigen Updates und testen Sie gründlich, bevor Sie aktualisieren.
Beispiel:
# 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
Konfigurieren Sie Webpack für Produktionsbaufe mit Optimierungen:
// 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...
};
Vielen Dank für Ihr Interesse, zu diesem erstaunlichen React -Tutorial beizutragen! Ihre Beiträge helfen, diese Ressource für Schüler aller Ebenen noch wertvoller zu machen. Egal, ob Sie einen Fehler beheben, eine vorhandene Funktion verbessern oder etwas völlig Neues hinzufügen, Ihre Bemühungen machen einen Unterschied.
** Fork Das Repository: Klicken Sie in der oberen rechten Ecke dieses Repositorys auf die Schaltfläche "Fork", um Ihre Kopie zu erstellen.
** Klonen Sie das Repository: Klonen Sie das Repository mit git clone https://github.com/DaveSimoes/React-Tutorial-2024.git
** Erstellen Sie einen Zweig: Erstellen Sie einen neuen Zweig für Ihren Beitrag mit einem beschreibenden Namen: git checkout -b your-feature .
** Änderungen vornehmen: Nehmen Sie Ihre Änderungen in den entsprechenden Dateien vor. Fühlen Sie sich frei, vorhandene Beispiele zu verbessern, neue hinzuzufügen, Tippfehler zu korrigieren oder die Dokumentation zu verbessern.
** Änderungen des Festschaffens: Senden Sie Ihre Änderungen mit einer klaren und prägnanten Nachricht: git commit -m "Your message here" .
** Push-Änderungen: Senden Sie Ihre Änderungen an das Forked Repository: git push origin your-feature .
Erstellen Sie eine Pull -Anfrage: Öffnen Sie eine Pull -Anfrage im ursprünglichen Repository. Forneça um Título Claro, Descreva Suas Alterações E Envie O Anfrage.
Folgen Sie konsistenten Codierungsstilen. Stellen Sie sicher, dass Ihr Code gut dokumentiert ist, insbesondere wenn Sie neue Beispiele oder Funktionen hinzufügen.
Vielen Dank, dass Sie überlegt haben, zu diesem React -Tutorial beizutragen. Ihr Engagement, diese Ressource besser zu machen, wird sehr geschätzt. Lass uns lernen und zusammenwachsen!
Wenn Sie dieses React -Tutorial als nützlich empfanden, sollten Sie ihm einen Stern geben! Ihre Unterstützung ist unglaublich motivierend und hilft anderen, diese Ressource zu entdecken. Vielen Dank, dass Sie Teil unserer Community und HAP sind!
Offizielle Bibliothek reagieren
