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

1. Fork it!
2. install dependencies:

yarn install

3. Create your account in TravisCI & Code Coverage
4. 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
5. Make sure you have these options checked in TravisCI:

6. Follow contributing
7. in your project, run the following:

yarn add https://github.com/yourusername/react-ts-cdk

8. import your components developed in this repo & use them!

Features

• React
• Typescript
• Storybook
• Jest
• Enzyme
• Webpack
• Prettier
• Commitizen

Workflow

See presentation

Contributing

1. Fork it!
2. install dependencies: yarn install
3. Maybe use storybook to test your component in its final UI version: yarn run storybook
4. If using storybook, then open localhost:6006 to get a hot module replacement environment to visualize your component after every file saved
5. Create your feature branch: git checkout -b my-new-feature
6. Check our workflow (it will help you understand how you should develop your feature), if you haven't yet.
7. Commit your changes: yarn run commit
8. Push to the branch: git push origin my-new-feature
9. Submit a pull request 😄

License

MIT