I suppose I could write a whole lot about Phase-2 at Flatiron. For this phase we stepped out of the safe comfort-zone of vanilla JS and moved into the new and exciting world of REACT.
This school has challenged me in a lot of ways, but mostly in being okay with the unknown. I can say with the utmost confidence that these past three weeks have been incredibly challenging, but I wouldn't change anything (okay, maybe some things).
In this post that I am once again writing on the last day because I've been entirely too focused on my project, I will be covering a few of the struggles I've had and one specific thing that I think needs to be addressed so that other's aren't struggling in the future.
At the beginning of this phase, where I was just starting to learn about REACT, it felt like new and foreign territory. No longer was I building elements within an html document and using a single JS document to apply effects to them.
In fact, in REACT, all that you need to use in the HTML is a
element with the id of "root".
And from there, all it takes is using npm to build out your REACT application for you and to create multiple components using JS files. Seems easy right?
Well, I got some news for you. If you are also jumping off the dangerous precipice of vanilla JS into REACT, there are a lot of new things you'll encounter.
I'd like to address useState() and useEffect() when it comes to fetching your information. For this example I'll be using JSON as the API.
Assuming you already know about importing when it comes to react, useState() and useEffect() are imported right alongside REACT.
To begin, you have to "set state" using the useState() hook. You want to set a state to any object you want to re-render on the page. In easiest terms I can use to explain this: anything you want to apply a change to on the page needs to begin with a state.
If you think about it, if you want to apply a change to anything it needs to begin somewhere correct?
So let's say we want to fetch some "items" and render them to the page. How would your items that are initially fetched from a JSON appear (before you have mapped over them) on the page? As an array, correct?
In this example we have set the state of "items" to an empty array.
If you were to check your components in console, you would see the state was an empty array.
Now, how do we go about populating this empty array with our items in our JSON? If you guessed a fetch, you are correct, but that's not exactly our next step.
Next, we have to apply our useEffect() hook. useEffect has two arguments. The first is your function. In this case it would be our fetch function. The second argument is optional and is an array of dependencies.
In our case, for a fetch function it would look like this:
Now we can use our fetch function. Assuming you have set both your baseUrl and your url for your items to a variable (which you should get used to, because it is a good practice) our fetch would look something like this:
In this example we are using the usual fetch but we are populating our empty array with the items fetched from our JSON.
Now, mapping over this array and getting our items to display on the page is an entirely different monster and I can go over that on a different post.
I hope this information was detailed enough and you learned something! If need be, I can always answer any questions or concerns.
Thanks for reading.
-Sunny
Top comments (0)