In this pairing screencast, Sarah Drasner joins me and guides me through some of my very first learnings of React. We tackle some "real world" style functionality: a comment form.
This turned out to be a pretty useful bit of UI to work with, as it required a lot of things rather fundamental to React (or at least, it seems to me). For example, a master "App" that deals with the
state (our big "state" thing is the comments themselves) and components that deal with rendering the view (for example, the comment form is a component and each comment is a component).
Then we got into lots of littler React thingies, but also huge things to understand in React-land, like:
props- a way to pass data between components. They looks like HTML attributes when you send them, and arrive as an object in the form of this.props.
refs- how you snag data out of the form element we created.
keys- a way to uniquely identify a component when it's repeated. We're repeating comments here (there can be multiple comments), so if we were to have functionality that could change any of them, having a key is what makes React efficient (it can just replace that single comment instead of all of them).
Plus a ton more!
Here's the demo we worked on:
How do you level up your React learning beyond this? Start here.