:orphan:

.. toctree::
   :maxdepth: 1
   :hidden:

   create_react_template
   connect_react_and_lightning
   communicate_between_react_and_lightning
   react_development_workflow

##########################
Add a web UI with React.js
##########################
**Audience:** Anyone who wants to add a web user interface (UI) written in react to their app.

**Prereqs:** Basic html knowledge.

----

.. raw:: html

    <div class="display-card-container">
        <div class="row">

.. Add callout items below this line

.. displayitem::
   :header: 1: Create a React project template
   :description: Use our React template to start a react app or bring your own.
   :col_css: col-md-6
   :button_link: create_react_template.html
   :height: 150
   :tag: basic

.. displayitem::
   :header: 2: Connect a React app and a Lightning app
   :description: Learn how to connect a React app to a Lightning app.
   :col_css: col-md-6
   :button_link: connect_react_and_lightning.html
   :height: 150
   :tag: intermediate

.. displayitem::
   :header: 3: Communicate between React and Lightning
   :description: Learn how to communicate between a React app and a Lightning app.
   :col_css: col-md-6
   :button_link: communicate_between_react_and_lightning.html
   :height: 150
   :tag: intermediate

.. displayitem::
   :header: 4: Develop like a React pro
   :description: Learn the development workflow of a React developer.
   :col_css: col-md-6
   :button_link: react_development_workflow.html
   :height: 150
   :tag: intermediate

.. raw:: html

        </div>
    </div>

----

********
Examples
********
Here are a few example apps that use a React web UI.

.. raw:: html

    <div class="display-card-container">
        <div class="row">

.. Add callout items below this line

.. displayitem::
    :header: Example 1
    :description: Show off your work! Contribute an example.
    :col_css: col-md-4
    :button_link: ../../../contribute_app.html
    :height: 150
    :tag: Waiting for contributed example

.. displayitem::
    :header: Example 2
    :description: Show off your work! Contribute an example.
    :col_css: col-md-4
    :button_link: ../../../contribute_app.html
    :height: 150
    :tag: Waiting for contributed example

.. displayitem::
    :header: Example 3
    :description: Show off your work! Contribute an example.
    :col_css: col-md-4
    :button_link: ../../../contribute_app.html
    :height: 150
    :tag: Waiting for contributed example

.. raw:: html

        </div>
    </div>