Light

kabirbaidhya / react-todo-app Goto Github PK

View Code? Open in Web Editor NEW

249.0 8.0 398.0 525 KB

React Todo App

HTML 6.62% JavaScript 80.92% CSS 12.46%

react sample-app tutorial todoapp

react-todo-app's Introduction

React Todo App

This is a sample react todo app done step-by-step. This sample app was a part of react workshop.

You can check the slides here.

Check the demo hosted on heroku https://simplest-react-todo-app.herokuapp.com/.

Instructions

First clone this repository.

$ git clone https://github.com/kabirbaidhya/react-todo-app.git

Install dependencies. Make sure you already have nodejs & npm installed in your system.

$ npm install # or yarn

Run it

$ npm start # or yarn start

Steps

Each step is a branch. Check out to the step you want to test.

$ git checkout <step-number>    # eg: git checkout step-1

step-0 - Setup app using create-react-app.
step-1 - React Hello World.
step-2 - Add some JSX for the todoapp.
step-3 - List todo items dynamically.
step-4 - Create TodoList component.
step-5 - Extract more components: TodoItem, & Header.
step-6 - Add Footer component to display count.
step-7 - Add InputBox component.
step-8 - Convert to stateful components.
step-9 - Add new todo item.
step-10 - Add todo list filter.
step-11 - Refactor code by moving logic to services.
step-12 - Make check/uncheck change the todo item status to completed/pending.
step-13 - Refactor code and design improvements.
step-14 - Refactor and separate UI & stateful components.
step-15 - Finalization of TodoApp.

react-todo-app's People

Contributors

Stargazers

Watchers

Forkers

lf-achyutpkl liuderchi dszymczuk wszerad redzi padob emilsniadach dawidkasprzyk bumec damianszsii zzglinski tuor11 kapcik ankitwebs swaminator aman-jung thomson02 bhavaniravi kisfejes dinakaranonline john-deng debanjan-github advansoft-pb booowa kachinger krystiankedron manamanamam r1n2l3r kuba0000 m1lwoj kkwoskov mpasko wojgad trzystaosiemnasty lukedmg siematypie achucherko denis273 gurlabe72 dvachhani zomkerro monkon1 robertmakyla kruchy mbochenski keoshz tranzystor mmsmsy michalperlak mebipingit sebastian-mikucki tigger1981 mytelekon pbrzezinski44 danielchernokalov88 naveenaws66 nishanthkumarpathi andreina-proyectos kateamethyst edidevs priya-pri aashayvanpal shounakg kalpananagireddy drd4n panus2544 ekeren mehul-terminaltrend mparamesh2909 christophervoltl kishorekumark94 cody-wales fxselazy mahinsagotra mvcypriano wenhuizhang martoncsizmazia infamousxd sstasny omidnasri pagerinc effri seanahmad tamalesimon alexanderbrennsteiner gaxoner1 propenster upadhyatejas asackmann azargunazari paramsinghvc yash-mindtickle nigamv tkim415 paulocontracting hguzman dimadinev balasr21 sarthakgupta072 rheehot

react-todo-app's Issues

Remaining items are not updating when we complete any task

As we complete any task, no of remaining items remains same. Updating only when we add any task.

Long description out of bounds

Link Is BROKEN!

When trying to access the project preview link on Heroku it says Error, I think you have to change the hosting service as Heroku is not free anymore 😔

Compile error after changing branch and running the application

After I checkout to branch-0, I have run the command:

npm start

and the error which is displayed in the browser is the following :

Failed to compile.

Error in ./src/reportWebVitals.js
Syntax error: 'import' and 'export' may only appear at the top level (3:4)

  1 | const reportWebVitals = onPerfEntry => {
  2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
> 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
    |     ^
  4 |       getCLS(onPerfEntry);
  5 |       getFID(onPerfEntry);
  6 |       getFCP(onPerfEntry);

 @ ./src/index.js 19:23-51

Are we supposed to edit any parts of code to be able to run correctly ?
I was using the repository as a tutorial.

Thank You

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.