DEV Community 👩‍💻👨‍💻

Adrian0506
Adrian0506

Posted on

Hack Reactor Week 3 (react)

Hey everyone! I have just gotten to my 3rd week of hack reactor. It has been very fun and I have been enjoying it a lot! But I want to talk about react states! React states is such a powerful tool! It constantly re renders a page if the state of something has been changed. Let me model a demonstration!

class App extends React.Component {
constructor(props) {
super(props)
this.state = {
counter: 0;
}
}

incrementCounter() {
let currentVal = 0;
currentVal++;
setState({
counter: currentVal
})
}
Render() {

return

Click me! {this.state.counter}


}
}

What is awesome about this is that it will re render the entire page when you click on the click me element! And can be used in many different ways. Examples can be like whenever a user sends a tweet. The state of the current tweets are tracked. When we add a new tweet it changes the state and re render the page to display that new tweet! You can find a way to do this in vanilla js. But react does that for us and helps us save so much time!

Top comments (1)

Collapse
 
dance2die profile image
Sung M. Kim

Hi Adrian. Can I request to format the code snippet?

You can refer to the Editor guide :)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.