From 23434e1c228c12dc333b0141c7acab9d5b45597b Mon Sep 17 00:00:00 2001
From: Fabian Affolter <fabian@affolter-engineering.ch>
Date: Fri, 29 Jul 2016 19:44:21 +0200
Subject: [PATCH] Initial cookbook entry for the react custom panel

---
 .../custom_panel_using_react.markdown         | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 source/_cookbook/custom_panel_using_react.markdown

diff --git a/source/_cookbook/custom_panel_using_react.markdown b/source/_cookbook/custom_panel_using_react.markdown
new file mode 100644
index 00000000000..78e804dd0af
--- /dev/null
+++ b/source/_cookbook/custom_panel_using_react.markdown
@@ -0,0 +1,28 @@
+---
+layout: page
+title: "Custom Panel using React"
+description: ""
+date: 2016-07-29 12:00
+sidebar: true
+comments: false
+sharing: true
+footer: true
+ha_category: Custom Panel Examples
+---
+
+This is a [React](https://facebook.github.io/react/) implementation of [TodoMVC](http://todomvc.com/) but instead of checking off to do items, you're 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 component](https://github.com/home-assistant/home-assistant/tree/dev/config/custom_components/react_panel).
+
+This video shows the frontend in action.
+
+<div class='videoWrapper'>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/2200UutdXlo" frameborder="0" allowfullscreen></iframe>
+</div>
+