Recently I followed along a 'Build A Todo App With REACT' tutorial by Dev Ed on YouTube. I wanted to review and write about what I learned, as this is a new technique I would like to add into my habits.
Note: This review reaches only to the half hour mark. One thing this review process has taught me, is that it is better to start with 15-30 minute videos, rather than a 90-minute video. Highly recommend watching DevEd's tutorial!
Obligatory Spoiler Alert The tutorial was amazing. You create a Todo list. It's not perfectly mobile responsive. Some of the concepts you will learn about by following this tutorial include Component building, Properties (prop) drilling, State managing and storing through the localStorage object.
How do you begin?
Ed begins with a simple introduction to the project, explaining that this is straightforward Todo app in React, which gives you a good grasp on how to make future projects in React as well. He also adds a quick aside about his health, which overall I enjoyed for one particular reason (other than that he is focusing on his health!). You will notice early on that Ed is a very friendly and humorous content creator. If this style is your cup of tea, then I think you will have a lot of fun learning through his content.
One plus about this video is that he installs react in the beginning, so if you are new to coding in some way, don't be afraid.
After your react app is created, you will delete several unnecessary files, and run the app with npm start as your first test.
One of the first items that are covered is the usage of className while writing JSX code. The reason for this is that, while you are basically writing what looks like HTML, you are still writing this in JavaScript, and as you may already know, the class keyword is a reserved keyword, but worry not. If you forget and you define an HTML attribute with class on accident, the app will let you know shortly afterwards.
A Quick Aside - Past Code Required
Ed references a previously made project of the same app except in vanilla JavaScript, which you can find here. You won't be covering custom CSS much at all in this project, so this is where you will be getting a lot of the content to copy over.
Components
The components covered in this tutorial are named <Form>, <TodoList>, and <Todo>. The Form component is essentially an input element, a dropdown option menu, and a submit button.
Form
You begin by importing React. You have the option of creating components through the function keyword, but the author chooses to go with arrow function syntax. This makes sense, because it is 2021, React came out in 2013, and ES6 syntax (such as arrow functions) came out in 2015. But if you prefer to go with the function keyword, both should work.
A Quick Aside - Using return in JSX
It took me a few projects to remember that parentheses are used in JSX to return multi-line JSX code. I believe this is because JavaScript doesn't support functions that return multiple values, though you can wrap multiple values into an array or an object and return that. I think that is what is going on with return ( ), but I am not 100% sure. You can read more about this here and here.
After creating your component, you will follow up the function with export default [component name] and import the item within your App.js file.
A best practice that seems apparent is to name your component after your file name. Here is when TodoList is first created, but there was not enough time spent on it for me to write about it yet.
React
Ed describes how the React library works with data, and how you will be telling your App "what to do."
Based on that data, the application is going to react. The whole goal is to get our Todos, is to get any inputs or whatever that we're using on our web app, and get them into state ... Once it's in state, your UI is going to automatically react to all the changes.
A Quick Aside - State
Simplilearn has a great short video on what State is in ReactJS and can be viewed here. In a nutshell, State "is an object that stores the values of properties belonging to a component that could change over a period of time." These changes are generally updated by event handlers. They can change the data they hold over time, and store the data that has to be rendered to view. Dev Ed also has an entire hour-long video (in a playlist!) on React State and Props that can be found here.
useState
useState is a React hook that lets you add state to function components.. What is a hook? According to React documentation:
A Hook is a special function that lets you "hook into" React features.
The useState hook is called directly inside a component. Calling it declares a state variable, which can be named basically anything. This variable preserves some values between function calls. It is basically a newer version of this.state, if you have ever initialized state in React by using class components. The only argument passed to this hook is the initial state, such as an empty string or array, or even a default dropdown option value (as we see in this tutorial with value="all").
App.js - Coding a text state
The [a, b] pattern consists of an actual value, followed by a function that allows you to change this value. For example, this is how Ed declares a constant useState hook of an empty string:
const [inputText, setInputText] = useState("");
Within our App.js file component (App()), we return multi-line JSX including some basic HTML, as well as our components <Form> and <TodoList>. Within our Form component, we pass our inputText and setInputText state as properties. I was able to better understand this by reading this great article (~10-minute read) on PluralSight.
Form.js - Creating inputTextHandler
Ed next shows us how to "arrive to this position" (in reference to our text state in the App.js file). So, we write a function that updates a piece of state within our Form component. He creates functions with the suffix Handler so we know what they do. This one, inputTextHandler, takes one argument as a parameter - the event. To console.log our event as a test, Ed adds an onChange event listener to our <input/> element like so:
<input onChange={inputTextHandler}
Each time our input changes, this function is being ran. The event tells [us] information about what just happened on this input.
Console logging e.target gives us the input element itself, and logging e.target.value prints out exactly what we we enter into the input box, nothing more and nothing less. Great success!
Next, what we do is change the aforementioned state's value.
App.js - Passing down setInputText() as a prop
This will be the function that updates the input text. As Ed says, the inputText value will be like "our data/variable that we want to inject". We are then able to access these items by heading back into the Form.js file and passing props as a parameter into our Form component like as you see below:
const Form = (props) => { ... }
A Quick Aside - Destructuring props
Destructuring Props is a simple concept, but it takes some time getting used to. Overall this makes our code more readable and clear, especially when passing down props in React. More on this can be read here in a very straightforward Medium article!. Doing this in our Form component allows us to write code that looks more like this:
const Form = ({ setInputText }) => {
setInputText(e.target.value);
}
Having state in App.js allows us to use it anywhere in our application. Per Ed,
Every piece of state that you have, data and React automatically updates to everything (as long as you use it in different places), ... and renders it out for us.
A Quick Aside - React Developer Tools
This is a great Chrome extension for the ReactJS library, which allows you to inspect the React component hierarchies in the Chrome Developer Tools. More information on this can be found here! This is great for seeing our state and props, just by hovering of them in DevTools. This includes other data such as hooks!
App.js - Coding a todos state
As implied, this state will be for coding our Todos. Since we will be storing an array of objects (a collection/list of items), Ed instructs us to use an empty array in our hook:
const [todos, setTodos] = useState([]);
The next goal is to submit data and create an object when we do so.
Form.js - Creating submitTodoHandler
This function also takes an event argument as a parameter. We begin this function by tackling the issue of the browser window refreshing each time the submit-type <button> is clicked, which is a natural out-of-the-box behavior. Fixing this is super easy:
e.preventDefault();
However, the page refreshing will not be prevented until we add the event handler function via JSX into our <button> attributes:
<button onClick={submitTodoHandler}>
A Quick Aside - JSX
JavaScript XML (JSX) syntax is an extension to the JavaScript language syntax. Their tags have a name, attributes, and children. It transpiles to pure JS. It uses camelCase as a property naming convention, hence such attributes as onClick and className. An example of this information can be viewed here.
Understanding this syntax will help out a lot, in case you run into any confusion during this tutorial. What we are doing above is passing our event handler function submitTodoHandler without the parentheses into our component. I could be mistaken, but based off Googling I believe we are binding our function to the component, so that our context remains the same even though we are passing our function from one object to another, and are doing so from JavaScript syntax to JSX syntax. Our event handlers are passed as properties.
By default you can't access properties, state and component methods like setState from event handlers. To do so, you need to bind them explicitly.
I could be wrong about my interpretation of this. However, the reason why I brought this up is so you, the reader, spent some time understanding that if your event handler is not passed into wherever you use it, it won't work simply by declaring the function above the return value. More information on what I've read can be found here, albeit a little outdated, and here in the React documentation.
Abrupt Conclusion
Sorry
Top comments (0)