Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/santospatrick/react-ts-cdk
🔥 React + Typescript Boilerplate to develop your own react components and reuse in another projects
https://github.com/santospatrick/react-ts-cdk
cdk react typescript
Last synced: 23 days ago
JSON representation
🔥 React + Typescript Boilerplate to develop your own react components and reuse in another projects
- Host: GitHub
- URL: https://github.com/santospatrick/react-ts-cdk
- Owner: santospatrick
- License: mit
- Created: 2017-12-16T00:17:52.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-17T15:15:05.000Z (almost 7 years ago)
- Last Synced: 2024-10-30T05:34:35.281Z (2 months ago)
- Topics: cdk, react, typescript
- Language: JavaScript
- Size: 317 KB
- Stars: 1
- Watchers: 4
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](#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
* [x] React
* [x] Typescript
* [x] Storybook
* [x] Jest
* [x] Enzyme
* [x] Webpack
* [x] Prettier
* [x] Commitizen
## Workflow
[See presentation](http://slides.com/santospatrick/react-typescript-cdk/fullscreen)
## 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](#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 :smile:
## License
[MIT](https://github.com/santospatrick/react-ts-cdk/blob/master/LICENSE)