@dynrl/create-react-comp-scripts

create-react-comp-scripts

Custom scripts for Create React App for generating React component projects written in TypeScript.

Getting Started

You must have Create React App installed globally see here for documentation.

Note: These steps will assume your new package is named my-component.

1. create-react-app my-component --scripts-version @dynrl/create-react-comp-scripts
2. cd my-component
3. yarn start
4. Launch a browser and navigate to http://localhost:9000

Available Scripts

• yarn start - Start the Stroybook server for development
• yarn build - Transpile to javascript in preperation for publishing
• yarn test - Run your tests using Jest
• yarn run format - Format your source files with Prettier
• yarn run export - Build a standalone Storybook for hosting a demo

Developing

Development is handled through Storybook which allows you to write stories which showcase your component for various use-cases. See here for more information abour writing stories.

To launch the Storybook server simply run yarn start then open a browser and navigate to http://localhost:9000. The Storybook server has hot-reloading enabled so changing your component or story can be done while the server is running and the changes will be reflected in the browser.

Stories should be written in TypesScript and the file should end in .story.tsx and be placed in the src directory. It is recommended you place them next to your component with the same name as the component (ex. /src/hello/Hello.tsx has the story /src/hello/Hello.story.tsx).

Testing

Testing is performed using Jest and Enzyme. Tests should be written in TypeScript and the file should end in .test.ts(x) or .spec.ts(x). Like stories, it is recommended to place the tests next to your component using the same name.

To test simply run yarn test

Building

Your TypeScript code will be transpiled to JavaScript (for distribution through npm) using Rollup. This must be done before publishing.

To build simply run yarn build

Formatting

TODO

Export Demo

TODO