Getting Started with Styled Components in React JS and TypeScript

Among the several strategies aimed at increasing the productivity of a development team, the proper organization of the code related to the software being conceived undoubtedly occupies a preponderant place. Over the years, several methods and tools have been created for this purpose. It is important to know them, especially since they can very concretely result in a substantial saving of time, at least in terms of maintenance activities and bug fixing.

In this context, we’ll take a look at how to deploy styled components in a React JS project with TypeScript using the styled-components library. This technique allows components to contain their own styles. This “encapsulation” of styles also involves CSS in JS, using tagged template literals.

Youtube demo:

Github repository:

First step: generation of files and installation of project dependencies

Generate React project files with TypeScript

create-react-app styled-components-demo --template typescript

Read more “Getting Started with Styled Components in React JS and TypeScript”


One more Rocketseat challenge completed!โœ”๏ธ ๐ ๐จ๐Œ๐š๐ซ๐ค๐ž๐ญ๐ฉ๐ฅ๐š๐œ๐ž is an e-commerce app, built with #ReactNative, #TypeScript and applying techniques such as #TDD, async storage and context API.




Source code

Available on my github: