Giter VIP home page Giter VIP logo

react_redux-list-of-todos's Introduction

React + Redux list of TODOs

Task

By requesting https://jsonplaceholder.typicode.com/todos and https://jsonplaceholder.typicode.com/users, create and display a list of TODO items with an option of removing individual items.

Create and use five components:

  • TodoList (for the whole list),
  • TodoListHandler (Redux container for TodoList that manages its props, including callbacks if any),
  • TodoItem (for a single TODO item),
  • TodoItemHandler (Redux container for TodoItem that manages its props, including callbacks if any),
  • User (for displaying information about a user).

TodoList should display a list of TodoItems (through TodoItemHandler); each TodoItem must display the basic info about an item as well as the User the item belongs to. You can choose yourself what exact information you want to present and how, but you need to show at least the title of the item, the name of the user and whether the item is completed. Alongside each TODO item there should also be a button that removes the item when clicked.

Initially TodoList has to present the user with a button labeled "Load". When the user hits the button, the script starts to download the data; the label of the button has to change to "Loading..." and the button must become disabled. Once the data has been loaded, hide the button altogether and display the TODO items instead.

Additionally, you should provide a capability of sorting the items either by title, user, or the item’s status (whether the item is completed or not).

Workflow

  • Fork the repository with task
  • Clone forked repository
    git clone [email protected]:<user_name>>/<task_repository>.git
  • Run npm install to install dependencies.
  • Then develop

Development mode

  • Run npm run start to start http-server on http://localhost:3000 When you run server the command line window will no longer be available for writing commands until you stop server (ctrl + c). All other commands you need to run in new command line window.
  • Follow HTML, CSS styleguide
  • Follow the simplified JS styleguide
  • When you finished Deploy on gh-pages

Deploy on gh-pages

  • Build the project
    $ npm run build
  • Commit and push all recent changes
    $ git add .
    $ git commit -m 'commit message'
    $ git push origin master
  • Execute npm run deploy. This command will push the /build folder to branch gh-pages in your remote repository.
  • Add links to your demo in readme.md.
    • [DEMO LINK](https://<your_account>.github.io/<repo_name>/) - this will be a link to your index.html
  • Commit and push all recent changes again.
  • Create Pull Request from forked repo (<branch_name>) to original repo (master).
  • Add a link at PR to Google Spreadsheets.

Project structure

  • src/ - directory for css, js, image, fonts files
  • build/ - directory for built pages

You should be writing code in src/ directory.

Demo link

Add link here: [DEMO LINK](https://<your_account>.github.io/<repo_name>/)

react_redux-list-of-todos's People

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

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

  • Vue.js photo Vue.js

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

  • Typescript photo Typescript

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

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

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

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.