Useful Tools and CSS Practices in React

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.