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.

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:

• A <MuiInput> for the name of the recipe,
• A <MuiInput> for preparation time (a numeric value),
• A <MuiTextarea> for ingredients,
• A <MuiTextarea> for instructions.

Break for lunch

So far, all “arguments” passed to components have been in the form of “props”, which look like HTML attributes when used with JSX. This allows us to render some HTML but until we introduce state (data that a user can change in the app), this app is not going to be interactive at all. React provides a different kind of component in the form of a JavaScript class, as the foundation for stateful components.

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.

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.

Functions are just another first-class value type in JavaScript, and we can use them in JSX just as easily as we use numbers, strings and booleans. Finish the work we started in the last exercise, by ensuring that ingredient names are updated in application state as the user enters them.

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.

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 window for resize events. To avoid memory leaks, this listener must be removed as soon as the component is destroyed. Use the componentDidMount and componentWillUnmount hooks to handle this listener properly.

Sometimes we can improve the re-rendering performance of an app by implementing shouldComponentUpdate to 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!

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.

We'll recap everything we have covered so far, and set our sights on tomorrow's topics.