Create a small app in react with keep in mind to utilize most of the basic features while learning and doing handon with react.js
Spend Analyzer is app which accepts Income and Expenses from user and do calculation of overall enteries. Start with creating a simple form that accepts name of transaction, quantity, price and source (income/expense) to get the gross and total of individual transaction done by user.
As of now enteries will be saved in local storage as object and retrive whenever user revisit the analyzer. Enteries can be delete from local storage if required and proper validation handle while submitting entries.
React Minimal Pie Chart component is used to visualize the different entries and create nice representation of data to know total income/expense done by user. Below are the concepts used in while making the react app.
- Pure functions
- Closures
- DOM Events, Custom Events
- JSX Advanced
- Advanced Array destructuring
- useState, useEffect Hooks
- State, Conditional state changes
- Conditional rendering
- State with Arrays, Array/Object Immutability
- Lifting state up
- LocalStorage (setItem, getItem methods)
- Reduce, Map methods
- React-minimal-pie-chart (react visualize component)
- Create React App
- Effect performance
Check the running app here. OR download this app reconfigure in vscode and plyaround with it.
If you are new at React and likes to clear your basics and do some handelful practise then please visit the React Tutorial App, Signup and explore the world.