react-ts-cdk
🔥 React + Typescript Boilerplate to develop your own react components and reuse in another projects
Motivation
Components are cool! We should use them everywhere. So, you expent time developing a lot of components and now you want to reuse them in another awesome project & all your projects need your components updated when a new feature is released (and you also need typechecking, tests, hot module replacement & all the good stuff).
Directory Structure
.
├── src
| └── components
| └── MyComponent # Your component
| ├── MyComponent.story.tsx # Storybook of your component
| ├── MyComponent.test.tsx # Jest + Enzyme tests
| ├── MyComponent.tsx # Its JSX + Typescript file
| ├── MyComponent.types.ts # Types for props
| └── index.ts # Export Component
| └── MyComponentX # Another component X
| └── MyComponentY # Another component Y
| └── MyComponentZ # Another component Z
| └── stories.tsx # Storybook config file
├── dist
| └── index.js # Exporting all Componentss
Usage
- Fork it!
- install dependencies:
yarn install
- Create your account in TravisCI & Code Coverage
- Configure TravisCI environment variables
DANGER_GITHUB_API_TOKEN
,GH_TOKEN
&NPM_TOKEN
with right permissions (you can find in their websites) for repo access to release new versions & intercept in pull requests - Make sure you have these options checked in TravisCI:
- Follow contributing
- in your project, run the following:
yarn add https://github.com/yourusername/react-ts-cdk
- import your components developed in this repo & use them!
Features
- [x] React
- [x] Typescript
- [x] Storybook
- [x] Jest
- [x] Enzyme
- [x] Webpack
- [x] Prettier
- [x] Commitizen
Workflow
Contributing
- Fork it!
- install dependencies:
yarn install
- Maybe use storybook to test your component in its final UI version:
yarn run storybook
- If using storybook, then open
localhost:6006
to get a hot module replacement environment to visualize your component after every file saved - Create your feature branch:
git checkout -b my-new-feature
- Check our workflow (it will help you understand how you should develop your feature), if you haven't yet.
- Commit your changes:
yarn run commit
- Push to the branch:
git push origin my-new-feature
- Submit a pull request 😄