Math App Webapp using React JS and Redux

Objective: The objective of this tutorial is to develop Math App using React JS and Redux.

Requirement:
We are building a Math application, where you can view two buttons – Increment and Decrement. On-clicking the “increment” button, you will see the number incremented by 1 and on-clicking the “decrement” button, it will decrement the number by 1. Screenshots for the same are provided below.
Home Page:
The Home page will show the already added existing reminders.

On-clicking the Increment Button, the 0 should be incremented by 1 for every click. Similarly, on-click of Decrement button, it should decrement the number by 1.

GitHub link:
https://github.com/shyamnarayan2001/ReactJS_Projects/tree/master/mathapp

Installation Steps:
1. Setup all the required pre-requisite softwares (as mentioned under the section Pre-requisites)
2. Git clone the project (For example, in my case, under D:\Projects\ReactJS_Projects)
3. Once the clone is complete, open the command prompt and move to the folder \reminder-pro (via cd command) (in my case, it is cd D:\Projects\ReactJS_Projects\mathapp)
4. Execute the command "npm start"
5. Open the browser and hit the URL http://localhost:3000/#, to see the output, as shown in the screen shots above.

Pre-requisites:
1. Node JS:
We are going to install React CLI (Command Line Interface) in our next step and the pre-requisite for this is to install NodeJS in your laptop. So let’s now install Node JS.
Note: If NodeJS is already installed on your machine, you can skip this step and move to “Node and NPM upgrade on Windows” section of this document, to ensure you have the latest npm version installed.

Installation Steps:
• Download the Windows installer from the Nodes.js® web site.
• Run the installer (the .msi file you downloaded in the previous step.)
• Follow the prompts in the installer (Accept the license agreement, click the NEXT button a bunch of times and accept the default installation settings).

• Restart your computer. You won’t be able to run Node.js® until you restart your computer.

Test the installation:
Make sure you have Node and NPM installed by running simple commands to see what version of each is installed and to run a simple test program:
• Test Node: To see if Node is installed, open the Windows Command Prompt, Powershell or a similar command line tool, and type node -v. This should print a version number, so you’ll see something like this v6.10.2.
• Test NPM: To see if NPM is installed, type npm -v in Terminal. This should print NPM’s version number so you’ll see something like this 5.4.2
• Create a test file and run it: A simple way to test that node.js works is to create a JavaScript file: name it hello.js, and just add the code console.log('Node is installed!');. To run the code simply open your command line program, navigate to the folder where you save the file and type node hello.js. This will start Node and run the code in the hello.js file. You should see the output Node is installed!.

Node and NPM upgrade on Windows:
1. Run PowerShell as Administrator
2. Run the following commands in the PowerShell to upgrade
Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
npm install -g npm-windows-upgrade
npm-windows-upgrade

 Explanation of the Source Code:
Project Structure:

This project uses Redux, which means there will be actions, reducers, dispatchers, stores.
src\actions: holds the files related to actions
src\reducers: holds the files related to reducers
src\components: holds the files related to HTML render files
src\constants.js: holds constants for the whole project
src\index.css: holds the CSS files
src\index.js: holds the Provider, Store definition
public\index.html: holds the bootstrap stylesheet.
Let’s go through each files in detail:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

public\index.html:

1.       Includes the stylesheet for bootsrap.min.css

2.       Include the div root

<div id="root"></div>

                src\index.js:

1.       Invoke the store using CreateStore() function

const store = createStore(rootReducer,

    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

2.       Invoke the ReactDOM.render() function with 2 arguments:

a.       Provider Store by invoking App component (App.js)

b.      Invoke the document.getElelementId (‘root’)

src\index.css:

Holds all the CSS styles defined for the whole UI

src\actions\index.js

Define the 3 action creators used in this project –

a)      incrementNumber(num): This action creator is of type INC_NUMBER, holds the action attribute to increment the  num value.

const action = {

    type: INC_NUMBER,

    num,

  }

return action;

b)      decrementNumber(num): This action creator is of type DEC_NUMBER, holds the action attribute to decrement the  num value.:

const action = {

    type: DELETE_REMINDER,

    num

  }

return action;

src\reducers\index.js

Reducers specify how the application’s state changes in response of an action.

Reducer has 2 action types each called by switch case with parameter action.type.

switch(action.type){

                                case INC_NUMBER:

Increment the number by 1.

                                case DEC_NUMBER:

Decrement the number by 1

                                }

src\components\Number.js

1.    Define the HTML UI elements as JSX inside render() method:

a.       With button “Increment” on-click invoking the function incrementNumber()

b.      With button “Decrement” on-click invoking the function decrementNumber()

2.  Define the react-redux connect() method which always returns a new component by invoking the mapStateToProps() method – which will map state to Props of the components.

function mapStateToProps(state){

                return{

                                num: state.num

                }

}

export default connect(mapStateToProps, {incrementNumber, decrementNumber})(Number);