React for Beginners: Build a To-Do List
So... You heard of this framework called React and want to know what all the fuss is about ? Well, wander no more ! Let's go for a spin with ReactJS and build a simple application that will let us see why everyone is talking about it.
Before installing React, make sure you have a correct development environment. I'm not talking about your IDE (Integrated Development Environment) - though I personally prefer Visual Studio Code, but whether or not you have NodeJS installed on your machine. If you do, that's great 👍! If you don't, I'd suggest using nvm to install the latest LTS (long term support) version; you shouldn't need anything else for this guide.
Creating a Project
Now that we have a recent version on NodeJS, and consequently npm, we can start bootstrapping our new React project. After you get to know better the framework you can have your own starter template, but for today's guide let's just use
create-react-app. To start a new react project, just open up a terminal and type:
npx create-react-app <folderName> where
<folderName> is the name of the folder that will be created with your react project in it.
Here's a trick I found recently : If you insert
. instead of a folder name (
. is the current directory), then the project will be instantiated in the current directory, without creating an addition subfolder.
Once that is done, you can move to that folder and run
npm start to launch the development server. It should open a browser window to localhost:3000 and you should see the starter page.
Congrats ! You have created your first React project
This is the usual folder structure generated by create-react-app
Let's now take a look at some particular files:
- src/App.js : this is the root component all your application will be rendered inside of. If you look at the code inside it, you will see that it's what you've seen when you launched your application
- src/index.js : this is the file that actually renders the
Appcomponent onto the page by attaching it to a
divwith an id of "root".
- public/index.html : the scheleton of the page your React component will live in: in here you can see the
divI mentioned above
Now that we have had a look at how a React project is structured, we can start creating our To Do app.
NB: for the sake of brevity, we will have everything happen inside one component. Perhaps in a following article we will advance this project to make it resemble more a real life use case
The first step is to create a list of tasks. This list will be updated every time a new items gets added or an item is removed. It will composed of a simple unordered list, with each list item corresponding to a task.
Creating a component
For this guide, we will be using functional components and the latest addition to the React arsenal, hooks. To create a functional component you must first import React at the top of the file and create a function that returns some
What is JSX ?
From React's official documentation
Consider this variable declaration:
const element = <h1>Hello, world!</h1>;
This funny tag syntax is neither a string nor HTML.
You can learn more here
Let's get back to the 'task' 🤣 at hand
Let's remove all the code inside the return of the
App component. It should now look like this:
let's begin by adding a
div as the root of our component: All React element must have only one root element and inside of it let's add our unordered list
Let's display some taks
Now that we have a list element, we need to add elements inside of it. We could add them one by one, but that is not the point of using React. Let's instead declare an array with some data in it:
map to display our list items !
so why don't we do just that ?
If everything went well, then you should see 2 elements appear on your page.
Adding a task
In order to add a task, we need to introduce a
Form tag. Within the form we'll have an
input and a
button. Clicking the button will submit the form.
If you try typing in something and then submitting the form you'll notice something strange... The page reloads! This is because the
form is acting like a form, in that it sends a post request while reloading the page. But we don't want that, do we?
What we need to do is provide a substitute function that will run when the form gets submitted. We can do this with the
onSubmit prop (think of props as passing values to another component from their parent).
The first thing we want to do is prevent the form from actually submitting (i.e. reloading the page). For that, we need to prevent the default behaviour associated with the event originating from the form. If this last sentence seems a bit complicated, it's not; we're simply doing this:
If you try this out, you'll see that the form doesn't reload the page!
Getting the task's name
Now we need to get the input's value in order to add it to the list. And it's in this section that you'll get to meet the one thing that I love about React: state!
React state is a collection of variables that you define on a component basis, that forces the component showing them to the screen to re-render itself. It means that for example we can dynamically add rows to a table and it will update automatically (without us needing to manipulate the dom direclty). In order to do so, we'll also get to know a "new" concept in React, called hooks (more info here). In this paricular guide, we'll only use the
useState hook, which allows us to define a variable and a function to update said variable. The syntax is as follows:
const [value, setValue] = useState()
setValue(3) // updates the variable value
you can also pass as an argument to
useState the default value of the variable
In our case, we need to keep track of the input's value, and then add it to our table. For the task's id, I'll increment the length of task array by 1.
Our component should look like this, now:
All that is left is add the
taskValue variable to our tasks array when the form is submitted:
If you try and run this code, you'll notice that it doesn't really update the table the user sees. Can you guess why ? (hint: the table doesn't really react to changes)
Thanks for reading this article! If you have any questions, feel free to ask them in the comments below.
Did you find this article valuable?
Support Matteo Gassend by becoming a sponsor. Any amount is appreciated!