Phase 2 at Flatiron (React)

Phase 2 intro:

In the initial stages of phase 2, the curriculum retained a similar structure as phase 1 without the orientation and as we were learning about the intricacies React. The first week proved to be more manageable compared to phase 1, due to a foundational understanding of JavaScript and Flatiron's methodology. The content was easier to grasp, given that React served as a powerful framework/library for JavaScript.

Weeks 2 & 3 were about the same, using week 2 to practice and apply everything we learned such as: Components, Props, States, and etc. Then we were assigned to make another website for the last week of phase 2, this time utilizing React. Some of the requirements were to include at least 5 components, 3 routes, & fetch from a JSON server with a resting API. This project not only solidified our understanding of React but also presented an opportunity to showcase our skills in building dynamic and interactive web application.

Setting up a Form Component:

One of the things I found out was the difference of making a form with and without React. Without it, form elements are traditionally set up directly through HTML. Contrastingly, React introduces additional steps into making a form. The process starts with creating a dedicated component that will serve as the form container, exemplified below in an excerpt from my React project.

1. Handling Form State with useState:

Use the 'useState' hook, which is a fundamental aspect of React that empowers components to manage state. In the Form component below, we utilize the 'useState' to track the form values dynamically. Each input field, such as "name," "genre," and "image", is associated with a state variable within the 'formValues' object. The 'setFormValue' function is then employed to update these values in response to user input.

2. Input Elements and Controlled Components:
In React, form elements are transformed into controlled components. Each input field is associated with a piece of state ('formData') and updates its value based on the state.

3. Handling Form Submission:

Upon submitting the form, the 'handleSubmit' function orchestrates multiple tasks. Firstly, we add the 'e.preventDefault()' to prevent the default form submission behavior in order to avoid a page reload. Next, it updates the 'videoGames' state (which is being passed from the parent component) with the new game by spreading the existing array and appending the current 'formValues'. The 'setFormValues' function is then called to reset the form to its initial state.

4. Integrating with the Backend:

To ensure the longevity of our game data, we incorporate a fetch request to the backend API (). This POST request includes the serialized JSON representation of 'formValues'. Upon a successful response, the 'updateGames' function (which is also being passed from the parent component) is invoked to synchronize the application state with the latest data that is being fetched.

Conclusion:

This new form component showcases the seamless integration of React's state management and API communication, providing a robust foundation for handling user input and persisting data. This implementation not only ensures a smooth user experience but also lays the groundwork for scalability for future projects.