Budget App - Personal finance management app. Created by Create React App, an environment for react app development (javascript library).
Budget App is an application helps you manage personal finance in a comprehensive way, which is detail, clear, easy to use, comprehensive, summarized according to the principle of 6 financial jars.
NECESSARIES JAR is used for eating, living, rent, utility bills, ... This is a jar that accounts for the highest percentage of your income.
The NECESSARIES JAR takes up 55% of your total income.
PLAY JAR will cover all your income is used for enjoy, shopping, entertainment, take care of yourself, do something new... This is a jar will helping you get motivated to work better.
The PLAY JAR takes up 10% of your total income.
EDUCATION JAR is used to help you improve your knowledge from buying books, attending courses, training, sharing meetings from successful people. This is a jar that helps you don't stop develop your own capacity, thereby generating more income.
The EDUCATION JAR takes up 10% of your total income.
LONG-TERM SAVING JAR is used for big, long-term goals like buying a car, buying a house, having a baby, fulfilling dreams... This is a jar that helps you save long-term to achieve your goals in life.
The LONG-TERM SAVING JAR takes up 10% of your total income.
FIANCIAL FREEDOM JAR is the money you use to participate in activities that generate passive income such as savings, investments, business capital contributions... This is a jar that helps you create "a goose that lays golden eggs" to use when you are no longer working.
The FIANCIAL FREEDOM JAR takes up 10% of your total income.
GIVE JAR is the money you use to do charity, help the community, relatives, friends.
The GIVE JAR takes up 5% of your total income.
React is a javascript library for building user interfaces.
It lets you compose complex UIs from small and isolated pieces of code that can be reusable called component.
A component takes in parameters, called props (short for “properties”). Passing props is how information flows in React apps, from parents to children component.
The render method returns a description (HTML tags or components) of what you want to see on the screen.
When data of props changes, React will efficiently update and re-render our components.
Handling event from user's interactive. For example:
<button onClick={() => console.log("click")}>Click me</button>