Git Product home page Git Product logo

react-redux-koans's Introduction

React Redux koans

This is an exercise based on unit tests to help you learn Redux. This exercise is designed and crafted with love by ReactJS.Academy. We've called the app you are about to fix "Brewery JS". You'll see why once you fix it, we hope you like it.

How to install

  • git clone [email protected]:reactjs-academy/react-redux-koans.git
  • cd react-redux-koans
  • npm i
  • Don't do npm start because you need to fix the app before

First part of the exercise, fix the app.

We have written some unit tests for the relevant code. Each unit test is side by side to the code it's testing. Example src/actions/index.js unit tests are in src/actions/index.spec.js

The idea is simple, you should execute our unit tests and fix the errors. Once all the code passes the unit tests then you are able to start the app by doing npm start.

In order make easier to understand Redux we have created a simplified version of redux and react-redux. We have some bugs in our simplified version of reduxand react-redux that you should fix. The unit tests will help you fix the app and learn by "fixing".

  • execute npm test

Second part of the exercise, improve the app.

  1. Replace our simplified version of react and react-redux with https://github.com/reactjs/redux and https://github.com/reactjs/react-redux now that you understood how it works. The official ones have cooler features that you should use ;)

  2. When we add the same beer to the basket twice we get an error in the browser's console. We suggest you the following fix, when a beer is added to the basket it should be removed from the List of beers you can buy.

  3. Move the state of components/App.js (this.state.isSideMenuOpen) to the store

  4. When a beer is added to the basket the side menu with the basket should be opened

  5. EXTRA BONUS! There is a button in the Basket component that should remove the beer from the basket. Implement it with its corresponding reducer and actions. When a beer is removed from the basket it should be available in the main list so it can be added to the basket again

License

This material is available for private, non-commercial use under the GPL version 3.

react-redux-koans's People

Contributors

alexlobera avatar fsdevlondon avatar

Watchers

 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.