Flatiron Phase 2 Blogpost - React
Tags: javascript, react, webdev, programming
Published: 2022-12-03 06:40:04

The past few months have been pretty rough in all honesty. I've had to face a lot of physical and mental health issues, and doing so while studying and working hasn't been the easiest thing in the world. Despite all this, I've actually been having a blast learning React, and I feel really lucky that it's the subject that I've been assigned to study for Phase 2. It's very intuitive, and it really boosted my confidence when it comes to coding in general. I've experienced a lot of imposter syndrome up to this point, and I still have some trouble considering myself a "programmer", but when working in React, everything goes so smoothly that it almost feels natural. Obviously I studied quite a bit to get to my point of understanding now, so I won't say some of the credit doesn't belong to me (haha.), but it's seriously easy to learn if you already have solid fundamentals in JS and HTML. Coding a website in react feels easier and more streamlined than doing so in vanilla JS, and there's a few reasons why.

First of all, components are BEAUTIFUL. They're great for many technical reasons; they're fast to write and render, they're reusable, and they're pretty simple to visualize and understand, but my absolute favorite thing about them is that they naturally lend themselves to clean, effective organization. This, to me, is invaluable. I, personally am very easily overwhelmed, and have trouble breaking down big tasks into smaller ones. This seriously effects my workflow a lot of the time. React is great for this, because it literally forces me to split my work into little bits and tackle them one at a time, rather than constantly going back and forth through the same JS file to find out why my code isn't working. JSX is also really helpful for this, because it seamlessly integrates HTML into JS files, and makes it feel less like I'm juggling two things at once. I can just play with the JSX like I would any other variable.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyypqlgd0nsvvyafut7j.PNG)

The example above is a very common application of this. If I want to render multiple of the same component with different data, all I have to do is map through an array of that data, and make a new component for each object in the array. This can all be done within the JSX, and in one line at that! Doing the same thing in vanilla JS, while easy, feels a lot clunkier and hard to read/keep track of. Manually editing the innerHTML, getting elements, and adding event listeners all feels really unnecessary in the face of React, which is much more modular.

Using the React hooks has been really fun too, and I plan on learning what other hooks the library has to offer. so far I've only really been using useState and useEffect, but they're so useful that I'd be surprised if some of the other hooks weren't just as handy. useEffect in particular is EXTREMELY powerful. I feel like I don't even really have the knowledge or experience to fully explain why it's powerful, just because the scope of it's usage is so vast. Within a component, you can literally have any sort of effect happen at the execution of any trigger you set thanks to useEffect and it's required dependency array.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nq26fjp64o7kwhtvva3n.PNG)

Here, I'm using useEffect to fetch the data for my project. With the dependency array I can force the function to only run once, and then I can use it in tandem with the useState hook to save my data to a convenient, easy to access variable that I can change at any time. Let's say I wanted to have my program fetch a different set of data when I click on a button on the page. All I'd have to do is add a useState that switches between two booleans, and have that state change whenever the button is clicked. Then, in my useEffect function, I'd just have to add that state variable to the dependency array, and It'd ONLY update when that particular variable is changed.

The toolbox React has provided me with is just incredible; every piece of knowledge feels like it fits with the last perfectly. Knowledge of hooks build upon knowledge of components, which builds upon knowledge of vanilla JS and HTML in general, and using all these tools I've learned has felt super natural, which is a huge relief. I was honestly really afraid I wouldn't "get it" after phase 1, and I think learning in this phase has been intuitive enough to dull that imposter syndrome I've been feeling when it comes learning something new going forward, even if only by just a bit.