Bausteine einer React-Anwendung:
Hooks = besondere Funktionen, die in einer Komponentenfunktion aufgerufen werden können
Beispiele:
useStateuseEffect: zum Auslösen von Side Effects, wie z.B. API-AnfragenuseQuery: für eine einfachere Möglichkeit, APIs anzufragenuseTodos: eigener Hook zum Verwalten einer Liste von Todosin einer Komponentendefinition:
Hooks müssen bei jedem Rendering in der gleichen Reihenfolge aufgerufen werden
(React verwendet die Reihenfolge, um den "gleichen" Hook-Aufruf über mehrere Renderings zu verfolgen)
Beispiele für Komponenten und Hooks aus Libraries:
<Button>, <Alert>, ...<Route>, <Link>, useParams, useNavigateuseQueryuseForm<Suspense>, useEffect, useContext, ...Listen verfügbarer Komponenten und Hooks:
awesome-react-components: Liste von Komponenten, ...
awesome-react-hooks: liste von Hooks
Zwecke:
Beispiele für Komponenten zur Wiederverwendung (innerhalb eines Projektes oder über Projekte hinweg):
Button (zum Styling)CalendarProgressBarBeispiel für Komponenten zur Strukturierung von Code:
TodoAppTodoListTodoItemBeispiele für eigene Hooks:
in einer Todo-Anwendung: useTodos
in einem Online-Shop: useProducts, useCart
eigene Komponenten und eigener Hook für eine Todo-Anwendung:
function TodoApp() {
const todoData = useTodos();
return (
<div>
<Header />
<AddTodo onAdd={todoData.addTodo} />
<TodoList
todos={todoData.todos}
onDelete={todoData.deleteTodo}
onCompletedChange={todoData.setCompleted}
/>
<Statistics todos={todoData.todos} />
</div>
);
}