{"id":250718,"date":"2024-09-26T03:00:23","date_gmt":"2024-09-26T10:00:23","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/visualstudio\/?p=250718"},"modified":"2024-09-30T16:55:32","modified_gmt":"2024-09-30T23:55:32","slug":"creating-a-react-todo-app-in-visual-studio-2022","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/creating-a-react-todo-app-in-visual-studio-2022\/","title":{"rendered":"Creating a React TODO app in Visual Studio 2022"},"content":{"rendered":"

In this tutorial we will create a React front-end, with JavaScript, of a TODO web app using a Visual Studio 2022. To get started install Visual Studio<\/a> with the Node.js development workload. This will include the JavaScript\/TypeScript (JSTS) projects<\/a> and the associated support. The code for this app can be found at sayedihashimi\/todojswebapp (github.com)<\/a>. Create a new React project using the New Project Dialog in Visual Studio 2022. Use File > New > Project \u2026<\/em> to open that dialog. For this tutorial select the React App JavaScript template which is shown below.<\/p>\n

\"Image<\/p>\n

After clicking Next, give the project the name TodoWebApp<\/em> and click Create. This will create the JavaScript project using the vite command line tool<\/a>. Now create a new component to encapsulate the todo list functionality. First create a new folder named components<\/code> under the src<\/code> folder. This is the folder where all components will go. It\u2019s a common convention to place components in a components<\/em> folder, but this is not required. Right click on this new folder and select Add > React JSX Component File<\/em>, give it the name TodoList<\/em> as shown in the following image.<\/p>\n

\"Image<\/p>\n

This will create a new jsx file in the components folder. For now, replace the Hello World content with the h2 as shown in the snippet below.<\/p>\n

function TodoList() {\r\n    return (\r\n        <h2>TODO app contents<\/h2>\r\n    );\r\n}<\/code><\/pre>\n
This component displays a header for now. We will replace this soon. Let\u2019s wire up this component in the app and then later replace the contents with the desired functionality. Let\u2019s add this component to the app and remove the boilerplate content that is no longer needed.<\/p>\n
Open the App.jsx file. This is the main component that is loaded which represents the todo application. This is used in the main.jsx file. In App.jsx, remove all the imports from the top and clear out the contents of the return statement. The file should look like the snippet below.<\/p>\n
function App() {\r\n    return (\r\n\r\n    )\r\n}\r\n\r\nexport default App<\/code><\/pre>\n
To add the TodoList component, place your cursor inside the fragment and then type <TodoL RETURN. This will add the component and the import statement. You can see this in the below animation.<\/p>\n
\"Gif<\/p>\n
Now let\u2019s clear out the CSS files so that we can start with a fresh start. Open the App.css file and delete all the contents. In the Index.css<\/em> file remove all contents except the styles for :root. The Index.css<\/em> file should look like the following.<\/p>\n
:root {\r\n    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\r\n    line-height: 1.5;\r\n    font-weight: 400;\r\n    color-scheme: light dark;\r\n    color: rgba(255, 255, 255, 0.87);\r\n    background-color: #242424;\r\n}<\/code><\/pre>\n
Now run the app to ensure that everything is working as expected. You can use the Start Debugging button from the toolbar or the F5 keyboard shortcut. After that a browser window should open with the following content.<\/p>\n
\"Image<\/p>\n
This would be a good time to create a commit in case you need to roll back to a good state later. Now that you\u2019ve started the app you can leave it running, as you make changes the app will automatically refresh with the latest content using the Hot Module Replacement support. Some actions like adding folders or renaming files will require that you stop debugging and then restart it but in general you can leave it running in the background as you develop your app. Open the TodoList.jsx component so that we can start to define that.<\/p>\n
In TodoList.jsx first add the UI needed to show and manage todo entries and then hook it up to store the values after that. Update TodoList.jsx to have the following content.<\/p>\n
function TodoList() {\r\n    return (\r\n        <div>\r\n            <h1>TODO<\/h1>\r\n            <div>\r\n                <input\r\n                    type=\"text\"\r\n                    placeholder=\"Enter a task\"\r\n                    required\r\n                    aria-label=\"Task text\" \/>\r\n                <button className=\"add-button\" aria-label=\"Add task\" >\r\n                    Add\r\n                <\/button>\r\n            <\/div>\r\n            <ol id=\"todo-list\">\r\n                <p>existing tasks will be shown here<\/p>\r\n            <\/ol>\r\n        <\/div>\r\n    );\r\n}\r\n\r\nexport default TodoList;<\/code><\/pre>\n
We have added an input box for the todo item as well as a button to submit that. The existing tasks will be displayed under the input and button, but we will get to that soon. Now that we have the input field to get a new task added, we will wire up the Add button. We will use the useState<\/a> React hook to add two state variables, one for the task which is getting added and another to store the existing tasks. For this tutorial the tasks will be stored in memory we will not add a database for persistent storage. Add the following import statement to TodoList.jsx to import useState.<\/p>\n
import { useState } from 'react'<\/code><\/p>\n
Now we can use that hook to create the state variables. Add the following code in the TodoList function above the return statement.<\/p>\n
const [tasks, setTasks] = useState([\r\n    \"Drink some coffee\",\r\n    \"Create a TODO app\",\r\n    \"Drink some more coffee\"]);\r\n\r\nconst [newTaskText, setNewTaskText] = useState(\"\");<\/code><\/pre>\n
This will setup two variables, tasks<\/code> and newTaskText<\/code>, for the data and two functions that you can call to update those variables, setTasks<\/code> and setNewTasks<\/code>. When a value for a state variable is changed React will automatically re-render the component. We are almost ready to update TodoList.jsx to show the todo items as a list, but there is an important React concept that we must explain before doing so.<\/p>\n
In React when you display a list of items you will need to add a key to uniquely identify each item in the list. This is explained in depth in the React docs at Rendering Lists<\/a>, but we will cover what is needed for this tutorial. We have a list of todo items that we want to display, and we need to associate a unique key for each item, the key for each item should not change. Since the key for each item should not change, we cannot use the index of the item in the array as the key. We need an id which will not change through out the lifetime of those values. We will use randomUUID()<\/a> to create a unique id for each todo item.<\/p>\n
Now let\u2019s create TodoList.jsx using a uuid as the key for each todo item. Update TodoList.jsx to contain the following code.<\/p>\n
import React, { useState } from 'react';\r\n\r\nconst initialTasks = [\r\n    { id: self.crypto.randomUUID(), text: 'Drink some coffee' },\r\n    { id: self.crypto.randomUUID(), text: 'Create a TODO app' },\r\n    { id: self.crypto.randomUUID(), text: 'Drink some more coffee' }\r\n];\r\n\r\nfunction TodoList() {\r\n    const [tasks, setTasks] = useState(initialTasks);\r\n    const [newTaskText, setNewTaskText] = useState(\"\");\r\n\r\n    return (\r\n        <article\r\n            className=\"todo-list\"\r\n            aria-label=\"task list manager\">\r\n            <header>\r\n                <h1>TODO<\/h1>\r\n                <form className=\"todo-input\" aria-controls=\"todo-list\">\r\n                    <input\r\n                        type=\"text\"\r\n                        placeholder=\"Enter a task\"\r\n                        value={newTaskText} \/>\r\n                    <button\r\n                        className=\"add-button\">\r\n                        Add\r\n                    <\/button>\r\n                <\/form>\r\n            <\/header>\r\n            <ol id=\"todo-list\" aria-live=\"polite\" aria-label=\"task list\">\r\n                {tasks.map((task, index) =>\r\n                    <li key={task.id}>\r\n                        <span className=\"text\">{task.text}<\/span>\r\n                    <\/li>\r\n                )}\r\n            <\/ol>\r\n        <\/article>\r\n    );\r\n}\r\nexport default TodoList;<\/code><\/pre>\n
Since the id values are assigned outside the TodoList function, we can be sure the values will not change if the page is rerendered. When you try the app in this state, you will notice that you cannot type into the todo input element. This is because the input element is bound to newTaskText<\/code> which has been initialized to a blank string. To allow users to add new tasks, we will need to handle the onChange<\/code> event on that control. We also need to implement the Add button support. Add the functions immediately above the return statement in the TodoList function.<\/p>\n
function handleInputChange(event) {\r\n    setNewTaskText(event.target.value);\r\n}\r\n\r\nfunction addTask() {\r\n    if (newTaskText.trim() !== \"\") {\r\n        setTasks(t => [...t, { id: self.crypto.randomUUID(), text: newTaskText }]);\r\n        setNewTaskText(\"\");\r\n    }\r\n    event.preventDefault();\r\n}<\/code><\/pre>\n
In the handleInputChanged<\/code> function, the new value from the input field is passed in via event.target.value<\/code> and that is used to update the value for the newTaskText<\/code> variable with setNewTaskText<\/code>. In the addTask<\/code> function we add the new task to the list of existing tasks using setTasks<\/code> and we set the id of the item as a new uuid value. Update the input element to include onChange={handleInputChange}<\/code> and update the Add button to include onClick={addTask}<\/code>. This will wire up the event to the function that handles that event. Following this you should be able to add a new task to the task list. New tasks are added to the bottom of the list. To make this app more useful, we need to add support to delete tasks and to move a task up or down. Let\u2019s get started on that.<\/p>\n
We will add the functions to support delete, move up and move down and then update the markup to show a button for each action. Add the following in the TodoList function above the return statement.<\/p>\n
function deleteTask(id) {\r\n    const updatedTasks = tasks.filter(task => task.id != id);\r\n    setTasks(updatedTasks);\r\n}\r\n\r\nfunction moveTaskUp(index) {\r\n    if (index > 0) {\r\n        const updatedTasks = [...tasks];\r\n        [updatedTasks[index], updatedTasks[index - 1]] = [updatedTasks[index - 1], updatedTasks[index]];\r\n        setTasks(updatedTasks);\r\n    }\r\n}\r\n\r\nfunction moveTaskDown(index) {\r\n    if (index < tasks.length) {\r\n        const updatedTasks = [...tasks];\r\n        [updatedTasks[index], updatedTasks[index + 1]] = [updatedTasks[index + 1], updatedTasks[index]];\r\n        setTasks(updatedTasks);\r\n    }\r\n}<\/code><\/pre>\n
The delete function takes in the task id and deletes that one from the list and uses the Array filter()<\/code><\/a> method to create a new array excluding the selected item and then calls setTasks()<\/code>. The other two functions take in the index of the item since this is specific to the item ordering. Both moveTaskUp()<\/code> and moveTaskDown()<\/code> use array destructuring assignment<\/a> to swap the selected task with its neighbor. Now we will update the view to include these buttons. Update the return statement to contain the following.<\/p>\n
return (\r\n    <article\r\n        className=\"todo-list\"\r\n        aria-label=\"task list manager\">\r\n        <header>\r\n            <h1>TODO<\/h1>\r\n            <form className=\"todo-input\" onSubmit={addTask} aria-controls=\"todo-list\">\r\n                <input\r\n                    type=\"text\"\r\n                    required\r\n                    autoFocus\r\n                    placeholder=\"Enter a task\"\r\n                    value={newTaskText}\r\n                    aria-label=\"Task text\"\r\n                    onChange={handleInputChange} \/>\r\n                <button\r\n                    className=\"add-button\"\r\n                    aria-label=\"Add task\">\r\n                    Add\r\n                <\/button>\r\n            <\/form>\r\n        <\/header>\r\n        <ol id=\"todo-list\" aria-live=\"polite\">\r\n            {tasks.map((task, index) =>\r\n                <li key={task.id}>\r\n                    <span className=\"text\">{task.text}<\/span>\r\n                    <button className=\"delete-button\" onClick={() => deleteTask(task.id)}>\r\n                        \ud83d\uddd1\ufe0f\r\n                    <\/button>\r\n                    <button className=\"up-button\" onClick={() => moveTaskUp(index)}>\r\n                        \u21e7\r\n                    <\/button>\r\n                    <button className=\"down-button\" onClick={() => moveTaskDown(index)}>\r\n                        \u21e9\r\n                    <\/button>\r\n                <\/li>\r\n            )}\r\n        <\/ol>\r\n    <\/article>\r\n);<\/code><\/pre>\n
We have added the buttons needed to perform the tasks we discussed above. We are using Unicode characters as icons on the buttons. In the markup there are some attributes added for when we add some CSS later. You will also notice the use of aria attributes<\/a> to improve accessibility, the are optional but highly recommended. If you run the app it should look like the image below.<\/p>\n
\"Image<\/p>\n
You should now be able to perform the following in the TODO web app.<\/p>\n