React Fundamentals

React.js is a component library, which expresses user interfaces in terms of components, properties passed into them, and state they manage internally. Through these encapsulated, expressive and composable building blocks, we can create complex and dynamic interfaces with code that is surprisingly simple and easy to manage.

React Fundamentals


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:

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

    Break for lunch

  • ComponentsStateful Components

    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.

  • 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

    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.

  • ComponentsLifecycle Hooks

    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 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.

  • ComponentsPureComponent and skipping re-renders

    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!

  • 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.