DEV Community

loading...
Cover image for Boilerplate for React-Typescript projects

Boilerplate for React-Typescript projects

axibord profile image Aghiles Ait lounis ・1 min read

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)

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.

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

Discussion (2)

pic
Editor guide
Collapse
elgeokareem profile image
William Vegas

Thanks bro I'll give a try.

Collapse
axibord profile image
Aghiles Ait lounis Author

You're welcome ! tell me what you think !