A modular boilerplate suitable for large and complex applications built with latest stack React, Typescript, MobX, Webpack, Storybook, Styled Components, Cypress and followed industry standard practices like ✔️Clean Code, 🧪TDD
-
5.1 Clean Code
Please note that this boilerplate is production-ready and not meant for beginners! If you're just starting out with react or redux, please refer to https://github.com/petehunt/react-howto instead. If you want a solid, battle-tested base to build your next product upon and have some experience with react, this is the perfect start for you.
Most of the react developers might have spent more than 6+ hours of time to create a development-ready repo to start the development. Thanks to react community 🙏 for creating a bunch of awesome starter-kits.
I've worked on 15+ complex and feature-rich projects developed with React and React Native. For all of the projects, below things are must to achieve all -abilities.
- Test cases environment
- Linting (eslint)
- Code formatter (prettier)
- Hooks (Ex: Pre-commit hook)
- Internationalization (I18n)
- Storybook
- Build environments and npm scripts
If your project has many modules, then I suggest you to follow the folder structure followed in this repo.
- Make sure that you have Node.js >=12.6.0 and npm >=5.6.0 or yarn >=1.17.3
- Clone this repo using
git clone https://github.com/0xc0d3r/modular-react-typescript-boilerplate.git <YOUR_PROJECT_NAME>
- Move to the appropriate directory:
cd <YOUR_PROJECT_NAME>
. - Run
yarn setup
in order to install dependencies and clean the git repo.
At this point you can runyarn start
to see the output athttp://localhost:3000
. - Follow this guide to build the application in various environments (Ex: alpha, production, etc.)
Now you're ready to rumble!
This boilerplate is built with modern frontend tools. There are community opinionated tools like Typescript and MobX. Trust me, these two adds a lot of value to the development in terms of less type errors/bugs, less boilerplate with MobX and leveraging Object oriented principles.
Below tools/libraries provide best developer experience in a team
I want to add support for Redux as well as most of the developers use it. You can create a pull-request if you want to contribute.
COMMON
components
constants
fixtures
i18n
images
navigation
routes
services
stores
styleGuide
themes
utils
MODULE1
components
constants
fixtures
routes
services
stores
themes
utils
MODULE2
components
constants
fixtures
routes
services
stores
themes
utils
Developers are often tempted to consider their work complete when the application operates as expected. And We often forget to refactor the code as per clean code guidelines, not following the suitable design patterns, not writing the test cases, etc.
If we do not follow the best practices, your code will become messy and developers resist to modify or add new features. Below are some of the practices I follow while developing
- 7 architectural attributes of a reliable react component
- Clean code by Robert C Martin
- Test-driven Development (TDD) by Kent Beck
- Clean architecture by Robert C Martin
(above image used from https://github.com/ryanmcdermott/clean-code-javascript)
Programming is the art of telling another human what one wants the computer to do. Donald Knuth
Clean code is about recognizing that your audience isn't just a computer, it's real-live humans! Let's keep this in our mind and develop quality software.
Thanks to ryanmcdermott for creating clean-code-javascript.
The Test Driven Development (TDD) is a software engineering practice that requires unit tests to be written before the code they are supposed to validate.
(above image used from https://hackernoon.com/introduction-to-test-driven-development-tdd-61a13bc92d92)
Check the implementation of the Todo App following TDD and I committed for each state. You can see Red, Green, and Refactor commits.
Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issue or feature request, participate in discussions, upvote or downvote the issues you like or dislike, send pull requests.