Getting Better With React
I’ve had a lot of trouble when I was first learning react. I thought it would be something easy after completing my JavaScript project because React uses JavaScript as their language. Boy was that a complete and utter struggle to go through. But the hours and all of those who helped me really got me to the point where I now understand it way better and feel more comfortable talking about it.
Therefore the example I’m going to present is where I had established my main sneaker page which looks like this.
So what I decided to do as a challenge is to create a like button for every time I click like, it increments by one. So I would have to use react and use something called State. State is a plain object but can be updated or mutated. My code to create this current state:
What I’ve commented is the blue prints on what id like to do to create a like button using react. So first we need to create a state where we have an object named “like” and have it set to zero. Afterwards I have written down I need the like button to be zero, but whenever its refreshed it will be reset, creating this a local react feature. The easiest part I found was to create the state and have it set to a key of likes always being zero. The harder part was creating an event where whenever the user clicks on the button, the likes would instantly increase by one. So what I did was create a function called HandleClick with an arrow function set to this.setState with the keys of likes to this.state.likes and have it increased by an increment of 1.
With our state and function being established, I created a button to have a click event using onClick calling upon our function “handleClick”. Then I wrote a div that shows all the state likes using “this.state.likes” all within our render function to make sure it shows up for the user.
So all together I have my code looking like this
With all of the code we’ve now written we should see our state as such:
And with that exercise I feel like it has helped me solidly my understanding of react. When creating this challenge it would be something I would give to one of my friends to help increase their understanding of local react because I feel as if this would help them just as much as me. Thank you for reading and happy coding!