DEV Community

Cover image for Boilerplate for React-Typescript projects
Aghiles Lounis
Aghiles Lounis

Posted on • Updated on

Boilerplate for React-Typescript projects

Brief description

Starter for React projects following Atomic design structure, i found it clear and intuitive to use and works for most projects.

Files structure

If you are new and want to learn more about atomic design i suggest reading this blog post: https://medium.com/@WeAreMobile1st/atomic-design-getting-started-916bc81bad0e

files structure

Git clone here: https://github.com/axibord/react-typescript-starter

What is included in this boilerplate ?

  • Support for both JSX and TSX
  • Support for SASS/SCSS using sass-loader
  • Support for TailwindcssV2 with the help of postcss-loader
  • Strict linting with Eslint and Prettier configured for typescript
  • Finally everything is compiled with Webpack 5

To run a build for production with minimal bundle size possible make sure to follow the steps in the repository.

Future improvements

  • Support for scoped css and sass/scss in each component
  • Better Eslint rules by following Airbnb style for exemple
  • Improve tsconfig.json file for better compilation and debugging
  • Tslint instead of Eslint (not sure its an improvement)

If you find this helpful, please follow my Twitter profile


Feel free to git clone it and tell me what you think, if you have any suggestions and want to contribute just fork it and make a request or reach out to me.

Discussion (3)

Collapse
retburstjk profile image
Retburstjk

AMAZING THANK'S !

Collapse
elgeokareem profile image
William Vegas

Thanks bro I'll give a try.

Collapse
axibord profile image
Aghiles Lounis Author

You're welcome ! tell me what you think !