#Shared expense tracker app how to#

The reduce() method executes a function to output a single value from all the individual values from an array. In order to get started using Bootstrap in a React app, you have first to create a react app.Įnter fullscreen mode Exit fullscreen mode

#Shared expense tracker app how to#

Know, how to run simple npm/yarn commandsīootstrap 4 uses flexbox to handle the layout of a web app.NodeJS above 10.x.x installed on your local machine.In order to follow this tutorial, you are required to have the following installed on your dev machine:

Adding localStorage API to persist data.

Here is a demo of how the end result of this tutorial will look like. Furthermore, to add real-time functionality, you are going to learn how to use localStorage API in a React application. In this tutorial, you are going to build a small Expense Tracker app that using React Hooks. In other words, Hooks allow us to write apps in React with functional components. Using Hooks, you do not have to refactor a class component when using React or React Native into a functional component only because you want to introduce local state or lifecycle methods in that component. Since previously, only a class component allowed you to have a local state. If you are familiar with React, you know that the functional component has been called as a functional stateless component. They are functions that allow you to use React state and a component's lifecycle methods in a functional component.

Hooks in React have been available since the version 16.7.0-alpha.