home-assistant.io/source/_cookbook/custom_panel_using_react.markdown

layout	title	description	date	sidebar	comments	sharing	footer	ha_category
page	Custom Panel using React		2016-07-29 12:00	true	false	true	true	User Interface

This is a React implementation of TodoMVC but instead of checking off to do items, you are turning lights and switches on/off.

• It uses React to render the data.
• It hooks into Home Assistant JS which means updates pushed from the server are instantly rendered.
• It accesses properties made available from Polymer.
• It uses the user configuration for the component in the configuration.yaml file for rendering.
• It allows toggling the sidebar.

All you need is available as a custom panel. Download the file and save it in <config dir>/panels/ (you might have to create the directory if it doesn't exist).

Create a entry for the panel in your configuration.yaml file to enable it.

panel_custom:
  - name: react
    sidebar_title: TodoMVC
    sidebar_icon: mdi:work
    url_path: todomvc
    config:
      title: hello

This video shows the example in action.