100 lines
2.0 KiB
TypeScript
100 lines
2.0 KiB
TypeScript
import { Snippet } from "@/components/Snippet";
|
|
|
|
const reactButtonComponentSnippets = [
|
|
{
|
|
name: "Composant Button",
|
|
codeLanguage: "jsx",
|
|
withLineNumbers: true,
|
|
code: `import React from "react";
|
|
|
|
export function Button() {
|
|
return <button>Click me</button>;
|
|
}`,
|
|
},
|
|
];
|
|
|
|
const reactUseButtonComponentSnippets = [
|
|
{
|
|
name: "Utilisation du composant Button",
|
|
codeLanguage: "jsx",
|
|
withLineNumbers: true,
|
|
code: `import { Button } from "./Button";
|
|
import React from "react";
|
|
|
|
export function App() {
|
|
return (
|
|
<div>
|
|
<h1>Mon premier composant React</h1>
|
|
<Button />
|
|
</div>
|
|
);
|
|
}`,
|
|
},
|
|
];
|
|
|
|
const reactButtonComponentPropsSnippets = [
|
|
{
|
|
name: "JSX",
|
|
codeLanguage: "jsx",
|
|
withLineNumbers: true,
|
|
code: `import React from "react";
|
|
|
|
export function Button(props) {
|
|
return <button onClick={props.onClick}>{props.children}</button>;
|
|
}`,
|
|
},
|
|
{
|
|
name: "TSX",
|
|
codeLanguage: "tsx",
|
|
withLineNumbers: true,
|
|
code: `import React from "react";
|
|
|
|
type ButtonProps = {
|
|
onClick: () => void;
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
export function Button(props: ButtonProps) {
|
|
return <button onClick={props.onClick}>{props.children}</button>;
|
|
}`,
|
|
},
|
|
];
|
|
|
|
const reactUseButtonComponentPropsSnippets = [
|
|
{
|
|
name: "Ajout de la prop `onClick`",
|
|
codeLanguage: "jsx",
|
|
withLineNumbers: true,
|
|
code: `import { Button } from "./Button";
|
|
import React from "react";
|
|
|
|
export function App() {
|
|
function handleClick() {
|
|
console.log("Je suis cliqué !");
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h1>Mon premier composant React</h1>
|
|
<Button onClick={handleClick} />
|
|
</div>
|
|
);
|
|
}`,
|
|
},
|
|
];
|
|
|
|
export default {
|
|
reactButtonComponent: () => (
|
|
<Snippet snippets={reactButtonComponentSnippets} />
|
|
),
|
|
reactUseButtonComponent: () => (
|
|
<Snippet snippets={reactUseButtonComponentSnippets} />
|
|
),
|
|
reactButtonComponentProps: () => (
|
|
<Snippet snippets={reactButtonComponentPropsSnippets} />
|
|
),
|
|
reactUseButtonComponentProps: () => (
|
|
<Snippet snippets={reactUseButtonComponentPropsSnippets} />
|
|
),
|
|
};
|