Add a button below the list of tasks called “ Clear” that when clicked clears all the tasks.įeel free to comment below in case you need further assistance.Once the task is completed, instead of strike-through you can make it disappear.Now open index.css and import the Blueprint css: index.css. So let's go ahead and install it: 1npm i blueprintjs/core.

We will be making use of BlueprintJS to style our app. You can do the following if you would like to learn more. Create a react app using the following command: 1npx create-react-app react-todo. The above boilerplate can be used to extend the App to include more functionalities around the App. Lets say that weve been tasked with creating a proof-of-concept in React an app that allows users to add, edit, and delete tasks they want to work on. You have also gone through other aspects of React and ES6 JavaScript. The App.js file should look as below: import React from 'react' import './App.css' function App() export default App ConclusionĬongratulations! You have now built a To-do list App using React hooks and styled-components. In the src folder, open App.js and get rid of everything between Cd into todo-list and yarn start OR npm start if using npm. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java.

React todolist