From 20e58d0d2b6b50b332e521a49e4c7a766398e87c Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Tue, 26 Sep 2023 11:42:56 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(react)=20add=20first=20step=20doc?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We missed this must-have for some time now.
---
 packages/react/src/docs/first-steps.mdx | 34 +++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 packages/react/src/docs/first-steps.mdx

diff --git a/packages/react/src/docs/first-steps.mdx b/packages/react/src/docs/first-steps.mdx
new file mode 100644
index 0000000..0bb768b
--- /dev/null
+++ b/packages/react/src/docs/first-steps.mdx
@@ -0,0 +1,34 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
+
+<Meta title="Getting Started/First steps"/>
+
+# Rendering your first component
+
+Now that you have completed the [Installation](?path=/docs/getting-started-installation--docs) it's time to render our first component!
+
+> You can find a fully working example [here](https://github.com/openfun/cunningham/blob/main/apps/demo/src/App.tsx) in the demo app.
+
+Let's create an `App` component that will render a `Button`.
+
+<Source dark={true} code={`
+
+import {
+  Button,
+  CunninghamProvider
+} from "@openfun/cunningham-react";
+
+export const MyApp = () => {
+  return (
+    <CunninghamProvider>
+      <Button onClick={() => alert('hello world!')}>Click me!</Button>
+    </CunninghamProvider>
+  );
+};
+
+`}></Source>
+
+
+As you can see we nest our component inside `CunninghamProvider`, as a rule of thumb you always need to put Cunningham's components
+inside `CunninghamProvider` or they will not work. You only need to use one `CunninghamProvider`, for example at the root of your app.
+
+And voilà! You're done 🥳