Collapsible Panel

We create a collapsible panel component. You give it a title and a child and it will hide the child inside until you click the panel.

We use a number of techniques in this component, including component-local state, React refs, CSS animation, and Re-frame events and subscriptions.

F03 Building Re-frame Components

Buy nowLearn more

Introduction

  • What will you learn in this course?

Getting Started

  • Getting your machine ready
  • Getting the code and starting the Figwheel compiler
  • Setting up Chrome dev tools
  • Arrange your browser and editor side-by-side3

Reference Sheets

  • Re-frame Components Reference Sheet.pdf2
  • React Lifecycle Reference for Re-frame.pdf

Components

  • Collapsible Panel1
  • Sortable Table
  • Inline Editable Field
  • Progress Bar
  • Password Box
  • Sortable Table in the Re-frame database
  • Tag Editor
  • Markdown Editor with Live Preview
  • Externally Managed Components
  • Accordion Component
  • Draggable List
  • Expanding Table
  • Filterable List
  • Username Box
  • Username and Password Refactoring
  • User-Password Refactoring Further
  • User Registration 1
  • User Registration 2
  • User Registration 3

Conclusion

  • Solidify and expand your skills