Merge pull request #8074 from jtpio/docs-examples

Docs: move "Examples" section to "Using JupyterLab components"

docs/source/developer/components.rst

@@ -9,4 +9,57 @@ to life their own visions of what a computational environment should look
 like.
 
 The JupyterLab repository has `many examples <https://github.com/jupyterlab/jupyterlab/tree/master/examples>`_
-to get you started.
+to get you started.
+
+The ``examples`` directory contains:
+
+-  several stand-alone examples (``console``, ``filebrowser``,
+   ``notebook``, ``terminal``)
+-  a more complex example (``lab``).
+
+Installation instructions for the examples are found in the project's
+README.
+
+After installing the jupyter notebook server 4.2+, follow the steps for
+installing the development version of JupyterLab. To build the examples,
+enter from the ``jupyterlab`` repo root directory:
+
+::
+
+    jlpm run build:examples
+
+To run a particular example, navigate to the example's subdirectory in
+the ``examples`` directory and enter:
+
+::
+
+    python main.py
+
+Dissecting the 'filebrowser' example
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+The filebrowser example provides a stand-alone implementation of a
+filebrowser. Here's what the filebrowser's user interface looks like:
+
+|filebrowser user interface|
+
+Let's take a closer look at the source code in ``examples/filebrowser``.
+
+Directory structure of 'filebrowser' example
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+The filebrowser in ``examples/filebrowser`` is comprised by a handful of
+files and the ``src`` directory:
+
+|filebrowser source code|
+
+The filebrowser example has two key source files:
+
+-  ``src/index.ts``: the TypeScript file that defines the functionality
+-  ``main.py``: the Python file that enables the example to be run
+
+Reviewing the source code of each file will help you see the role that
+each file plays in the stand-alone filebrowser example.
+
+.. |filebrowser user interface| image:: filebrowser_example.png
+.. |filebrowser source code| image:: filebrowser_source.png

docs/source/index.rst

@@ -59,7 +59,6 @@ JupyterLab is the next-generation web-based user interface for Project Jupyter.
    developer/patterns
    developer/css
    developer/virtualdom
-   developer/examples
    developer/ui_helpers
    developer/terminology
    developer/extension_tutorial