ReactJS | Create ToDo Application in ReactJS using Class Components

ReactJS is a powerful library to build robust applications with the help of manageable and reusable components. React renders application without using any HTML templates which improves application performance many folds. In class components of ReactJS, we use JSX which is JavaScript with XML.

React maintains a Virtual DOM which is React Element, converted from JSX and a Real DOM element which is visible to the user on the screen.

In this post, we will create a very basic but component rich ToDo application using many class components and will also understand some basic concepts used in our app.

Let’s begin

First, make sure you have the latest version of NodeJS installed. After that, we will install Creat React App toolchain

After that run application by running the following command

Now you will see React JS app running

In our ToDo application, we will use Bootstrap for a nice user interface. Run following in CMD

To include Bootstrap in the application, we need open index.js file then import the bootstrap.css as shown below

If you look closely at line 6 we have

that means on initialization App component will be loaded in the element having ID root

In file App.js file there is a Class Component with the following code

Here we have another Component Todos, which is another Class Component to show List of Todos using Todo and one more Class Component AddTodo to show Add Todo input with a button.

Let’s create these three new Class Components (Todos, Todo & AddTodo) under components folder at “~components“. After adding these components our app directory will look like this

 

todos.jsx

In Todos class there is state property for adding dynamic content in Component. state is a special property in React component it is basically an object to keep data which we will use in our class component. a state is a private object only accessible to the component itself.

In above Class Component Todos, we have added some methods which are defined as arrow notation as we are going to access these methods from other Components like Todo and AddTodo.

getTime() is getting used to adding an ID to ToDo, this is without arrow notation as we are using this method locally.

handleDone, handleDelete and addNewTodo are method whose references are getting passed as Component attributes, which will be called from their respective Components.

 

todo.jsx

Todo Class will represent a single Todo in the list and having methods fooDoneDone ( check/ uncheck event handler ) and fooDelete ( delete button event handler )

 

 

addtodo.jsx

In AddTodo class we have handleChange method also in arrow notation as we need to call the setState method to replicate changes in view. setState will be undefined if we don’t have arrow method.

So here we discussed a simple ToDo application in React JS and also used props to access values and methods from other components and state object to use it to define local values. We will discuss more React JS examples in coming articles.

Leave a Reply

avatar
  Subscribe  
Notify of