Last updated February 21, 2020

Components are the fundamental building blocks of any React application. React uses components to represent different elements in the UI. To demonstrate this, we'll build a React widget that wraps around the primary content of a node and then provides an interactive button to toggle the content's visibility. In doing so we'll learn about creating components and using props and state in React.

In this tutorial we'll:

  • Define two new React components
  • Learn about using props and state to create interactivity

By the end of this tutorial you should be able to write React code that manipulates existing DOM content and provides additional interactivity into the UI that can't be accomplished with just HTML.