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:
See the Pen Starting a React-Powered Comment Form by Chris Coyier (@chriscoyier) on CodePen.
How do you level up your React learning beyond this? Start here.
