These past few weeks have been both challenging and rewarding. Learning React framework/library (I am not going to pick a side in that argument) has taught me how to maximize the potential of Javascript. In the last phase, I spent numerous hours setting up the HTML and javascript, just to build a single webpage with a few functions. Using React has made that experience much less tedious. Although, I am glad we learned the manual way first to better understand what goes on behind the scenes, and how the DOM plays a role.
React has helped me view WebDevelopment from a different lens. One of the things I found useful with React is the ability to use components. Components make it much easier to reuse code, and get around manually setting up the HTML. It also feels convenient separating each piece of UI into a separate page, using a tree of hierarchy - using the parent child relationship. The difficulty I had with components was understanding the relationship between components - where to place information in the parent-child relationship (to be discussed soon). The next topic we covered was passing props. Props are a way of sending info down from a parent to child component. The format I find most useful was {destructuring}. Conceptually, I see a child component as a function within a parent component - let me explain. The prop passed down is essentially a parameter for the child component , where the child component uses the data passed down. That is no different than a function, other than the fact that the child component has its own UI elements. Also, similar to a function, we have the ability to pass down callback functions, that is very useful when we talk about state.
Just as mentioned, hooks are one of the most useFul tools in React – the two main we dealt with are useState and useEffect. UseState allows us to store data and track the changes over the lifetime of the application. Another convenient aspect is that each change in react initiates a re-render to that component and any child component that is affected by state. The most important thing to think about state is how high up in the tree to store it. You must think which components will use that specific state and whether it needs to be stored in a parent component to be accessible by multiple child components.
We also use State for controlled forms. Controlled forms are forms that use State. There’s 2 things to remember with a controlled form - we need onChange to track all changes made in the form input, and a value = the input, so that the input is always in sync with the current form state. This means that whatever the current value (inputted by the user) we will be storing, should match what displays in the text field of the input box. This may sound confusing, but remember to have both. And it is most convenient to have a handleChange function (eventHandler for onChange) or an anonymous function, because if an immediately invoked function is present, it will trigger a re-render before the form is submitted. The last topic I will be covering is useEffect. Effects are side effects, or an action that occurs without direct intervention from the user. The most common example is fetching, a useEffect is needed for the initial rendering of data, using an API, when the page loads. Use effects can also use dependancies. One dependency would be an empty array [ ] , which means only run on the initial load of a page. No dependency, just leaving the field blank will not set a limit on the amount of times the useEffect will run. The last thing discussed is variable dependency. This means any time there is a change to the data stored in a variable, the page will re-render.