Reorder navigation - start at Getting started

Author: rvsia

packages/react-renderer-demo/src/app/pages/index.js

@@ -68,8 +68,8 @@ const LandingPage = () => {
           Data Driven Forms converts JSON form definitions into fully functional React forms.
         </Typography>
         <div className={classes.getStartedLink}>
-          <Link href="/renderer/installation">
-            <a className={classes.getStartedAnchor} href="/renderer/installation">
+          <Link href="/renderer/get-started">
+            <a className={classes.getStartedAnchor} href="/renderer/get-started">
               <Button variant="outlined" className={classes.getStartedButton}>
                 Get started
               </Button>

packages/react-renderer-demo/src/app/pages/renderer/get-started.md

@@ -6,14 +6,19 @@ import CodeExample from '../../src/components/code-example';
 <Grid container item>
 <Grid item xs={12} md={10}>
 
-
-# React form renderer
+# Getting started
 
 Data Driven Forms converts JSON form definitions into fully functional React forms.
 It uses [React Final Form](https://github.com/final-form/react-final-form) for the form state management.
 It is highly recommended to check their documentations first to fully understand how
 the [Data Driven Forms](https://github.com/data-driven-forms/react-forms) libraries work.
 
+All you need is to [install](/renderer/installation) the form renderer and choose the component mapper you want ([or create your own](/renderer/component-mapping)).
+
+Import `FormRenderer` from the react-form-renderer. This component takes four required props: FormTemplate, schema, componentMapper and onSubmit. You can read about them [here](/renderer/renderer-api#requiredprops).
+
+You can check the simple example below.
+
 <CodeExample source="components/get-started/get-started" mode="preview" />
 
 </Grid>

packages/react-renderer-demo/src/app/src/components/navigation/documentation-pages.js

@@ -1,4 +1,8 @@
 export const docs = [
+  {
+    component: 'get-started',
+    linkText: 'Getting started'
+  },
   {
     component: 'installation',
     linkText: 'Installation'
@@ -7,10 +11,6 @@ export const docs = [
     component: 'development-setup',
     linkText: 'Development Setup'
   },
-  {
-    component: 'get-started',
-    linkText: 'Getting started'
-  },
   {
     component: 'component-mapping',
     linkText: 'Create component mapper'