THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Create ToDo List App Project in ReactJS using Material UI Free Code in 2020

Create ToDo List App Project in ReactJS using Material UI Free Code in 2020

Welcome, to the React Project using Material UI. You will learn many new concepts while creating our ToDo List App in Reactjs using Material UI in 2020. 

So, What is Material UI? Is It React best UI Framework?




Material Design is a design language developed in 2014 by Google and is very popular for web and mobile applications.

The Material UI React library is designed from the ground up to be fast, small, and developer-friendly. Using the Material UI React library you can add Material UI components to your React apps and switch seamlessly between MUI CSS/JS and MUI React even within the same app.

With the components from the Material-UI library, it’s very easy to make use of Material Design elements in your React web or mobile application. The library’s website can be found at https://material-ui.com





Installation

Install Material-UI's source files via npm. We take care of injecting the CSS needed.
$ npm install @material-ui/core
or use a CDN.     Load the default Roboto font.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

Usage

Material-UI components work without any additional setup and don't pollute the global scope.
import React from 'react';
import { Button } from '@material-ui/core';

function App() {
  return <Button color="primary">Hello World</Button>;
}
Now, Here is the actual source code of the TODO List App in React using Material UI, and please subscribe to my channel Here for daily awesome programming videos for free.

index.html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link
      href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap"
      rel="stylesheet"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>


Index.js file

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import ToDoList from "./ToDoList";

ReactDOM.render(<ToDoList />document.getElementById("root"));


ToDoList.jsx file

import React, { useState } from "react";
import Button from "@material-ui/core/Button";
import AddIcon from "@material-ui/icons/Add";
import ListCom from "./ListCom";

