Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zackargyle/brainstorm
Quickstart prototyping tool for React components
https://github.com/zackargyle/brainstorm
Last synced: 2 months ago
JSON representation
Quickstart prototyping tool for React components
- Host: GitHub
- URL: https://github.com/zackargyle/brainstorm
- Owner: zackargyle
- Created: 2016-04-23T17:22:57.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-05-01T02:39:48.000Z (over 8 years ago)
- Last Synced: 2024-10-08T04:30:04.443Z (2 months ago)
- Language: JavaScript
- Size: 7.81 KB
- Stars: 53
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Brainstorm
=============
```
> npm install -g brainstorm
```
Brainstorm is a quick start tool for React component prototyping. Basically, I was sick of creating a new directory with all the es6/jsx/webpack setup each time I wanted to prototype a new component, in comes `brainstorm`. The idea is simple, pass it a file name and it will use it as the basis for a new project. This project will be set up with React, Babel, Webpack and Scss.
Let's say I wanted to create a new tooltip. Here's what you would run:
```
> brainstorm react-fancy-tooltip
```
This will do a few things:
1. Create a new directory called `react-fancy-tooltip` in the current working directory.
2. Create a `ReactFancyTooltip` container component and a `ReactFancyTooltipLayout` component.
3. Hook it up to a webpack devserver.
4. Install dependencies.
5. Open your text editor of choice.
6. Open your browser of choice.
And bam, you're ready to go with your editor open to your new component directory, webpack auto-reload enabled, and your browser open to localhost. In just a few short seconds you're up and ready to start writing some code!
option | alias | default | notes
----------- | ------ | --------------- | ----------
editor | e | subl | the editor to open your new directory in
browser | b | "Google Chrome" | the browser to use
```
> brainstorm react-fancy-tooltip --browser firefox --editor atom
> brainstorm react-fancy-tooltip -b firefox -e atom
```
#### TODO
- Add tests
- Add --redux support
- Look into postinstall for downloading component dependencies once to avoid `npm install`
- Better `editor` and `browser` support