React is one of the most popular libraries for building modern web applications. This is due to its component-based architecture, reusability, and the ease of managing complex UIs. In this tutorial, we will explore how to supply data to the component tree using React’s Context API and how to refactor it to create a simple Todo application.<\/p>\n
React is a collection of components that make up the user interface. Components have state and props, which determine how the UI is rendered.<\/p>\n
State represents the internal data of a component, which can change based on user input or network requests. On the other hand, props are the data passed from a parent component to a child component.<\/p>\n
A React application is arranged in a tree structure made up of multiple components. This tree structure manages the flow of data from parent to child components.<\/p>\n
The Context API is used in React to pass data to components deeply nested within the component tree. It allows data to be supplied without having to pass props through multiple levels, helping to reduce the complexity of prop drilling.<\/p>\n
To create Context, you first need to use React’s Use the Provider component of the Context to pass data down to child components. The Provider supplies data that can be accessed by all descendant components.<\/p>\n To use Context in a child component, you retrieve the data using the Now, let’s create a simple Todo app using Context API. First, we will set up the basic component structure.<\/p>\n The Todo app consists of the following components.<\/p>\n First, we will write the Then we will write the Finally, we will use State management is a crucial part of React applications. It helps clarify the flow and relationships of data later on. By using the Context API, child components can access the state directly for more efficient management.<\/p>\n There are various patterns for state management. When using it with the Context API, components must be designed to subscribe to it. This minimizes unnecessary re-renders.<\/p>\n Refactoring allows for safely implementing additional features. For instance, let’s add logic to handle the completion status of Todo items.<\/p>\ncreateContext<\/code> function.<\/p>\nimport React, { createContext, useContext, useState } from 'react';\n\nconst MyContext = createContext(); \/\/ Create Context<\/code><\/pre>\n2.2 Provider and Consumer<\/h3>\n
<MyContext.Provider value={\/* context value *\/}>\n {\/* children *\/}\n<\/MyContext.Provider><\/code><\/pre>\n2.3 Using Context<\/h3>\n
useContext<\/code> hook.<\/p>\nconst value = useContext(MyContext); \/\/ Use Context<\/code><\/pre>\n3. Setting Up the Todo App Structure<\/h2>\n
3.1 Basic Component Structure<\/h3>\n
\n
3.2 Writing the App Code<\/h3>\n
TodoProvider<\/code> component to manage the state of the Todo list.<\/p>\nconst TodoProvider = ({ children }) => {\n const [todos, setTodos] = useState([]);\n\n const addTodo = (todo) => {\n setTodos([...todos, todo]);\n };\n\n const removeTodo = (id) => {\n setTodos(todos.filter(todo => todo.id !== id));\n };\n\n return (\n <MyContext.Provider value={{ todos, addTodo, removeTodo }}>\n {children}\n <\/MyContext.Provider>\n );\n};<\/code><\/pre>\nTodoList<\/code> and AddTodo<\/code> components.<\/p>\nconst TodoList = () => {\n const { todos, removeTodo } = useContext(MyContext);\n\n return (\n <ul>\n {todos.map(todo => (\n <TodoItem key={todo.id} todo={todo} onRemove={removeTodo} \/>\n ))}<\/ul>\n );\n};\n\nconst AddTodo = () => {\n const { addTodo } = useContext(MyContext);\n const [inputValue, setInputValue] = useState('');\n\n const handleSubmit = (e) => {\n e.preventDefault();\n if (!inputValue) return;\n \n addTodo({ id: Date.now(), text: inputValue });\n setInputValue('');\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <input \n type=\"text\" \n value={inputValue} \n onChange={(e) => setInputValue(e.target.value)} \n placeholder=\"Enter new Todo\" \n \/>\n <button type=\"submit\">Add<\/button>\n <\/form>\n );\n};<\/code><\/pre>\n3.3 Final App Structure<\/h3>\n
TodoProvider<\/code> in the App<\/code> component to wrap the other components.<\/p>\nconst App = () => {\n return (\n <TodoProvider>\n <h1>Todo List<\/h1>\n <AddTodo \/>\n <TodoList \/>\n <\/TodoProvider>\n );\n};<\/code><\/pre>\n4. State Management and Refactoring<\/h2>\n
4.1 State Management Patterns<\/h3>\n
4.2 Example of Refactoring<\/h3>\n
const toggleTodo = (id) => {\n setTodos(todos.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo));\n};<\/code><\/pre>\n4.3 Visualizing Completed Todo Items<\/h3>\n