const ToDoList = () => {
  const [itemsetItem] = useState("");
  const [newitemsetNewItem] = useState([]);

  const itemEvent = (event=> {
    setItem(event.target.value);
  };

  const listOfItems = () => {
    setNewItem((prevValue=> {
      return [...prevValueitem];
    });
    setItem("");
  };

  return (
    <>
      <div className="main_div">
        <div className="center_div">
          <br />
          <h1> ToDo List </h1>
          <br />
          <input
            type="text"
            value={item}
            placeholder="Add an Items"
            onChange={itemEvent}
          />
          <Button className="newBtn" onClick={listOfItems}>
            <AddIcon />
          </Button>

          <br />
          <ol>
            {newitem.map((valindex=> {
              return <ListCom key={index} text={val} />;
            })}
          </ol>
          <br />
        </div>
      </div>
    </>
  );
};

export default ToDoList;





import React, { useState } from "react";
import DeleteIcon from "@material-ui/icons/Delete";

const ListCom = (props=> {
  const [linesetLine] = useState(false);

  const cutIt = () => {
    setLine(true);
  };

  return (
    <div className="todo_style">
      <span onClick={cutIt}>
        <DeleteIcon className="deleteIcon" />
      </span>
      <li style={textDecorationline ? "line-through" : "none" }}>
        {props.text}
      </li>
    </div>
  );
};

export default ListCom;



Now the main Index.css file


* {
  box-sizingborder-box;
  padding0;
  margin0;
  font-family"Josefin Sans""Arial Narrow"Arialsans-serif;
}

.main_div {
  width100%;
  height100vh;
  background#7bed9f;
  displayflex;
  flex-directionrow;
  justify-contentcenter;
  align-itemscenter;
  text-aligncenter;
}

.center_div {
  width25%;
  height70vh;
  background-color#f4f4f4;
  box-shadow5px 5px 25px -5px rgba(0000.5);
  border-radius15px;
}

h1 {
  colorrgba(0000.87);
  font-size50px;
  margin-bottom30px;
  min-width64px;
  box-sizingborder-box;
  font-family"Comfortaa"cursive;
  /* plz subscibe to thapatechnical channel */
  font-weight500;
  border-radius4px;
  letter-spacing0.02857em;
  text-transformuppercase;
  text-shadow5px 5px 5px rgba(0000.3);
}





input {
  text-aligncenter;
  height30px;
  bordernone;
  backgroundtransparent;
  font-size20px;
  font-weight500;
  width60%;
  border-bottom2px solid #8566aa;
  outlinenone;
  margin-right20px;
}

.newBtn {
  width50px;
  height55px;
  background-color#16a085 !important;
  colorwhite !important;
  box-shadow5px 5px 15px -5px rgba(0000.3);
  /* plz subscibe to thapatechnical channel */
  border-radius50% !important;
}




.newBtn:hover {

  color#16a085 !important;
  backgroundwhite !important;
}

/* //the add symbol inside the button in app comp */
.MuiSvgIcon-root {
  width2rem !important;
  height2rem !important;
}

ol {
  margin-top30px;
  /* margin-right: 50px; */
}

ol li {
  padding-left0px;
  text-alignleft;
  font-size20px;
  font-weight500;
  min-height40px;
  displayflex;
  align-itemscenter;
  color#8566aa;
  text-transformcapitalize;
  /* plz subscibe to thapatechnical channel */
  list-stylenone;
}

.todo_style {
  displayflex;
  flex-directionrow;
  justify-contentleft;
  align-itemscenter;
}

.todo_style .deleteIcon {
  width25px;
  height25px;
  displayflex;
  justify-contentcenter;
  align-itemscenter;
  background-color#8566aa;
  border-radius50%;
  margin0 15px 0 35px;
  padding5px;
  coloraliceblue;
  box-shadow5px 5px 15px -5px rgba(0000.3);
}

.todo_style .deleteIcon:hover {
  background-colortransparent;
  colorcrimson;
  box-shadow5px 5px 15px -5px rgba(255000.5);
}

.todo_style .fa-times:hover .list_style {
  colorcrimson;
}

@media (max-width768px) {
  .center_div {
    width55%;
  }

  .todo_style .fa-times {
    margin0 15px 0 15px;
    displayflex;
    justify-contentcenter;
    align-itemscenter;
    /* plz subscibe to thapatechnical channel */
  }

  button {
    margin-left5px;
    min-height40px;
    width40px;
    color#fff;
    font-size30px;
  }
}



102 comments:

  1. Replies
    1. code ko pdf ban lo tab copy krna
      abhi copy nhi hoga kyun screenshot kr ke dal gaya h

      Delete
    2. copy kar sakte ho bas apko dikhayi nahi de raha hain

      Delete
  2. ./src/ToDoListUpdate.jsx
    Line 48:32: Expected an assignment or function call and instead saw an expression no-unused-expressions

    Search for the keywords to learn more about each error.


    ye error show ho rha hai apka code copy krne par

    ReplyDelete
  3. bro return statement dekh vaha kahi issue hoga

    ReplyDelete
  4. vai text selector style change karoge pls.

    ReplyDelete
  5. I like viewing web sites which comprehend the price of delivering the excellent useful resource free of charge. I truly adored reading your posting. Thank you! guide

    ReplyDelete
  6. thanks thapa technical for helping me alot

    ReplyDelete
  7. Replies
    1. index.html dekho usme todolist.js render hua hai so app.js kyun cahiye?

      Delete
  8. Earlier this year, Apple released its list of top iPhone apps at the one billion download Kajabi vs clickfunnels. It's a very interesting list and there are a lot of good lessons to be learned from it and a lot of money to be made, if you can get it right. How to get access to this giant cash cow? Here are some tips, based on our analysis of Apple's twenty top paid apps

    ReplyDelete
  9. where is font awesome link in html???

    ReplyDelete
  10. Nice post. I was checking constantly this blog and I’m impressed! Extremely useful info specially the last part I care for such information a lot. I was seeking this certain info for a long time. Thank you and good luck. best spy apps

    ReplyDelete
  11. bro give me this code i need i cnt copy cause its screenshot

    ReplyDelete
  12. Great job for publishing such a beneficial web site. Your web log isn’t only useful but it is additionally really creative too. پروژه ستین

    ReplyDelete
  13. Very informative post! There is a lot of information here that can help any business get started with a successful social networking campaign. پروژه ستین

    ReplyDelete
  14. I’m going to read this. I’ll be sure to come back. thanks for sharing. and also This article gives the light in which we can observe the reality. this is very nice one and gives indepth information. thanks for this nice article... baixar happymod apk toca life world

    ReplyDelete
  15. WhatsApp Group Links
    I have read a few of the articles on your website now, and I really like your style.
    WhatsApp Group Links

    ReplyDelete
  16. I am executing all of the programs , whom you are teaching Thapa Sir, buy right now I am stuck
    because I can not copy the source code, kindly guide me to copy this.

    ReplyDelete
  17. Thankyou for this wondrous post, I am glad I observed this website on yahoo. buy google reviews

    ReplyDelete
  18. Dharam is an Indian diamond manufacturing and design brand, noted for its intricate depiction and precise cuts to produce opulent diamond designs. Pear Diamond exporter

    ReplyDelete
  19. Efficiently written information. It will be profitable to anybody who utilizes it, counting me. Keep up the good work. For certain I will review out more posts day in and day out. here

    ReplyDelete
  20. bro if i copy index.css it copy all the site please fix this .

    ReplyDelete
  21. That is really nice to hear. thank you for the update and good luck. 0dot live

    ReplyDelete
  22. I am jovial you take pride in what you write. It makes you stand way out from many other writers that can not push high-quality content like you. 대전건마

    ReplyDelete
  23. Excellent article. Very interesting to read. I really love to read such a nice article. Thanks! keep rocking. ฉีดฟิลเลอร์ร่องแก้ม รีวิว

    ReplyDelete
  24. Nice to be visiting your blog again, it has been months for me. Well this article that i’ve been waited for so long. I need this article to complete my assignment in the college, and it has same topic with your article. Thanks, great share. nursing test bank

    ReplyDelete
  25. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful for me. digital experts

    ReplyDelete
  26. Nice to be visiting your blog once more, it has been months for me. Well this article that ive been waited for therefore long. i want this article to finish my assignment within the faculty, and it has same topic together with your article. Thanks, nice share. 토토사이트

    ReplyDelete
  27. Superbly written article, if only all bloggers offered the same content as you, the internet would be a far better place.. 토토커뮤니티

    ReplyDelete
  28. Nice post. I was checking constantly this blog and I’m impressed! Extremely useful info specially the last part I care for such information a lot. I was seeking this certain info for a long time. Thank you and good luck. 먹튀폴리스

    ReplyDelete
  29. You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers. seo services delhi

    ReplyDelete
  30. Merely a smiling visitant here to share the love (:, btw outstanding style. shuttlesky low cost capsule lift

    ReplyDelete
  31. Great articles and great layout. Your blog post deserves all of the positive feedback it’s been getting. https://www.goshlife.com/hydra-illuminizer-face-mist.html

    ReplyDelete
  32. You have done a great job on this article. It’s very readable and highly intelligent. You have even managed to make it understandable and easy to read. You have some real writing talent. Thank you. 먹튀폴리스

    ReplyDelete
  33. That is the excellent mindset, nonetheless is just not help to make every sence whatsoever preaching about that mather. Virtually any method many thanks in addition to i had endeavor to promote your own article in to delicius nevertheless it is apparently a dilemma using your information sites can you please recheck the idea. thanks once more. 토토사이트

    ReplyDelete
  34. I have been checking out a few of your stories and i can state pretty good stuff. I will definitely bookmark your blog 토토사이트

    ReplyDelete
  35. I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. Thanks... 대전스웨디시

    ReplyDelete
  36. i was just browsing along and came upon your blog. just wanted to say good blog and this article really helped me. 대전마사지

    ReplyDelete
  37. This is a truly good site post. Not too many people would actually, the way you just did. I am really impressed that there is so much information about this subject that have been uncovered and you’ve done your best, with so much class. If wanted to know more about green smoke reviews, than by all means come in and check our stuff. 대전건마

    ReplyDelete
  38. I know your expertise on this. I must say we should have an online discussion on this. Writing only comments will close the discussion straight away! And will restrict the benefits from this information. 대전1인샵

    ReplyDelete
  39. Superbly written article, if only all bloggers offered the same content as you, the internet would be a far better place.. 바둑이

    ReplyDelete
  40. All the contents you mentioned in post is too good and can be very useful. I will keep it in mind, thanks for sharing the information keep updating, looking forward for more posts.Thanks 온라인바둑이

    ReplyDelete
  41. This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value. Im glad to have found this post as its such an interesting one! I am always on the lookout for quality posts and articles so i suppose im lucky to have found this! I hope you will be adding more in the future... 바둑이게임

    ReplyDelete
  42. Instagram is one of the largest social networking platforms, with billions of users since at least a decade ago. Buy Instagram views has become a widely used platform where people can post pictures and videos with just a few clicks and share them with others. Buy instagram views

    ReplyDelete
  43. I have a similar interest this is my page read everything carefully and let me know what you think. 토토사이트

    ReplyDelete
  44. Nice information, valuable and excellent design, as share good stuff with good ideas and concepts, lots of great information and inspiration, both of which I need, thanks to offer such a helpful information here. 토토사이트

    ReplyDelete
  45. Nice post! This is a very nice blog that I will definitively come back to more times this year! Thanks for informative post. free test bank

    ReplyDelete
  46. The website is looking bit flashy and it catches the visitors eyes. Design is pretty simple and a good user friendly interface. 먹튀검증

    ReplyDelete
  47. I am very happy to discover your post as it will become on top in my collection of favorite blogs to visit. 토토사이트 벳페어

    ReplyDelete
  48. The Modern JavaScript From the Beginning' tutorial focuses on building projects without JS frameworks or libraries. It boasts an excellent 4.7-star rating averaged over 11k reviews. Other than English, the course is also available in Italian, Portuguese, and Spanish languages. free courses to learn javascript

    ReplyDelete
  49. Hey what a brilliant post I have come across and believe me I have been searching out for this similar kind of post for past a week and hardly came across this. Thank you very much and will look for more postings from you. 토토사이트

    ReplyDelete
  50. I wanted to thank you for this excellent read!! I definitely loved every little bit of it. I have you bookmarked your site to check out the new stuff you post. 토토사이트

    ReplyDelete
  51. Thanks For sharing this Superb article.I use this Article to show my assignment in college.it is useful For me Great Work. 먹튀검증

    ReplyDelete
  52. I was surfing the Internet for information and came across your blog. I am impressed by the information you have on this blog. It shows how well you understand this subject. 토토사이트

    ReplyDelete
  53. We are really grateful for your blog post. You will find a lot of approaches after visiting your post. I was exactly searching for. Thanks for such post and please keep it up. Great work. ETCPunks

    ReplyDelete
  54. The way you write, you are really a professional blogger. YesMovies

    ReplyDelete
  55. Thank you a bunch for sharing this with all of us you actually realize what you are talking about! Bookmarked. Please also seek advice from my site =). We could have a hyperlink change contract between us! 토토사이트

    ReplyDelete
  56. Recently, I have commenced a blog the info you give on this site has encouraged and benefited me hugely. Thanks for all of your time & work. Lottery Sambad

    ReplyDelete
  57. Wow, What an Outstanding post. I found this too much informatics. It is what I was seeking for. I would like to recommend you that please keep sharing such type of info.If possible, Thanks. 먹튀검증

    ReplyDelete
  58. The way you write, you are really a professional blogger. Y-Ymovies

    ReplyDelete
  59. Nice to be visiting your blog again, it has been months for me. Well this article that i've been waited for so long. I need this article to complete my assignment in the college, and it has same topic with your article. Thanks, great share. สล็อตxo

    ReplyDelete
  60. hi was just seeing if you minded a comment. i like your website and the thme you picked is super. I will be back. 오피사이트

    ReplyDelete
  61. You have outdone yourself this time. It is probably the best, most short step by step guide that I have ever seen. สล็อต 888 ฟรี เครดิต

    ReplyDelete
  62. This article was written by a real thinking writer. I agree many of the with the solid points made by the writer. I’ll be back. บราปีกนก

    ReplyDelete
  63. What is an outstanding post! “I’ll be back” (to read more of your content). Thanks for the nudge! เว็บแทงบอลออนไลน์

    ReplyDelete
  64. Positive site, where did u come up with the information on this posting? I'm pleased I discovered it though, ill be checking back soon to find out what additional posts you include. 먹튀폴리스

    ReplyDelete
  65. Tahir termite service – TTS® is the largest independently owned pest control company in Lahore, Pakistan.WATER TANK CLEANING SERVICES IN LAHORE

    ReplyDelete
  66. When you move to a new place or buy your own Bedsheet online Pakistan.Bedsheet online Pakistan

    ReplyDelete
  67. When you move to a new place or buy your own Bedsheet online Pakistan.Online curtains in Pakistan

    ReplyDelete
  68. Salon is now proud to offer complete range of hair styling, facial skincare treatments and body hair removal services for men.bridal makeup deals in karachi

    ReplyDelete
  69. Salon is now proud to offer complete range of hair styling, facial skincare treatments and body hair removal services for men.skin care treatments

    ReplyDelete
  70. KBC Online Game. Kbc Lottery Winner 2022 list for information online like Kaun Banega Crorepati Lucky draw Winners 2022.suck a dick

    ReplyDelete
  71. Lunchtime results is the daily broadcasted results of the UK 49s lunchtime lottery. It is broadcasted from Monday to Sunday at about 12.49 PM UK time. The ...
    Lunchtime Results

    ReplyDelete
  72. Apne TV Hindi Serials | Bollywood Movies | News | Watch Online ... Watch colors tv live streaming free on internet live broadcasting from India.
    https://apnetvserialz.com/

    ReplyDelete
  73. Find the Lunchtime Results here after each game, and click the 'Prize Breakdown' button to get the full French lotto results and find out if you are a winner in either the main draw or the History 2021, Uk 49s Results from 2022

    ReplyDelete
  74. Kbc official website 2022 Presently KBC has situated different procedures to Check KBC Lottery Number with no cerebral pain. You may do your lottery wide assortment attestation via yourself. You can download the versatile form utility. Jio lottery office number 2022

    ReplyDelete
  75. By having the Sundance TV app on your streaming device, you can watch the latest in-season episodes, behind-the-scenes clips, and iconic movies from the industry’s most talented performers and creators. Also, you can see new favorites, watch award-winning original content on-demand, and stream Live TV. Simply, install the Sundance TV app on your streaming device and activate it at sundancetv.com/activate. To know the complete installation and activation process, follow this post.

    ReplyDelete
  76. When you choose same day delivery wales couriers services in uk with bubzycouriers, you can either select a one-off delivery or arrange for a more regular weekly or monthly courier service. No matter what you are after, request a free quote or a call back from us and we can get in touch to discuss your delivery requirements. wales couriers services in uk

    ReplyDelete
  77. Jio lottery office number 2022 This is the greatest upsetting question that has been mentioned via our fans pretty often. Kbc all india sim lucky drow There are such countless artificial sites on the web and it has wound up extreme for the competitors to comprehend the genuine Kbc lottery winner redirection. As you mindful, all Sims could be now enlisted inside the Kbc official website 2022. So the significant obstruction for the clients is to find their lottery range inside the rundown of champs.

    ReplyDelete
  78. icd 10 anemiaThe Florida Gulf Coast University comes under one of the top-ranking universities in Southwest Florida. The university offers graduate and undergraduate programs for the students. To ease the learning process for the students, they introduced the fgcu canvas

    ReplyDelete
  79. BubzyRecruitment consultants have unparalleled recruiting expertise and an in-depth knowledge of the UK construction jobs market.construction recruitment agencies South Cambridgeshire

    ReplyDelete
  80. At BubzyPainting, we've qualified painters and decorators with over 30 years of experience to provide quality painting and decoration services.Painting Services in Perth & Kinross

    ReplyDelete
  81. Ultimately, that decision is down to you. Based on the information above, you can look at your goods and deliveries.delivery near abbess end

    ReplyDelete
  82. fgcu canvas If you a student at the FGCU, you may be wondering what this canvas is all about. To introduce the ease of learning for students and teachers, they have raised the learning management system. This is done to ensure everyone gets the flexibility of learning online.icd 10 anemia

    ReplyDelete
  83. how tall is 50 cent Anemia is a health condition that lacks healthy and enough red blood cells. The red blood cells carry oxygen to the tissues of the human body. However, anemia is a dangerous disease. It makes the human body weak and tired.dan pena net worth

    ReplyDelete
  84. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work! android App Development Company in India

    ReplyDelete
  85. most cosmetics today are made up of artificial products that can harm the skin, there are still few natural cosmetics on the market, aprende java

    ReplyDelete
  86. Good for education to learn but pls give download link

    ReplyDelete
  87. Are you looking for Virgin Australia Staff Travel Login? You can now easily access all web pages of Virgin Australia Staff Travel Login in one click.

    ReplyDelete
  88. This is a great inspiring article. I am pretty much pleased with your good work. You put really very helpful information. Keep it up. Keep blogging. Herman Munster Jacket

    ReplyDelete
  89. Online slots web superslot, direct website, easy deposit, real pay, easy to play, automatic deposit and withdrawal system and many promotions. sp24 superslot

    ReplyDelete