DEV Community

Start your app the right way! Featuring React, styled-system, styled components and Typescript

Juan David C. on November 28, 2019

As an assignment for an app, I needed to implement a more consistent typography/theme. Consistency through your app is essential, and it also saves...
Collapse
 
pak11273 profile image
Isaac Pak •

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.

Collapse
 
blackr1234 profile image
blackr1234 •

npx create-react-app react-style guide --typescript

Should it be react-style-guide with two hyphens? As I find the command arguments not making sense to me. Thanks for the great article anyway.

Collapse
 
jdcas89 profile image
Juan David C. •

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.

Collapse
 
cadams profile image
Chad Adams •

TypeScript gives React too much boilerplate.

Collapse
 
jdcas89 profile image
Juan David C. •

Debatable. For the features you get in return I think it's a fair tradeoff.

Collapse
 
avatsaev profile image
Aslan Vatsaev •

small price to pay for salvation

Collapse
 
whurleyedcc profile image
William Hurley •

This would be much easier to follow along with if you specified which file each snippet should go.

Collapse
 
whurleyedcc profile image
William Hurley •

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.

Collapse
 
whurleyedcc profile image
William Hurley • • Edited

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... :

npx create-react-app my-app --template typescript
Collapse
 
jdcas89 profile image
Juan David C. •

Thank you for your suggestions man. I will update the article when I get the chance this weekend.

Collapse
 
psousa profile image
Pedro Sousa •

Just wanted to take 2 minutes to say this was a cool article: very informative.