Join Joe Chellman for an in-depth discussion in this video Identifying our components and data, part of React for Web Designers.
- [Instructor] In this video we're going to take a look at a static mock up of what we want our result to look like when our React project is done. And start making plans about where our components should be and what data we're planning for. So I've opened up the mockup.html file here in my browser. And you can see that I have my "Product customizer will go here". This is the is the only thing that's powered by React on this page at this point. Then down here, I have a mock up of what we actually want in the end. Pretty simple little thing. We're going to be able to select the size of the sneaker and we're going to be able to choose a color.
And, when we choose the color, the color of the shoe changes. So let's take a look at our HTML file just to see how this mock up works from that perspective. Over here in Visual Studio Code, I'm going to use Ctrl + G to skip down to line 114 again. Here's where my React components will go. And here's my static mock up. So I just want you to note that we have some wrapping div's for all these different elements. The selectors are contained in their own div.
I have my size selector. I have my color selector. This is all very standard HTML stuff. But when we recreate these things in React, we're going to want to recreate a lot of this so that we can inherit the same styles that we're already using here in the static mock up. Switching back to the browser, we need to think about what data we're going to be tracking and what we're going to have React updating for us and how we're going to break up these pieces into components. So here's what we're going to do. We're going to have one component for the sneaker image and we know that's going to need to be aware of what color is currently selected and then over here, we could put both of these selectors into a single component if we wanted to.
I'm going to choose to make each of these its own component. So, we'll have a size selector and a color selector. The size selector is going to need to know what sizes are available to be selected and which one is the currently selected size. Likewise, the colors is going to need to know the available colors and the currently selected color. We know that React does one way data flow. So if you have components that are going to need to share a piece of information, that is, share a piece of state, you're going to need to make sure that that state is available to both of them by having a component at a level above those two.
So we know for sure that the product image and the color selector are both going to need to be aware of what the currently selected color is. So along with each of these smaller components, we're going to need to have one larger component that can wrap all of them together and keep track of that state that needs to be known in each of these children components. So, to recap, we're going to have one big component for the whole thing. We'll call that the product customizer. We'll have a product image component. We'll have a size selector and a color selector and that should cover us for this very simple project's needs.
So at this point, we've looked at the mock up, we know the kind of interactivity that we're going to use, and we've made a plan for how we're going to break these components up. Now, of course, as you start writing your code, you may change your mind about how you want to proceed with this, but going into it, we have at least some idea of what we're going to do. So now we're going to proceed and start writing a little more code.
- The React Toolbox
- Installing React Developer Tools
- Creating new components
- Implementing props and states
- Handling events
- Building forms
- Responding to form updates
- Incorporating live data with REST APIs