This project demonstrates essential React features: modular components, state management, conditional rendering, and value conversion. Users can estimate investment values by inputting parameters. Explore the code to enhance your React skills and start estimating investments effortlessly!
Use the starting project attached to the first lecture
Add components for displaying a header, fetching user input & outputting the results table
Fetch & store user input (i.e. the entered investment parameters)
Derive investment results with help of the provided utility function (in the starting project)
Display investment results in a HTML table (use <table>, <thead>, <tbody>, <tr>, <th>, <td>)
Conditionally display an info message if an invalid duration (<1) was entered
Steps
0. Setting up the Project
Run "npm install"
Run "npm run dev"
1. Module Introduction & A Challenge For You!
Create README.md
2. Adding a Header Component
Create Header Component
Import Header Component into App.jsx
3. Getting Started with a User Input Component
Create UserInput Component
Import UserInput Component into App.jsx
4. Handling Events & Using Two-Way-Binding
Get hold of the Value Entered by the User with UseState()
Reflect that Value Back into the Input Field with the value attribute
5. Lifting State Up
Lift the userInput State Up from the UserInput Component to the App Component
Pass onChange & userInput as props in UserInput Component to Get the Object from the State & use the handleChange function
Create the Results Component
Pass also the userInput as props in the Results Component
Output the Results Component
6. Computing Values & Properly Handling Number Values
Derive the Results Data in the Results Component
Import & use the calculateInvestmentResults function from util/investment.js
Compute Values based on the input state
Convert the newValue into a number
7. Outputting Results in a List & Deriving More Values
Output results data in a table dynamically as a list based on the resultsData array
Use formatter.format() to make numbers prettier
8. Outputting Content Conditionally
Conditionally display an info message if an invalid duration (<1) was entered
Derive the information whether the input is valid or not based on this userInput state in a constant inputIsValid
Make sure that the Results component is output conditionally (it should only be output if we have valid user input)
Show a fallback message if the input should not be valid
About
This project demonstrates essential React features: modular components, state management, conditional rendering, and value conversion. Users can estimate investment values by inputting parameters. Explore the code to enhance your React skills and start estimating investments effortlessly!