ReactJS: Reminder Pro Webapp using ReactJS and Redux

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

Requirement:

We are building a Reminder Pro application, where you can view the existing reminders, add a new reminder, delete a particular reminder or clear all the reminders. Screenshots for the same are provided below.

Home Page:

The Home page will show the already added existing reminders.

Add a new Reminder:

You can add a new reminder by entering some text, date time (for reminder) and click “Add Reminder” button.

Even if you refresh the browser, the reminder data still persists, as they are stored in Browser cookies in this example.

Delete a particular reminder:

Click the Cross mark (x) across any reminder entry, which will delete that particular reminder. For example, I am clicking the cross mark (x) across the 3rd entry “Read 5 chapters of English textbook in 3 days “ and it will be removed from the list.

Clear All Reminders:

It is possible to delete all the reminders by clicking the “Clear Reminders” button, which will remove all the pending reminder entries from cache.

GitHub link:

https://github.com/shyamnarayan2001/ReactJS_Projects/tree/master/reminder-pro 

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\reminder-pro)

4. Now install the redux and react-redux npm bundles using the following command from your project path (in my case, it is D:\Projects\ReactJS_Projects\reminder-pro)

npm install redux react-redux --save

 5. Now install the Moment (https://momentjs.com/), which is a java script library to parse, validate, manipulate and display dates and times in Javascript. To install its respective npm bundle, run the following command from your project path (in my case, it is D:\Projects\ReactJS_Projects\reminder-pro)

npm install moment –save

Note: In order to remove the npm warning related to fsevents, please run the following command:

npm –i -f

6. Now let’s install sfcookies library, which will help to access browser cookies like storing value to browser cookie, read the value from cookie and delete a cookie. To install its respective npm bundle, run the following command from your project path (in my case, it is D:\Projects\ReactJS_Projects\reminder-pro)

npm install sfcookies

7. Execute the command "npm start"

8. 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 installated.

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 

2. React CLI:

Assuming that Node JS is already installed in the previous step, now let’s install React JS CLI (Command Line Interface). Here I am using the path D:\Projects\ReactJS_Projects (You can use any path of your choice).

npm install -g create-react-app

-g here stands for global, so that we can run from anywhere.

Note: In my case, the create-react-app is already installed, so my screen shot below might differ from your screen shot.

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 bootsrap stylesheet.

Let’s go through each files in detail:

<script src="https://gist.github.com/shyamnarayan2001/417fc2a95417ae02fa1fd89837308537.js"></script>

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(reducer);

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\constants.js

Define all the 3 constants to Add Reminder, Delete Reminder, Clear Reminders

export const ADD_REMINDER = 'ADD_REMINDER';

export const DELETE_REMINDER = 'DELETE_REMINDER';

export const CLEAR_REMINDERS = 'CLEAR_REMINDERS';

src\actions\index.js

Define the 3 action creators used in this project – 

a) addReminder(text, dueDate): This action creator is of type ADD_REMINDER, holds the action attributes - text, dueDate:

const action = {

    type: ADD_REMINDER,

    text,

    dueDate

  }

b) deleteReminder(id): This action creator is of type DELETE_REMINDER, for the incoming id:

const action = {

    type: DELETE_REMINDER,

    id

  }

c) clearReminders():This action creator is of type CLEAR_REMINDER,

type: CLEAR_REMINDERS

src\reducers\index.js

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

Reducer has 3 reminders each called by switch case on action.type.

switch(action.type){

case ADD_REMINDER:

1. Modify the state to add id (Math.random value), text, dueDate

2. Set the new modified state to cookie using bake_cookie() function

case DELETE_REMINDER:

1. Modify the state by deleting the incoming id

2. Set the new modified state to cookie using bake_cookie() function

case CLEAR_REMINDERS:

1. Modify the state by clearing the reminders.

2. Set the new modified state to cookie using bake_cookie() function

}

src\components\App.js

1. Define the constructor by setting default values to state attributes (text, dueDate)

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

a. With button “Add Reminder” on-click invoking the function addReminder()

b. With close (X) button on-click, invoking the function deleteReminder(id)

c. With button “Clear Reminders” on-click invoking the function clearReminders()

3. 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{

reminders: state

}

}

export default connect(mapStateToProps, {addReminder, deleteReminder, clearReminders})(App);