Components are modular, encapsulated and composable pieces of UI, and React places a very heavy emphasis on them. In fact, in a React app, anything visible (and even many non-visible things) are defined as Components. We will learn about several different types of components, starting with the lightest, fastest and simplest ones.
ComponentsStateless Components and Props
The simplest type of component in a React app is a Stateless Functional Component (SFC). Essentially, these are just functions that are passed arguments, which returns JSX expressions.
ComponentsEXERCISE: Upgrade to Stateless React Components
Rewrite the form from the previous two exercises using only Stateless Functional Components, and then use these components to build a form for creating or updating a recipe. This should include:
<MuiInput>for the name of the recipe,
<MuiInput>for preparation time (a numeric value),
Break for lunch
ComponentsEXERCISE: Interactive Form
Add a feature to our form, so that we can replace our “ingredients” field with a list of items, each with their own field. Users should be able to click an “add ingredient” button and be provided instantly with a
<MuiInput>component. A “delete ingredient” button should be available for each field in this list to remove the associated item from our application state.
For now, don’t worry about capturing the values the user has entered into these fields — we’ll deal with that as the next topic.
ComponentsHandling user interaction and setState
We have already dealt with the basics of user interaction by responding to clicks for the “add ingredient” and “delete ingredient” buttons. There is more to user interactivity than what meets the eye - we’ll look at how an update to state works in React, and examine best practices for keeping your app performing smoothly and responsively.
ComponentsEXERCISE: Binding functions to DOM events
Complete your work by adding an “edit ingredient” button on the outer-most component, to allow toggling between “viewing” and “editing” the recipe. If you are managing state properly, this should be a quick and easy feature to add.
One of the most important features of components is that they have predictable and well-orchestrated lifecycles. By using lifecycle hooks — functions that are invoked at certain important moments in a component’s lifetime — we have the opportunity to customize how a component is set up, updated, or torn down. We’ll introduce the mounting and updating phases of a component’s lifecycle, and discuss specific examples of when and why you might want to customize these hooks.
ComponentsEXERCISE: Media Query Component
CSS media queries are great if we want to change how HTML is styled based on screen size, but what if we want to change the DOM structure? We can build a React component for that, but it’ll have to start listening to
windowfor resize events. To avoid memory leaks, this listener must be removed as soon as the component is destroyed. Use the
componentWillUnmounthooks to handle this listener properly.
ComponentsPureComponent and skipping re-renders
Sometimes we can improve the re-rendering performance of an app by implementing
shouldComponentUpdateto describe updates that should be “skipped”. Prior to React 15.3, this feature was only available on stateful components, but with the introduction of
PureComponent, we can optimize stateless components too!
ComponentsEXERCISE: Optimizing Rendering Performance
Optimize the “recipe summary” React component to avoid pointless re-renders. Keep stateless components stateless, but you may “upgrade” stateless functional components to pure components.
ComponentsWrap-Up and Recap
We'll recap everything we have covered so far, and set our sights on tomorrow's topics.