```

Now, we have successfully used the CSS modules in our application. The final and complete code is − ``` import React from 'react'; import './ExpenseEntryItem.css'; import styles from './ExpenseEntryItem.module.css' class ExpenseEntryItem extends React.Component { render() { return (

Item: Mango Juice

Amount: 30.00

Spend Date: 2020-10-10

Category: Food

); } } export default ExpenseEntryItem; ```

Next, serve the application using npm command. ``` npm start ```

Next, open the browser and enter *http://localhost:3000* in the address bar and press enter. ![CSS Modules](https://www.tutorialspoint.com/reactjs/images/css_modules.jpg) # ReactJS - Properties (props) React enables developers to create dynamic and advanced component using properties. Every component can have attributes similar to HTML attributes and each attribute’s value can be accessed inside the component using properties (props). For example, *Hello* component with a name attribute can be accessed inside the component through this.props.name variable. ``` // value of name will be "Hello* const name = this.props.name ```

React properties supports attribute’s value of different types. They are as follows, - String - Number - Datetime - Array - List - Objects Let us learn one by one in this chapter. - [Create a component using Properties](https://www.tutorialspoint.com/reactjs/reactjs_create_component_using_properties.htm) - [Nested Components](https://www.tutorialspoint.com/reactjs/reactjs_nested_components.htm) - [Use Component](https://www.tutorialspoint.com/reactjs/reactjs_use_components.htm) - [Component Collection](https://www.tutorialspoint.com/reactjs/reactjs_component_collection.htm) # ReactJS - Event management Event management is one of the important features in a web application. It enables the user to interact with the application. React support all events available in a web application. React event handling is very similar to DOM events with little changes. Let us learn how to handle events in a React application in this chapter. Let us see the step-by-step process of handling an event in a React component. - Define an event handler method to handle the given event. ``` log() { cosole.log("Event is fired"); } ```

React provides an alternative syntax using lambda function to define event handler. The lambda syntax is − ``` log = () => { cosole.log("Event is fired"); } ```

If you want to know the target of the event, then add an argument **e** in the handler method. React will send the event target details to the handler method. ``` log(e) { cosole.log("Event is fired"); console.log(e.target); } ```

The alternative lambda syntax is − ``` log = (e) => { cosole.log("Event is fired"); console.log(e.target); } ```

If you want to send extra details during an event, then add the extra details as initial argument and then add argument **(e)** for event target. ``` log(extra, e) { cosole.log("Event is fired"); console.log(e.target); console.log(extra); console.log(this); } ```

The alternative lambda syntax is as follows − ``` log = (extra, e) => { cosole.log("Event is fired"); console.log(e.target); console.log(extra); console.log(this); } ```

Bind the event handler method in the constructor of the component. This will ensure the availability of *this* in the event handler method. ``` constructor(props) { super(props); this.logContent = this.logContent.bind(this); } ```

If the event handler is defined in alternate lambda syntax, then the binding is not needed. *this* keyword will be automatically bound to the event handler method. Set the event handler method for the specific event as specified below − ```

...

```

To set extra arguments, bind the event handler method and then pass the extra information as second argument. ```

...

```

The alternate lambda syntax is as follows − ```

...

```

Here, - [Create a event-aware component](https://www.tutorialspoint.com/reactjs/reactjs_create_event_aware_component.htm) - [Introduce events in Expense manager app](https://www.tutorialspoint.com/reactjs/reactjs_introduce_events_expense_manager_app.htm) # ReactJS - State Management State management is one of the important and unavoidable features of any dynamic application. React provides a simple and flexible API to support state management in a React component. Let us understand how to maintain state in React application in this chapter. ## What is state? *State* represents the value of a dynamic properties of a React component at a given instance. React provides a dynamic data store for each component. The internal data represents the state of a React component and can be accessed using this.state member variable of the component. Whenever the state of the component is changed, the component will re-render itself by calling the *render()* method along with the new state. A simple example to better understand the state management is to analyse a real-time clock component. The clock component primary job is to show the date and time of a location at the given instance. As the current time will change every second, the clock component should maintain the current date and time in it’s state. As the state of the clock component changes every second, the clock’s *render()* method will be called every second and the *render()* method show the current time using it’s current state. The simple representation of the state is as follows − ``` { date: '2020-10-10 10:10:10' } ```

Let us create a new *Clock* component later in this chapter. Here, - [State management API](https://www.tutorialspoint.com/reactjs/reactjs_state_management_api.htm) - [Stateless component](https://www.tutorialspoint.com/reactjs/reactjs_stateless_component.htm) - [State management using React Hooks](https://www.tutorialspoint.com/reactjs/reactjs_state_management_react_hooks.htm) - [Component Life cycle](https://www.tutorialspoint.com/reactjs/reactjs_component_life_cycle.htm) - [Component life cycle using React Hooks](https://www.tutorialspoint.com/reactjs/reactjs_component_life_cycle_react_hooks.htm) - [Layout in component](https://www.tutorialspoint.com/reactjs/reactjs_layout_component.htm) - [Pagination](https://www.tutorialspoint.com/reactjs/reactjs_pagination.htm) - [Material UI](https://www.tutorialspoint.com/reactjs/reactjs_material_ui.htm)

# ReactJS - Http Client Programming Http client programming enables the application to connect and fetch data from http server through JavaScript. It reduces the data transfer between client and server as it fetches only the required data instead of the whole design and subsequently improves the network speed. It improves the user experience and becomes an indispensable feature of every modern web application. Nowadays, lot of server side application exposes its functionality through REST API (functionality over HTTP protocol) and allows any client application to consume the functionality. React does not provide it’s own http programming api but it supports browser’s built-in *fetch()* api as well as third party client library like axios to do client side programming. Let us learn how to do http programming in React application in this chapter. Developer should have a basic knowledge in Http programming to understand this chapter. ## Expense Rest Api Server The prerequisite to do Http programming is the basic knowledge of Http protocol and REST API technique. Http programming involves two part, server and client. React provides support to create client side application. Express a popular web framework provides support to create server side application. Let us first create a Expense Rest Api server using express framework and then access it from our *ExpenseManager* application using browser’s built-in fetch api. Open a command prompt and create a new folder, *express-rest-api*. ``` cd /go/to/workspace mkdir apiserver cd apiserver ```

Initialize a new node application using the below command − ``` npm init ```

The *npm init* will prompt and ask us to enter basic project details. Let us enter *apiserver* for project name and *server.js* for entry point. Leave other configuration with default option. ``` This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install ` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (apiserver) version: (1.0.0) description: Rest api for Expense Application entry point: (index.js) server.js test command: git repository: keywords: author: license: (ISC) About to write to \path\to\workspace\expense-rest-api\package.json: { "name": "expense-rest-api", "version": "1.0.0", "description": "Rest api for Expense Application", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this OK? (yes) yes ```

Next, install *express, nedb & cors* modules using below command − ``` npm install express nedb cors ```

- *express* is used to create server side application. - *nedb* is a datastore used to store the expense data. - *cors* is a middleware for *express* framework to configure the client access details. Next, let us create a file, data.csv and populate it with initial expense data for testing purposes. The structure of the file is that it contains one expense entry per line. ``` Pizza,80,2020-10-10,Food Grape Juice,30,2020-10-12,Food Cinema,210,2020-10-16,Entertainment Java Programming book,242,2020-10-15,Academic Mango Juice,35,2020-10-16,Food Dress,2000,2020-10-25,Cloth Tour,2555,2020-10-29,Entertainment Meals,300,2020-10-30,Food Mobile,3500,2020-11-02,Gadgets Exam Fees,1245,2020-11-04,Academic ```

Next, create a file *expensedb.js* and include code to load the initial expense data into the data store. The code checks the data store for initial data and load only if the data is not available in the store. ``` var store = require("nedb") var fs = require('fs'); var expenses = new store({ filename: "expense.db", autoload: true }) expenses.find({}, function (err, docs) { if (docs.length == 0) { loadExpenses(); } }) function loadExpenses() { readCsv("data.csv", function (data) { console.log(data); data.forEach(function (rec, idx) { item = {} item.name = rec[0]; item.amount = parseFloat(rec[1]); item.spend_date = new Date(rec[2]); item.category = rec[3]; expenses.insert(item, function (err, doc) { console.log('Inserted', doc.item_name, 'with ID', doc._id); }) }) }) } function readCsv(file, callback) { fs.readFile(file, 'utf-8', function (err, data) { if (err) throw err; var lines = data.split('\r\n'); var result = lines.map(function (line) { return line.split(','); }); callback(result); }); } module.exports = expenses ```

Next, create a file, *server.js* and include the actual code to list, add, update and delete the expense entries. ``` var express = require("express") var cors = require('cors') var expenseStore = require("./expensedb.js") var app = express() app.use(cors()); var bodyParser = require("body-parser"); app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); var HTTP_PORT = 8000 app.listen(HTTP_PORT, () => { console.log("Server running on port %PORT%".replace("%PORT%", HTTP_PORT)) }); app.get("/", (req, res, next) => { res.json({ "message": "Ok" }) }); app.get("/api/expenses", (req, res, next) => { expenseStore.find({}, function (err, docs) { res.json(docs); }); }); app.get("/api/expense/:id", (req, res, next) => { var id = req.params.id; expenseStore.find({ _id: id }, function (err, docs) { res.json(docs); }) }); app.post("/api/expense/", (req, res, next) => { var errors = [] if (!req.body.item) { errors.push("No item specified"); } var data = { name: req.body.name, amount: req.body.amount, category: req.body.category, spend_date: req.body.spend_date, } expenseStore.insert(data, function (err, docs) { return res.json(docs); }); }) app.put("/api/expense/:id", (req, res, next) => { var id = req.params.id; var errors = [] if (!req.body.item) { errors.push("No item specified"); } var data = { _id: id, name: req.body.name, amount: req.body.amount, category: req.body.category, spend_date: req.body.spend_date, } expenseStore.update( { _id: id }, data, function (err, docs) { return res.json(data); }); }) app.delete("/api/expense/:id", (req, res, next) => { var id = req.params.id; expenseStore.remove({ _id: id }, function (err, numDeleted) { res.json({ "message": "deleted" }) }); }) app.use(function (req, res) { res.status(404); }); ```

Now, it is time to run the application. ``` npm run start ```

Next, open a browser and enter *http://localhost:8000/* in the address bar. ``` { "message": "Ok" } ```

It confirms that our application is working fine. Finally, change the url to *http://localhost:8000/api/expense* and press enter. The browser will show the initial expense entries in JSON format. ``` [ ... { "name": "Pizza", "amount": 80, "spend_date": "2020-10-10T00:00:00.000Z", "category": "Food", "_id": "5H8rK8lLGJPVZ3gD" }, ... ] ```

Let us use our newly created expense server in our Expense manager application through *fetch()* api in the upcoming section. ## The fetch() api Let us create a new application to showcase client side programming in React. First, create a new react application, *react-http-app* using *Create React App* or *Rollup* bundler by following instruction in *Creating a React application* chapter. Next, open the application in your favorite editor. Next, create *src* folder under the root directory of the application. Next, create *components* folder under src folder. Next, create a file, *ExpenseEntryItemList.css* under *src/components* folder and include generic table styles. ``` html { font-family: sans-serif; } table { border-collapse: collapse; border: 2px solid rgb(200,200,200); letter-spacing: 1px; font-size: 0.8rem; } td, th { border: 1px solid rgb(190,190,190); padding: 10px 20px; } th { background-color: rgb(235,235,235); } td, th { text-align: left; } tr:nth-child(even) td { background-color: rgb(250,250,250); } tr:nth-child(odd) td { background-color: rgb(245,245,245); } caption { padding: 10px; } tr.highlight td { background-color: #a6a8bd; } ```

Next, create a file, *ExpenseEntryItemList.js* under *src/components* folder and start editing. Next, import *React* library. ``` import React from 'react'; ```

Next, create a class, ExpenseEntryItemList and call constructor with props. ``` class ExpenseEntryItemList extends React.Component { constructor(props) { super(props); } } ```

Next, initialize the state with empty list in the constructor. ``` this.state = { isLoaded: false, items: [] } ```

Next, create a method, *setItems* to format the items received from remote server and then set it into the state of the component. ``` setItems(remoteItems) { var items = []; remoteItems.forEach((item) => { let newItem = { id: item._id, name: item.name, amount: item.amount, spendDate: item.spend_date, category: item.category } items.push(newItem) }); this.setState({ isLoaded: true, items: items }); } ```

Next, add a method, *fetchRemoteItems* to fetch the items from the server. ``` fetchRemoteItems() { fetch("http://localhost:8000/api/expenses") .then(res => res.json()) .then( (result) => { this.setItems(result); }, (error) => { this.setState({ isLoaded: false, error }); } ) } ```

Here, - *fetch* api is used to fetch the item from the remote server. - *setItems* is used to format and store the items in the state. Next, add a method, *deleteRemoteItem* to delete the item from the remote server. ``` deleteRemoteItem(id) { fetch('http://localhost:8000/api/expense/' + id, { method: 'DELETE' }) .then(res => res.json()) .then( () => { this.fetchRemoteItems() } ) } ```

Here, - *fetch* api is used to delete and fetch the item from the remote server. - *setItems* is again used to format and store the items in the state. Next, call the *componentDidMount* life cycle api to load the items into the component during its mounting phase. ``` componentDidMount() { this.fetchRemoteItems(); } ```

Next, write an event handler to remove the item from the list. ``` handleDelete = (id, e) => { e.preventDefault(); console.log(id); this.deleteRemoteItem(id); } ```

Next, write the render method. ``` render() { let lists = []; if (this.state.isLoaded) { lists = this.state.items.map((item) => {item.name} {item.amount} {new Date(item.spendDate).toDateString()} {item.category} this.handleDelete(item.id, e)}>Remove ); } return (

{lists}

Item	Amount	Date	Category	Remove

); } ```

Finally, export the component. ``` export default ExpenseEntryItemList; ```

Next, create a file, *index.js* under the *src* folder and use *ExpenseEntryItemList* component. ``` import React from 'react'; import ReactDOM from 'react-dom'; import ExpenseEntryItemList from './components/ExpenseEntryItemList'; ReactDOM.render( , document.getElementById('root') ); ```

Finally, create a *public* folder under the root folder and create *index.html* file. ``` React App

```

Next, open a new terminal window and start our server application. ``` cd /go/to/server/application npm start ```

Next, serve the client application using npm command. ``` npm start ```

Next, open the browser and enter *http://localhost:3000* in the address bar and press enter. ![Material](https://www.tutorialspoint.com/reactjs/images/material.jpg) Try to remove the item by clicking the remove link. ![Materials](https://www.tutorialspoint.com/reactjs/images/materials.jpg) # ReactJS - Form Programming The nature of form programming needs the state to be maintained. Because, the input field information will get changed as the user interacts with the form. But as we learned earlier, React library does not store or maintain any state information by itself and component has to use state management api to manage state. Considering this, React provides two types of components to support form programming. - **Controlled component** − In controlled component, React provides a special attribute, value for all input elements and controls the input elements. The value attribute can be used to get and set the value of the input element. It has to be in sync with state of the component. - **Uncontrolled component** − In uncontrolled component, React provides minimal support for form programming. It has to use Ref concept (another react concept to get a DOM element in the React component during runtime) to do the form programming. Let us learn the form programming using controlled as well as uncontrolled component in this chapter. - [Controlled component](https://www.tutorialspoint.com/reactjs/reactjs_controlled_component.htm) - [Uncontrolled Component](https://www.tutorialspoint.com/reactjs/reactjs_uncontrolled_component.htm) - [Formik](https://www.tutorialspoint.com/reactjs/reactjs_formik.htm) # ReactJS - Routing In web application, Routing is a process of binding a web URL to a specific resource in the web application. In React, it is binding an URL to a component. React does not support routing natively as it is basically an user interface library. React community provides many third party component to handle routing in the React application. Let us learn React Router, a top choice [routing library](https://reactrouter.com/) for React application. ## Install React Router Let us learn how to install *React Router* component in our Expense Manager application. Open a command prompt and go to the root folder of our application. ``` cd /go/to/expense/manager ```

Install the react router using below command. ``` npm install react-router-dom --save ```

### Concept React router provides four components to manage navigation in React application. **Router** − Router is th top level component. It encloses the entire application. **Link** − Similar to anchor tag in html. It sets the target url along with reference text. ``` Home ```

Here, **to** attribute is used to set the target url. **Switch & Route** − Both are used together. Maps the target url to the component. **Switch** is the parent component and **Route** is the child component. **Switch** component can have multiple **Route** component and each **Route** component mapping a particular url to a component. ``` ```

Here, **path** attribute is used to match the url. Basically, **Switch** works similar to traditional switch statement in a programming language. It matches the target url with each child route (**path** attribute) one by one in sequence and invoke the first matched route. Along with router component, React router provides option to get set and get dynamic information from the url. For example, in an article website, the url may have article type attached to it and the article type needs to be dynamically extracted and has to be used to fetch the specific type of articles. ``` C Programming Java Programming ... ... } /> ```

Then, in the child component (class component), ``` import { withRouter } from "react-router" class ArticleList extends React.Component { ... ... static getDerivedStateFromProps(props, state) { let newState = { tag: props.match.params.tag } return newState; } ... ... } export default WithRouter(ArticleList) ```

Here, **WithRouter** enables **ArticleList** component to access the tag information through **props**. The same can be done differently in functional components − ``` function ArticleList() { let { tag } = useParams(); return (

ID: {id}

); } ```

Here, **useParams** is a custom React Hooks provided by React Router component. ## Nested routing React router supports nested routing as well. React router provides another React Hooks, **useRouteMatch()** to extract parent route information in nested routes. ``` function ArticleList() { // get the parent url and the matched path let { path, url } = useRouteMatch(); return (

Articles

C with pointer
C basics

Please select an article.

); } function Article() { let { article } = useParams(); return (

The select article is {article}

); } ```

Here, **useRouteMatch** returns the matched path and the target **url**. url can be used to create next level of links and **path** can be used to map next level of components / screens. ## Creating navigation Let us learn how to do routing by creating the possible routing in our expense manager application. The minimum screens of the application are given below − - **Home screen** − Landing or initial screen of the application - **Expense list screen** − Shows the expense items in a tabular format - **Expense add screen** − Add interface to add an expense item First, create a new react application, *react-router-app* using *Create React App* or *Rollup* bundler by following instruction in *Creating a React application* chapter. Next, open the application in your favorite editor. Next, create *src* folder under the root directory of the application. Next, create *components* folder under src folder. Next, create a file, *Home.js* under *src/components* folder and start editing. Next, import *React library*. ``` import React from 'react'; ```

Next, import **Link** from React router library. ``` import { Link } from 'react-router-dom' ```

Next, create a class, Home and call constructor with **props**. ``` class Home extends React.Component { constructor(props) { super(props); } } ```

Next, add *render()* method and show the welcome message and links to add and list expense screen. ``` render() { return (

Welcome to the React tutorial

Click here to view expense list

Click here to add new expenses

) } ```

Finally, export the component. ``` export default Home; ```

The complete source code of the *Home* component is given below − ``` import React from 'react'; import { Link } from 'react-router-dom' class Home extends React.Component { constructor(props) { super(props); } render() { return (

Welcome to the React tutorial

Click here to view expense list

Click here to add new expenses

) } } export default Home; ```

Next, create *ExpenseEntryItemList.js* file under *src/components* folder and create *ExpenseEntryItemList* component. ``` import React from 'react'; import { Link } from 'react-router-dom' class ExpenseEntryItemList extends React.Component { constructor(props) { super(props); } render() { return (

Expenses

Click here to add new expenses

Expense list

) } } export default ExpenseEntryItemList; ```

Next, create *ExpenseEntryItemForm.js* file under *src/components* folder and create *ExpenseEntryItemForm* component. ``` import React from 'react'; import { Link } from 'react-router-dom' class ExpenseEntryItemForm extends React.Component { constructor(props) { super(props); } render() { return (

Add Expense item

Click here to view new expense list

Expense form

) } } export default ExpenseEntryItemForm; ```

Next, create a file, *App.css* under *src/components* folder and add generic css styles. ``` html { font-family: sans-serif; } a{ text-decoration: none; } p, li, a{ font-size: 14px; } nav ul { width: 100%; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: rgb(235,235,235); } nav li { float: left; } nav li a { display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 16px; } nav li a:hover { background-color: rgb(187, 202, 211); } ```

Next, create a file, *App.js* under *src/components* folder and start editing. The purpose of the *App* component is to handle all the screen in one component. It will configure routing and enable navigation to all other components. Next, import React library and other components. ``` import React from 'react'; import Home from './Home' import ExpenseEntryItemList from './ExpenseEntryItemList' import ExpenseEntryItemForm from './ExpenseEntryItemForm' import './App.css' ```

Next, import React router components. ``` import { BrowserRouter as Router, Link, Switch, Route } from 'react-router-dom' ```

Next, write the *render()* method and configure routing. ``` function App() { return (

); } ```

Next, create a file, *index.js* under the *src* folder and use *App* component. ``` import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App'; ReactDOM.render( , document.getElementById('root') ); ```

Finally, create a *public* folder under the root folder and create *index.html* file. ``` React router app

```

Next, serve the application using npm command. ``` npm start ```

Next, open the browser and enter *http://localhost:3000* in the address bar and press enter. Try to navigate the links and confirm that the routing is working. ![Navigate Links](https://www.tutorialspoint.com/reactjs/images/navigate_links.jpg) # ReactJS - Redux React redux is an advanced state management library for React. As we learned earlier, React only supports component level state management. In a big and complex application, large number of components are used. React recommends to move the state to the top level component and pass the state to the nested component using properties. It helps to some extent but it becomes complex when the components increases. React redux chips in and helps to maintain state at the application level. React redux allows any component to access the state at any time. Also, it allows any component to change the state of the application at any time. Let us learn about the how to write a React application using React redux in this chapter. ## Concepts React redux maintains the state of the application in a single place called Redux store. React component can get the latest state from the store as well as change the state at any time. Redux provides a simple process to get and set the current state of the application and involves below concepts. **Store** − The central place to store the state of the application. **Actions** − Action is an plain object with the type of the action to be done and the input (called payload) necessary to do the action. For example, action for adding an item in the store contains **ADD\_ITEM** as type and an object with item’s details as payload. The action can be represented as − ``` { type: 'ADD_ITEM', payload: { name: '..', ... } } ```

***Reducers*** − Reducers are pure functions used to create a new state based on the existing state and the current action. It returns the newly created state. For example, in add item scenario, it creates a new item list and merges the item from the state and new item and returns the newly created list. ***Action creators*** − *Action creator* creates an action with proper action type and data necessary for the action and returns the action. For example, ***addItem*** action creator returns below object − ``` { type: 'ADD_ITEM', payload: { name: '..', ... } } ```

**Component** − Component can connect to the store to get the current state and dispatch action to the store so that the store executes the action and updates it’s current state. The workflow of a typical redux store can be represented as shown below. ![Redux Store](https://www.tutorialspoint.com/reactjs/images/redux_store.jpg) - React component subscribes to the store and get the latest state during initialization of the application. - To change the state, React component creates necessary action and dispatches the action. - Reducer creates a new state based on the action and returns it. Store updates itself with the new state. - Once the state changes, store sends the updated state to all its subscribed component. ## Redux API Redux provides a single api, *connect* which will connect a components to the store and allows the component to get and set the state of the store. The signature of the connect API is − ``` function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?) ```

All parameters are optional and it returns a HOC (higher order component). A higher order component is a function which wraps a component and returns a new component. ``` let hoc = connect(mapStateToProps, mapDispatchToProps) let connectedComponent = hoc(component) ```

Let us see the first two parameters which will be enough for most cases. - **mapStateToProps** − Accepts a function with below signature. ``` (state, ownProps?) => Object ```

Here, **state** refers current state of the store and **Object** refers the new props of the component. It gets called whenever the state of the store is updated. ``` (state) => { prop1: this.state.anyvalue } ```

- ***mapDispatchToProps*** − Accepts a function with below signature. ``` Object | (dispatch, ownProps?) => Object ```

Here, **dispatch** refers the dispatch object used to dispatch action in the redux store and **Object** refers one or more dispatch functions as props of the component. ``` (dispatch) => { addDispatcher: (dispatch) => dispatch({ type: 'ADD_ITEM', payload: { } }), removeispatcher: (dispatch) => dispatch({ type: 'REMOVE_ITEM', payload: { } }), } ```

## Provider component React Redux provides a Provider component and its sole purpose to make the Redux store available to its all nested components connected to store using connect API. The sample code is given below − ``` import React from 'react' import ReactDOM from 'react-dom' import { Provider } from 'react-redux' import { App } from './App' import createStore from './createReduxStore' const store = createStore() ReactDOM.render( , document.getElementById('root') ) ```

Now, all the component inside the App component can get access to the Redux store by using connect API. ### Working example Let us recreate our expense manager application and uses the React redux concept to maintain the state of the application. First, create a new react application, *react-message-app* using Create *React App* or *Rollup* bundler by following instruction in Creating a React application chapter. Next, install Redux and React redux library. ``` npm install redux react-redux --save ```

Next, install uuid library to generate unique identifier for new expenses. ``` npm install uuid --save ```

Next, open the application in your favorite editor. Next, create *src* folder under the root directory of the application. Next, create *actions* folder under *src* folder. Next, create a file, *types.js* under *src/actions* folder and start editing. Next, add two action type, one for add expense and one for remove expense. ``` export const ADD_EXPENSE = 'ADD_EXPENSE'; export const DELETE_EXPENSE = 'DELETE_EXPENSE'; ```

Next, create a file, *index.js* under *src/actions* folder to add action and start editing. Next, import **uuid** to create unique identifier. ``` import { v4 as uuidv4 } from 'uuid'; ```

Next, import action types. ``` import { ADD_EXPENSE, DELETE_EXPENSE } from './types'; ```

Next, add a new function to return action type for adding an expense and export it. ``` export const addExpense = ({ name, amount, spendDate, category }) => ({ type: ADD_EXPENSE, payload: { id: uuidv4(), name, amount, spendDate, category } }); ```

Here, the function expects expense object and return action type of **ADD\_EXPENSE** along with a payload of expense information. Next, add a new function to return action type for deleting an expense and export it. ``` export const deleteExpense = id => ({ type: DELETE_EXPENSE, payload: { id } }); ```

Here, the function expects id of the expense item to be deleted and return action type of ‘DELETE\_EXPENSE’ along with a payload of expense id. The complete source code of the action is given below − ``` import { v4 as uuidv4 } from 'uuid'; import { ADD_EXPENSE, DELETE_EXPENSE } from './types'; export const addExpense = ({ name, amount, spendDate, category }) => ({ type: ADD_EXPENSE, payload: { id: uuidv4(), name, amount, spendDate, category } }); export const deleteExpense = id => ({ type: DELETE_EXPENSE, payload: { id } }); ```

Next, create a new folder, reducers under *src* folder. Next, create a file, *index.js* under *src/reducers* to write reducer function and start editing. Next, import the action types. ``` import { ADD_EXPENSE, DELETE_EXPENSE } from '../actions/types'; ```

Next, add a function, *expensesReducer* to do the actual feature of adding and updating expenses in the redux store. ``` export default function expensesReducer(state = [], action) { switch (action.type) { case ADD_EXPENSE: return [...state, action.payload]; case DELETE_EXPENSE: return state.filter(expense => expense.id !== action.payload.id); default: return state; } } ```

The complete source code of the reducer is given below − ``` import { ADD_EXPENSE, DELETE_EXPENSE } from '../actions/types'; export default function expensesReducer(state = [], action) { switch (action.type) { case ADD_EXPENSE: return [...state, action.payload]; case DELETE_EXPENSE: return state.filter(expense => expense.id !== action.payload.id); default: return state; } } ```

Here, the reducer checks the action type and execute the relevant code. Next, create *components* folder under *src* folder. Next, create a file, *ExpenseEntryItemList.css* under *src/components* folder and add generic style for the html tables. ``` html { font-family: sans-serif; } table { border-collapse: collapse; border: 2px solid rgb(200,200,200); letter-spacing: 1px; font-size: 0.8rem; } td, th { border: 1px solid rgb(190,190,190); padding: 10px 20px; } th { background-color: rgb(235,235,235); } td, th { text-align: left; } tr:nth-child(even) td { background-color: rgb(250,250,250); } tr:nth-child(odd) td { background-color: rgb(245,245,245); } caption { padding: 10px; } tr.highlight td { background-color: #a6a8bd; } ```

Next, create a file, *ExpenseEntryItemList.js* under *src/components* folder and start editing. Next, import React and React redux library. ``` import React from 'react'; import { connect } from 'react-redux'; ```

Next, import ExpenseEntryItemList.css file. ``` import './ExpenseEntryItemList.css'; ```

Next, import action creators. ``` import { deleteExpense } from '../actions'; import { addExpense } from '../actions'; ```

Next, create a class, ExpenseEntryItemList and call constructor with **props**. ``` class ExpenseEntryItemList extends React.Component { constructor(props) { super(props); } } ```

Next, create **mapStateToProps** function. ``` const mapStateToProps = state => { return { expenses: state }; }; ```

Here, we copied the input state to **expenses** props of the component. Next, create **mapDispatchToProps** function. ``` const mapDispatchToProps = dispatch => { return { onAddExpense: expense => { dispatch(addExpense(expense)); }, onDelete: id => { dispatch(deleteExpense(id)); } }; }; ```

Here, we created two function, one to dispatch add expense **(addExpense)** function and another to dispatch delete expense **(deleteExpense)** function and mapped those function to props of the component. Next, export the component using **connect** api. ``` export default connect( mapStateToProps, mapDispatchToProps )(ExpenseEntryItemList); ```

Now, the component gets three new properties given below − - expenses − list of expense - onAddExpense − function to dispatch **addExpense** function - onDelete − function to dispatch **deleteExpense** function Next, add few expense into the redux store in the constructor using **onAddExpense** property. ``` if (this.props.expenses.length == 0) { const items = [ { id: 1, name: "Pizza", amount: 80, spendDate: "2020-10-10", category: "Food" }, { id: 2, name: "Grape Juice", amount: 30, spendDate: "2020-10-12", category: "Food" }, { id: 3, name: "Cinema", amount: 210, spendDate: "2020-10-16", category: "Entertainment" }, { id: 4, name: "Java Programming book", amount: 242, spendDate: "2020-10-15", category: "Academic" }, { id: 5, name: "Mango Juice", amount: 35, spendDate: "2020-10-16", category: "Food" }, { id: 6, name: "Dress", amount: 2000, spendDate: "2020-10-25", category: "Cloth" }, { id: 7, name: "Tour", amount: 2555, spendDate: "2020-10-29", category: "Entertainment" }, { id: 8, name: "Meals", amount: 300, spendDate: "2020-10-30", category: "Food" }, { id: 9, name: "Mobile", amount: 3500, spendDate: "2020-11-02", category: "Gadgets" }, { id: 10, name: "Exam Fees", amount: 1245, spendDate: "2020-11-04", category: "Academic" } ] items.forEach((item) => { this.props.onAddExpense( { name: item.name, amount: item.amount, spendDate: item.spendDate, category: item.category } ); }) } ```

Next, add an event handler to delete the expense item using expense id. ``` handleDelete = (id,e) => { e.preventDefault(); this.props.onDelete(id); } ```

Here, the event handler calls the **onDelete** dispatcher, which call **deleteExpense** along with the expense id. Next, add a method to calculate the total amount of all expenses. ``` getTotal() { let total = 0; for (var i = 0; i < this.props.expenses.length; i++) { total += this.props.expenses[i].amount } return total; } ```

Next, add *render()* method and list the expense item in the tabular format. ``` render() { const lists = this.props.expenses.map( (item) => {item.name} {item.amount} {new Date(item.spendDate).toDateString()} {item.category} this.handleDelete(item.id, e)}>Remove ); return (

{lists}

Item	Amount	Date	Category	Remove
Total Amount	{this.getTotal()}

); } ```

Here, we set the event handler *handleDelete* to remove the expense from the store. The complete source code of the *ExpenseEntryItemList* component is given below − ``` import React from 'react'; import { connect } from 'react-redux'; import './ExpenseEntryItemList.css'; import { deleteExpense } from '../actions'; import { addExpense } from '../actions'; class ExpenseEntryItemList extends React.Component { constructor(props) { super(props); if (this.props.expenses.length == 0){ const items = [ { id: 1, name: "Pizza", amount: 80, spendDate: "2020-10-10", category: "Food" }, { id: 2, name: "Grape Juice", amount: 30, spendDate: "2020-10-12", category: "Food" }, { id: 3, name: "Cinema", amount: 210, spendDate: "2020-10-16", category: "Entertainment" }, { id: 4, name: "Java Programming book", amount: 242, spendDate: "2020-10-15", category: "Academic" }, { id: 5, name: "Mango Juice", amount: 35, spendDate: "2020-10-16", category: "Food" }, { id: 6, name: "Dress", amount: 2000, spendDate: "2020-10-25", category: "Cloth" }, { id: 7, name: "Tour", amount: 2555, spendDate: "2020-10-29", category: "Entertainment" }, { id: 8, name: "Meals", amount: 300, spendDate: "2020-10-30", category: "Food" }, { id: 9, name: "Mobile", amount: 3500, spendDate: "2020-11-02", category: "Gadgets" }, { id: 10, name: "Exam Fees", amount: 1245, spendDate: "2020-11-04", category: "Academic" } ] items.forEach((item) => { this.props.onAddExpense( { name: item.name, amount: item.amount, spendDate: item.spendDate, category: item.category } ); }) } } handleDelete = (id,e) => { e.preventDefault(); this.props.onDelete(id); } getTotal() { let total = 0; for (var i = 0; i < this.props.expenses.length; i++) { total += this.props.expenses[i].amount } return total; } render() { const lists = this.props.expenses.map((item) => {item.name} {item.amount} {new Date(item.spendDate).toDateString()} {item.category} this.handleDelete(item.id, e)}>Remove ); return (

{lists}

Item	Amount	Date	Category	Remove
Total Amount	{this.getTotal()}

); } } const mapStateToProps = state => { return { expenses: state }; }; const mapDispatchToProps = dispatch => { return { onAddExpense: expense => { dispatch(addExpense(expense)); }, onDelete: id => { dispatch(deleteExpense(id)); } }; }; export default connect( mapStateToProps, mapDispatchToProps )(ExpenseEntryItemList); ```

Next, create a file, *App.js* under the *src/components* folder and use *ExpenseEntryItemList* component. ``` import React, { Component } from 'react'; import ExpenseEntryItemList from './ExpenseEntryItemList'; class App extends Component { render() { return (

); } } export default App; ```

Next, create a file, *index.js* under src folder. ``` import React from 'react'; import ReactDOM from 'react-dom'; import { createStore } from 'redux'; import { Provider } from 'react-redux'; import rootReducer from './reducers'; import App from './components/App'; const store = createStore(rootReducer); ReactDOM.render( , document.getElementById('root') ); ```

Here, - Create a store using **createStore** by attaching the our reducer. - Used Provider component from React redux library and set the store as props, which enables all the nested component to ***connect*** to store using connect api. Finally, create a *public* folder under the root folder and create *index.html* file. ``` React Containment App

```

Next, serve the application using npm command. ``` npm start ```

Next, open the browser and enter *http://localhost:3000* in the address bar and press enter. Clicking the remove link will remove the item from redux store. ![Redux](https://www.tutorialspoint.com/reactjs/images/redux.jpg) # ReactJS - Animation Animation is an exciting feature of modern web application. It gives a refreshing feel to the application. React community provides many excellent react based animation library like React Motion, React Reveal, react-animations, etc., React itself provides an animation library, *React Transition Group* as an add-on option earlier. It is an independent library enhancing the earlier version of the library. Let us learn React Transition Group animation library in this chapter. ## React Transition Group *React Transition Group* library is a simple implementation of animation. It does not do any animation out of the box. Instead, it exposes the core animation related information. Every animation is basically transition of an element from one state to another. The library exposes minimum possible state of every element and they are given below − - Entering - Entered - Exiting - Exited The library provides options to set CSS style for each state and animate the element based on the style when the element moves from one state to another. The library provides in props to set the current state of the element. If *in* props value is true, then it means the element is moving from *entering* state to *exiting* state. If in props value is false, then it means the element is moving from exiting to exited. ## Transition *Transition* is the basic component provided by the *React Transition Group* to animate an element. Let us create a simple application and try to fade in / fade out an element using *Transition element*. First, create a new react application, *react-animation-app* using *Create React App* or *Rollup* bundler by following instruction in *Creating a React application* chapter. Next, install *React Transition Group* library. ``` cd /go/to/project npm install react-transition-group --save ```

Next, open the application in your favorite editor. Next, create src folder under the root directory of the application. Next, create *components* folder under *src* folder. Next, create a file, *HelloWorld.js* under *src/components* folder and start editing. Next, import *React* and animation library. ``` import React from 'react'; import { Transition } from 'react-transition-group' ```

Next, create the *HelloWorld* component. ``` class HelloWorld extends React.Component { constructor(props) { super(props); } } ```

Next, define transition related styles as JavaScript objects in the constructor. ``` this.duration = 2000; this.defaultStyle = { transition: `opacity ${this.duration}ms ease-in-out`, opacity: 0, } this.transitionStyles = { entering: { opacity: 1 }, entered: { opacity: 1 }, exiting: { opacity: 0 }, exited: { opacity: 0 }, }; ```

Here, - *defaultStyles* sets the transition animation - *transitionStyles* set the styles for various states Next, set the initial state for the element in the constructor. ``` this.state = { inProp: true } ```

Next, simulate the animation by changing the *inProp* values every 3 seconds. ``` setInterval(() => { this.setState((state, props) => { let newState = { inProp: !state.inProp }; return newState; }) }, 3000); ```

Next, create a *render* function. ``` render() { return ( ); } ```

Next, add *Transition* component. Use *this.state.inProp* for *in* prop and *this.duration* for *timeout prop*. Transition component expects a function, which returns the user interface. It is basically a *Render props*. ``` render() { return ( {state => ({ ... component's user interface. }) ); } ```

Next, write the components user interface inside a container and set the *defaultStyle* and *transitionStyles* for the container. ``` render() { return ( {state => (

Hello World!

)} ); } ```

Finally, expose the component. ``` export default HelloWorld ```

The complete source code of the component is as follows − ``` import React from "react"; import { Transition } from 'react-transition-group'; class HelloWorld extends React.Component { constructor(props) { super(props); this.duration = 2000; this.defaultStyle = { transition: `opacity ${this.duration}ms ease-in-out`, opacity: 0, } this.transitionStyles = { entering: { opacity: 1 }, entered: { opacity: 1 }, exiting: { opacity: 0 }, exited: { opacity: 0 }, }; this.state = { inProp: true } setInterval(() => { this.setState((state, props) => { let newState = { inProp: !state.inProp }; return newState; }) }, 3000); } render() { return ( {state => (

Hello World!

)} ); } } export default HelloWorld; ```

Next, create a file, *index.js* under the *src* folder and use *HelloWorld* component. ``` import React from 'react'; import ReactDOM from 'react-dom'; import HelloWorld from './components/HelloWorld'; ReactDOM.render(

Hello!

Hello React!

Hello World!

Hello World!

Hello React!

Hello React!

Hello React!

Hello React!

ID: {id}

Articles

Please select an article.

The select article is {article}

Expenses

Add Expense item

Hello World!

Hello World!

Hello World!

Hello World!