Useful Tools and CSS Practices in React
Question: Setup storybook in react
Install Storybook:
npx storybook init
Start with:
npm run storybook
Tips:
- Use
*.stories.tsx
format.
Question: Is there vscode extension that help edit both html tags
Use Auto Rename Tag extension for VSCode.
Tips:
- Works well with HTML and JSX.
Question: Best way to incorporate css within component that works with pico
Pico.css is classless, so use semantic tags.
<section>
<h1>Welcome</h1>
</section>
Tips:
- Override with scoped styles if needed.
Question: How to use pico color
Use CSS variables:
color: var(--primary);
Tips:
- Reference Pico’s theming guide.