Saad

Front-End Developer | Computer Scientist

Menu Close

๐Ÿ”ฅ 100 Days of React – What I Did on 4th and 5th day

If you have read my previous blog, you would know that I have undertaken 100 days of React initiative. It has been five days since. I started blogging about it to keep track of my progress. So if you are interested in knowing what I did in the first three days, click here.

โšก Day 4 – events and state change

As I told in my last blog, I did a small project to experiment with what I learned. I will not say it was a complete disaster. I somehow managed to pull it off. Yeay!! ๐Ÿฅณ

Yesterday, I moved on to event handlers. How they behave in React. I also learned how to bind them, and how to pass arguments in a function, which is used in them. It was quite easy. In React, you use the event handlers practically the same way as in JavaScript. There are a few syntactic changes, though.

React uses JSX – JavaScript XML. It is a combination of JavaScript and HTML. Given below is the simplest example I can think ofย  JSX.

const Saad = <h1>Hey there!</h1>

With JSX you pass a function as the event handler rather than a string. Also, the HTML is slightly different in React because of JSX.

In HTML

<button onclick = "increment()">
Increment
</button>
In JSX

<button onClick = {increment}>
Increment
</button>

 

๐Ÿง So you see what the difference is. In React, you use camel case for event names instead of the lower case.ย  You can see it in the example I gave above. If you are interested in knowing more, check React’s official website.

The second topic which I covered was changing the state of a component. And how it helps with keeping virtual and real DOM in sync. You can not simply make a change in the data placed in the state. You need to use the proper channel.

React has a special method for changing data in the state method. It is setState(). This method tells React that we are updating the state. Then it will figure out what part of the state is changed. And based on that it will bring the DOM in sync with the virtual DOM. ๐Ÿ’ฏ

I am not the best person to explain this. So I will stop right here.

๐Ÿ— Day 5 – vidly

I didn’t think I would stick to something for more than three days. And today’s day 5. This shows how much I am enjoying learning React. It is so fun!!

๐Ÿ˜Ž After kick-starting my day with an episode of House of Cards today, I started a project. As the title suggests, it was called Vidly. Strange name right!? I created it to look something like this.

vidly - msaaddev

So what does it do? When you press the delete button placed in front of the movie, it gets deleted. The count on the top left of the screen changes too. And when all the movies are deleted, the message changes to “There is no movie in the database.” It took me more than 4 hours to finish it. ๐Ÿ™Œ

The hardest part of this project was picking the movie data from an external JS file. All the data was in an array which further has objects for its elements.ย  It was difficult. Took me more than two hours just to figure this out.

In the end, I somehow did it. If you want to take a look, I have uploaded this project on my GitHub. I have attached the link for you. You can also contact me if you have any query related to it.

For now, cheerios โœŒ

© 2020 Saad. All rights reserved.