- react@^0.14.3
- fs-extra@^0.26.2
- node-sass@^3.4.2
- react-dom@^0.14.3
- babel-core@^6.3.15
- css-loader@^0.23.1
- sass-loader@^3.1.2
- style-loader@^0.13.0
- react-hot-loader@^1.3.0
- babel-preset-react@^6.3.13
- babel-preset-es2015@^6.3.13
- react-transform-hmr@^1.0.1
- atom-space-pen-views@^2.0.5
- babel-preset-stage-0@^6.3.13
- webpack-dev-middleware@^1.5.1
- webpack-hot-middleware@^2.6.1
- babel-preset-react-hmre@^1.0.1
- babel-plugin-react-transform@^2.0.0
- react-transform-catch-errors@^1.0.1
Atom React Preview - Github - Atom.io
Preview your React components directly in Atom. Works best for stateless components.
Features:
- Reload your component on save
- Editing the props in the preview area
- Saving the edits for when you reload your component again
- Supports LESS currently (feel free to submit PR with LESS/PostCSS support)
Like hot reloading, but within Atom!
Known issues:
- Doesn't load correctly when reloading window (opening/closing the panel solves this problem) (Issue #3)
- The codebase is a mess, based on atom-html-preview and only got time for minor refactoring atm, will get to that (Issue #4)
Install:
apm
apm install atom-react-preview
Inside Atom:
Go to "Install Packages" and search for atom-react-preview
Toggle React Preview
Press CTRL-SHIFT-M in the editor to open the preview pane.
Thanks
Thanks to https://github.com/webBoxio/atom-html-preview which 90% of the code is coming from. It got me to understand how Atom packages works and served as a base for this package. Thanks @webBoxio!