It's great that you have a variety of props you can use now to define your component but now your components are bloated. You are also using components in your styleguide that aren't even using styled-system (Divider, ColorCircle, GridContainer, etc). Why recreate the typography for standard html elements. Why not just use styled-component's GlobalStyles to standardized them. I think styled-components alone would be more performant without styled-system unless there's some tree shaking that can be utilized.
I love learning new things, solving problems, and coaching. I spend most of my time programming in JavaScript, learning new programming languages, teaching others about programming, and making music.
I was actually aiming for npx create-react-app react-styleguide --typescript but you can choose any name you want. Thank you for finding my mistake! Glad you enjoyed the read.
I love learning new things, solving problems, and coaching. I spend most of my time programming in JavaScript, learning new programming languages, teaching others about programming, and making music.
It looks like there's also a missing dev dependency: @types/react-router-dom. You have it in your repo's package.json, but it's not listed above as a dependency to install. It is needed for LinkProps.
One more thing I found. Your initial command to create the project, npx create-react-app react-styleguide --typescript isn't entirely correct and just creates a standard JS project. From create-react-app.dev/docs/adding-t... :
I love learning new things, solving problems, and coaching. I spend most of my time programming in JavaScript, learning new programming languages, teaching others about programming, and making music.
It's great that you have a variety of props you can use now to define your component but now your components are bloated. You are also using components in your styleguide that aren't even using styled-system (Divider, ColorCircle, GridContainer, etc). Why recreate the typography for standard html elements. Why not just use styled-component's GlobalStyles to standardized them. I think styled-components alone would be more performant without styled-system unless there's some tree shaking that can be utilized.
npx create-react-app react-style guide --typescriptShould it be
react-style-guidewith two hyphens? As I find the command arguments not making sense to me. Thanks for the great article anyway.I was actually aiming for
npx create-react-app react-styleguide --typescriptbut you can choose any name you want. Thank you for finding my mistake! Glad you enjoyed the read.TypeScript gives React too much boilerplate.
Debatable. For the features you get in return I think it's a fair tradeoff.
small price to pay for salvation
This would be much easier to follow along with if you specified which file each snippet should go.
It looks like there's also a missing dev dependency:
@types/react-router-dom. You have it in your repo'spackage.json, but it's not listed above as a dependency to install. It is needed forLinkProps.One more thing I found. Your initial command to create the project,
npx create-react-app react-styleguide --typescriptisn't entirely correct and just creates a standard JS project. From create-react-app.dev/docs/adding-t... :Thank you for your suggestions man. I will update the article when I get the chance this weekend.
Just wanted to take 2 minutes to say this was a cool article: very informative.