5. React Essentials - Practice Project

This course section focuses on practicing essential React skills by building a new demo project: an Investment Calculator web app. Unlike previous sections, this part does not introduce new concepts but allows learners to apply their knowledge of components, state, and conditional rendering. A starting project is provided, available in both local and CodeSandbox versions, which includes pre-written CSS to ease the design process. Additionally, a utility file with a function for calculating investment results and a formatter for number styling is included to help learners focus on React concepts rather than calculations.

The main goal is for learners to independently develop the web app, with the understanding that multiple solutions are possible. They are encouraged to take their time and embrace the learning process, including potential challenges. Following this practice, the instructor will provide a walkthrough of their solution, emphasizing that it is just one way to approach the project.

The speaker describes the process of creating a header component for a React application. They begin by creating a new "Components" folder within the "SRC" directory and adding a header.jsx file that exports a header component function. The component will include an image and an H1 tag displaying the title "Investment Calculator." The image source will be dynamically imported from the "Assets" folder.

The speaker details the structure of the import statement and the use of the header element in JSX. They replace an existing H1 element in the main App component with the newly created header component and ensure to import it correctly. After resolving a minor typo concerning the image path, the header is displayed correctly.

Finally, they enhance the styling by adding an ID to the header element, which allows for better styling through the index.css file, concluding the setup for the header component before moving on to the next part of the app.

The next step in building the investment calculator app involves creating a user input component to gather necessary information for calculations. This component will be responsible for collecting user inputs such as the initial investment amount, annual investment amount, expected return rate, and investment duration.

The structure will include a section with an ID of "user input," containing multiple input fields organized in an "input group" for better presentation. Each input will be set to accept numerical values and will require user input to ensure data is entered correctly. The component will implement two-way data binding to capture and reflect user input effectively. The focus is on splitting the app into distinct components, adhering to best practices in React development.

The content discusses how to manage user input state in a React component using the useState hook. The approach involves creating a single state object to hold values for four input fields: initial investment, annual investment, expected return, and duration.

The overall goal is to create a user-friendly interface for inputting investment-related data, which can later be used for calculations and displaying results.

The text outlines the process of integrating user input into a React application, specifically focusing on using a utility function to calculate investment results. The key steps involved are:

Overall, the process involves restructuring the application to facilitate state management and result calculation in a way that promotes component reusability and clarity.

The text explains how to derive investment results in a React application using a function from an external JavaScript file. The results are calculated based on user input, which is managed in the app’s state. The author demonstrates how to import the calculation function and pass the user input to it. Initially, the results are logged to the console, showing an array with details such as the amount invested, interest earned, and the investment’s end value for each of the ten years.

However, a bug arises due to JavaScript treating input values as strings when they are extracted from input fields, leading to incorrect calculations. The author identifies that mathematical operations involving strings result in concatenation rather than numerical addition. To resolve this, the author suggests converting the string values to numbers by prefixing them with a plus sign when updating the state. After making this adjustment, the calculations work correctly, allowing the results to be displayed in a table format in the results component.

The content discusses the implementation of a results table in a React component. The table will display investment results over multiple years, structured into five columns: year, investment value, interest earned, total interest earned, and total capital invested.

The app in question has an input area and a results table, but currently crashes when a user inputs a negative duration or zero. While negative investment amounts are tolerated, the app should not crash when zero is entered. To address this, the developer plans to implement input validation by creating a variable named inputIsValid that checks if the duration is at least 1. If the duration is invalid, the results component will not render, and instead, a message prompting the user to enter valid input will be displayed. This validation ensures that the app functions correctly and provides feedback when invalid data is input. The developer also plans to enhance the user experience by applying CSS for a nicer appearance. The overall goal is to ensure that the app remains functional and user-friendly when inputs are adjusted.