1f80674717
The Canvas block does not handle free source code anymore, now we need to put it in a dedicated Story.
35 lines
1.0 KiB
Plaintext
35 lines
1.0 KiB
Plaintext
import { Meta, Source } 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 🥳
|