TODO example with React and Redux
This article explains how to create a simple React Todo example using Redux.
- Install create-react-app
https://github.com/facebookincubator/create-react-app
npm install -g create-react-app
- Create todo app using create-react-app command line.
create-react-app todo-react-redux
- Create the component, container, reducer, action folders.
cd todo-react-redux
mkdir components containers actions reducers
- Install required Redux and dependency packages
npm install --save redux
npm install --save react-redux
-
Create the components Todo.js, TodoList.js, Footer.js, Link.js (https://github.com/harikrish/todo-react-redux/tree/master/src/components)
-
Create the container components AddTodo.js, FilterLink.js, VisibleTodoList.js (https://github.com/harikrish/todo-react-redux/tree/master/src/containers)
-
Create the reducers todos.js, visibilityFilter.js (https://github.com/harikrish/todo-react-redux/tree/master/src/reducers)
-
Create the actions (https://github.com/harikrish/todo-react-redux/tree/master/src/actions)
-
Update App.js, index.js (https://github.com/harikrish/todo-react-redux/tree/master/src)
-
Run the server
npm start