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 • 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
 
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
 
psousa profile image
Pedro Sousa

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