Code Monkey home page Code Monkey logo

sharinlana / react-redux-counter Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 1.21 MB

React-Redux Counter - Classic Approach (the code is available on the classic-redux branch) & Redux Toolkit Approach (published, see the link below)

Home Page: https://sharinlana.github.io/react-redux-counter/

HTML 22.41% CSS 21.80% JavaScript 55.78%
createstore react react-redux redux redux-toolkit switch-case usedispatch-hook useselector-hook createslice

react-redux-counter's Introduction

Counter App (React-Redux.js)

You are on the classic-redux branch. Here the counter logic has been built using a classic Redux approach

It's a very simple counter app that can:

  • increment the number by 1;
  • decrement the nuber by 1;
  • increase the number by 5;
  • open and close the counter (the counter number will be returned back to 0 on close)

NOTE: The app was created using 2 different approaches:

  • the first uses the classic Redux approach;
  • the second approach uses the Redux toolkit (switch to the 'redux-toolkit' branch to view the code).

The goals of creating this application:

The main goals for me as a web developer were to improve my skills in working with:

  • the classic Redux:
    • the createStore() Redux method;
    • creating the counter reducer functions;
    • the useDispatch() react-redux hook;
    • the useSelector() react-redux hook;
  • JavaScript switch/case statement

To start the app on your machine:

  1. Clone the project to your machine by running:
git clone https://github.com/SharinLana/react-redux-counter.git
  1. To install the project dependencies, run:
npm install
  1. When the installation is complete, run the following command to start the app:
npm start
  1. To view the code of the alternative approach:
git switch redux-toolkit

Languages, frameworks, libraries, packages, tools and technologies:

  • React.js
  • Redux (redux and react-redux packages)
  • JavaScript
  • CSS

Functionalities:

  • incrementing, decrementing the number of the counter;
  • displaying components conditionally;
  • responsive design (mobile adaptation);

react-redux-counter's People

Contributors

sharinlana avatar

Watchers

 avatar  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.