Simple to-do list application using React:
here is a simple to-do list application using React:
import React, { useState } from 'react';
function App() {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
setTodos([...todos, input]);
setInput('');
}
return (
<div>
<form onSubmit={handleSubmit}>
<label>
Add a todo:
<input type="text" value={input} onChange={event => setInput(event.target.value)} />
</label>
<button type="submit">Add</button>
</form>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
</div>
);
}
export default App;
Here is a step-by-step guide to creating a simple to-do list application using React:
First, make sure you have Node.js and the create-react-app package installed. You can do this by running the following command:
npm install -g create-react-app
Next, create a new React project using create-react-app. Navigate to the directory where you want to create your project, and run the following command:
create-react-app todo-app
This will create a new directory called todo-app with a basic React setup.
Next, navigate into the todo-app directory and start the development server by running the following command:
cd todo-app
npm start
This will start the development server and open a new browser window with the React app running.
Now that we have a basic React app set up, let's start building our to-do list. Open the src/App.js file in your text editor and replace the existing code with the following:
import React, { useState } from 'react';
function App() {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
setTodos([...todos, input]);
setInput('');
}
return (
<div>
<form onSubmit={handleSubmit}>
<label>
Add a todo:
<input type="text" value={input} onChange={event => setInput(event.target.value)} />
</label>
<button type="submit">Add</button>
</form>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
</div>
);
}
export default App;
This code creates a simple form that allows the user to enter a new to-do item and adds it to the list when the form is submitted. It also displays the list of to-do items using the map function.
The useState hook is used to create state variables in functional components. The todos state variable is an array of strings that represents the list of to-do items. The input state variable is a string that represents the value of the input field in the form.
The handleSubmit function is called when the form is submitted. It prevents the default form submission behavior and adds the value of the input field to the todos array using the setTodos function. It also clears the input field by setting it to an empty string using the setInput function.
The map function is used to render a li element for each to-do item in the todos array. The key prop is used to uniquely identify each li element, which is necessary for optimizing the rendering of lists in React.
That's it! You now have
No comments:
Post a Comment