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/.
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
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.
Main URL:- https://github.com/kabirbaidhya/react-todo-app Demo:- https://simplest-react-todo-app.herokuapp.com/
Steps For Changing Port:-
-
Setting environment variable
-
Modifying package.json
-
Creating .env file
-
On terminal hit commnad :- export PORT=8000 We then restart the development server again with “npm start”. This approach, however, is less preferred for an environment with several active projects. The environment variable PORT is arguably a generic, non-assuming variable name that can be used by other systems. Remember that by setting an environment variable via an export, that variable will be available for the all processes accessing or spawned by the shell. It will be better to localize the port assignment specific to React as shown in the remaining approaches.
-
Modify in scripts object change start of package.json. "scripts": { "start": “PORT=8000 react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }
-
create and .env file on root level. Enter following line:- PORT=3005