Basics of React - Part II
Raghu Teja builds a to-do list app in React to teach state management, dynamic list rendering, and handling user input from scratch.
After covering what React is and building a simple counter, the natural next step is a project that forces you to manage more than one piece of state at a time. This second installment of the Basics of React series does exactly that, building a to-do list application from an empty project to a working app that lets you add tasks and see them rendered instantly on screen.
Why a to-do list
A to-do list app is a classic learning project because it packs several essential React concepts into one small build: state management, handling user input, and dynamic list rendering. Rather than introducing these ideas separately, building the app forces all three to work together, which is the point of choosing this project as the follow-up to the earlier counter example.
Setting up the project
The build starts the same way any React project does, with npx create-react-app and naming the project "todo-list." Once the scaffolding finishes, the tutorial clears out the default boilerplate in App.js to start from a blank slate, then starts the development server early with npm start so that changes are visible as they happen. Along the way, the video walks through a genuinely common beginner mistake: running npm start from the wrong directory, one that doesn't actually contain the project's package.json or node_modules, which produces an error that looks alarming but is simply a matter of navigating into the correct folder first.
Building the form and managing state
The app structure centers on two pieces: a form for submitting new tasks and a list for displaying them. The form includes a text input and a submit button, with an onSubmit handler set up to run a handleSubmit function once triggered. Two useState hooks drive the app: one holds task, the current text typed into the input, and the other holds tasks, the array of all tasks created so far. The input field's onChange event updates task on every keystroke, keeping the input fully controlled by React state.
Handling form submission
Inside handleSubmit, the first step is calling event.preventDefault(), which stops the form's default behavior of reloading the page, a small but important detail that demonstrates React's control over standard HTML form behavior. From there, the function builds a new task object containing the entered text and a completed flag set to false, then adds it to the tasks array. After the new task is added, the input is cleared by resetting task back to an empty string with setTask(""), so the field is ready for the next entry without any leftover text from the previous submission. The video demonstrates this directly: commenting out that reset line leaves the previous input text sitting in the field even after a new task, like "movie," gets successfully added to the list, which makes the purpose of the reset immediately visible.
Rendering the list dynamically
Displaying the growing list of tasks uses React's map() function over the tasks array, rendering an ordered list item for each entry. Each mapped item needs a unique key, and the tutorial uses task.id for that purpose, since a stable key lets React efficiently track which items have changed, been added, or been removed without needing to re-render the entire list. This dynamic rendering is what lets the app immediately reflect new tasks like "laundry" as soon as they're submitted, without a full page reload.
What's built, and what's next
By the end of the video, the app can accept a new task through the input, add it to state, clear the field, and render the updated list live. The tutorial closes by pointing to natural extensions: adding CSS styling for a more polished look, or adding a task-completion feature with a checkbox that strikes through a completed task, both left as exercises for the viewer to pursue using React's official documentation as a reference.
Key takeaways
- The to-do list app combines state management, controlled form input, and dynamic list rendering in one small project.
- Two
useStatehooks track the current input text and the full array of tasks. event.preventDefault()inside the submit handler stops the default page reload behavior of HTML forms.- Resetting the input state after submission is what clears the text field for the next entry.
- Mapping over the tasks array with a stable key, like
task.id, lets React update the list efficiently as tasks are added. - The finished app is a foundation that can be extended with styling or a task-completion checkbox.
Try it yourself
This tutorial is aimed at React beginners who have already gone through Part I of the Basics of React series and want to build something slightly more complex than a counter. It's a good hands-on complement to Humanitarians AI's other applied coding walkthroughs for anyone learning front-end development step by step.
Full transcript(auto-generated, with timestamps)
[0:00]Hello everyone welcome to this new tutorial uh in the react series uh where we'll dive into building a twoo list app using react so this guide is designed for beginers and which is aiming to eliminate the path of web development with react and applying Core Concepts um to a practical project so in the last video that we have seen uh we have learned the basics of react why we what is react and why we use react and also we uh you know tipped off with um creating a simple startup project uh of accounter application so which you know showed how react Works underneath uh uh
[0:40]The web browser and how you know uh it brings life into the whole application so in this uh in this session we'll be creating a to list app so now the question comes why why are we creating this to list app so a to list app is it's a classic learning project which kind of packs an essential react Concepts um like State Management handling user input uh and also D Dynamic list rendering so this would you know give you a basic understanding of uh the various uh concepts of how react of react uh so yeah let's get started with the uh uh project setup so in the
[1:21]First steps let of setting the react environment uh we'll just start it with the the create react app so we'll use npx create react app and let's name the application as too list so yeah so now it's creating a react react application and installing all the necessary packages for us so this tool kind of provides us with the ball PL setup ball plate setup and it eliminates the initial configuration hassle so I always prefer um the npx create react app command so I think it's all getting updated so um what we can do now is um let's explore the folder the new folder and yep and it's the app.js so this so
[2:20]This is where we we going to work and let's build our app score structure here so so basic let's start building with a basic uh form for a task submission and a list for displaying the tasks so before that uh I would you know really want to start the application and make the changes par so that you know we able to see what changes occur by you know uh writing a piece of C that gives a much more uh it feels that you're more involved and it gives a greater incentive uh to the path that we going so let's start npm start oh okay so we've got an error here so
[3:05]Okay you don't have to be uh scared but uh when you see this error okay I made a very classic mistake here so usually uh whenever you see this uh error most of the times when you start when you you know execute the npm start command you see this ER most of the times was in my in my experience it's just because you're not in the proper directory so as you can see I've tried to run this npm start command in my app directory where we do not have any of the uh you don't not have the package ASM or the node modules or anything and no code here so this is
[3:49]Basically where I'm trying to execute it so we need to go to the appropriate folder which is too list so let's do that okay and now let's start it now it runs so let's try it out yes now that we can see it's running well so this is the app.js is what's being displayed here so what we can do now is let's delete all the unnecessary code here cool so we got a blank slate so what we can do now is like I mentioned let's start with the app score structure and let's build a form for task submission and a list for displaying the tasks the form will have
[4:44]Uh an input for the new tasks and a button to submit them so let's get started so let's in introduce uh use State here we'll be introducing use State here yeah think we need this so let's create a so let's give a form um and on submit so this will uh this will be executed this particular function handle submit will be executed once we submit the form and uh so before we do that let's fill out uh the the form the details of the form so with input
[5:55]Tag this it will be of type text value would be task so uh I'll be writing uh some code which I will be explaining so please do bear with me because all of this uh introduces State Management and a little bit of other Concepts as well so please bear in mind so on chain so when the input is changed what we going to do is on that particular event he will set the task we haven't implemented it yet we'll do that in just a moment so before um we get confused so what I'll do do here is I'll create a use
[7:07]State so I do have U GitHub pilot so that kind of helps in you know reducing the amount of uh code that uh the amount of code that I arriv so let's make it an N because we'll be taking a lot of uh um um tasks so for that let's set uh set so there'll be two types of uh uh values so which is use task and which will be task and tasks so task is a specific uh to-do task and the tasks would be an array of the tasks that you know we have created and U so which would also be which should also be managed so here we
[7:53]Introducing use State know for managing our tasks and the input and the input field so if you can see you can just see how set tasks kind of update uh so I'll be showing that to you in just a moment so so this is this holds the array of all the tasks and here uh set task task and now create a single task set task this would you know so that's fine that's just showing a simple error for now what we can do know is have another placeholder here for the input so placeholder would be add a new task so this uh input field is where you know you're going to create
[8:50]A new task so if we can see this here okay this seems to be close this project okay now we'll assign a proper button to this input and would be of type submit this would be add task cool so this is the basic form um so which you know has a simple input which wherein you uh give the task and the button would you know add the task so but you know also need to display what uh we are U the too list or the tasks that we are creating we'll created we'll create we'll create a list and an ordered list for now so so all the tasks that we have in
[9:56]This array that we creating so we'll you know map through the that uh the list of all the tasks and then list them out uh one by one so for example this tasks M basic JavaScript uh uh uh function so which you know you can do some extra reading on that so always when you're using uh map functions you always need to have an index along with uh always need to have an index so that you know keeping that track we able to keep a track of what uh we mapping through because that index would you know act as a key and that's very much
[10:42]Important while we are using the um map map function from here I'll just use the task. ID let's see how that works if there is an issue here U okay use state is not defined use state is not defined handle submit cool so it is because we haven't uh given we hav't imported react or use state from react that's good okay handle submit is not defined so let's define the Handle Sub so this handle submit function will be executed when the form is submitted um so if you can see um I'm uh
[11:56]I'm writing e do prevent default here so so so when you submit a form handle submit uh has this default uh um you know action of refreshing the page so uh when I do e do prevent defa event. prevent default function so it prevents the default reload of the page so this uh kind of demonstrates uh kind of reacts control over traditional form Behavior so it then updates the task array with uh a new task object just finish task get goil go pilot is really beneficial it's really useful but I would really not recommend uh using it in your learning stages because a lot of
[12:46]The code is free written and we just autofill that and sometimes you know we don't understand why uh that is happening so I would still encourage you to type out the code uh even uh and not just press the tab button because you know if you type it out it becomes like a practice to uh write the code so yeahor so let's take date date the text of the task that we're getting and a completed state which would be false cool and let's set the task because uh so why we doing this is um so when we click submit the input uh has to get the input uh has to be
[13:58]Cleared so that you know you can create a new task cool um I think we got a basic uh BL app here so let's try laundry cool cool Works nice um uh yeah so let's study U and yeah that's one of the reasons why we are saying set task so if if I just comment it out and if I write movie there you go so movie is getting added to the list but the input box is not getting cleared so that's the reason we using set task and we setting that state to an empty string so that's the basic uh too list app that we
[15:03]Have uh and for styling I mean we can add um styling for any usability U so as a functional app needs to be user friendly we can add some CSS to that uh in an app.css file that we have here so this is all the code for that previous thing but yeah we can just start a fresh and you know U write some um styles for that code that we have written and also by mapping over the task U uh one essential thing that I wanted to talk about was the rendering of the list so displaying the task list it uses the power of reacts Dynamic rendering so
[15:47]By mapping over the tasks array by mapping over this array what we're doing is we create a list item for each task and this kind of showcases how you know react efficiently updates the Dom with each task added and you know without refreshing the entire page so that's uh one uh uh great thing of react um so yeah uh you know this is a pretty basic application um you know you can expand it uh there's just no sky is a limit when you think of expanding of this uh trying to expand on this uh too list so for example you know you can add uh task completion feature so beside
[16:30]Each and every task uh we can have a simple checkbox which you know when you check it it just strikes through the whole um task uh you know uh yeah there's just multiple features that that you can Implement so yeah with this uh uh with with our simple application place it's always crucial to you know test the application and mark them as complete and observe the reacts reactivity so debugging is a very essential skill it kind of helps us to understand how react applications update and respond to the user interactions so yeah so that's pretty much it for the too list and we have successfully built a very simple a basic
[17:20]Too List application in react so this uh tells a lot about the State Management so for State Management we using UST State um you know um set the tasks and also to set a particular task and uh the component structure the component structure we have here and the dynamic rendering uh of the tasks uh all along the way so the uh what we can do uh from here is we can experiment with the code we can add new features and explore reacts documentation for further learning uh I've already shared that uh with you guys react this this is a very important website um that you need to visit so if
[18:12]You're learning react this is a very important website this provides the documentation for react and uh yeah so this project is kind of like a stepping stone into the world of react development and yeah stay curious keep building and yeah thank you
More from React
29:30Building a Weather App with React & Axios | React Basics Series Part 3"
34:41Basics of React by Humanitarians AI Fellow Raghu Teja | Powered by Bear Brown & Company
20:49React Hook
17:27React hooks
2:08Bridging the Pixel Gap in Browser Automation.
2:23