{"_id":"react-transform-boilerplate","_rev":"6-d20fe9c4e76897670b1c044ce2926215","name":"react-transform-boilerplate","time":{"modified":"2022-06-26T08:41:45.476Z","created":"2015-09-11T05:42:45.217Z","0.1.0":"2015-09-11T05:42:45.217Z","1.0.0":"2015-10-09T10:51:02.635Z"},"maintainers":[{"name":"0nn0","email":"onno@pillar.cc"}],"dist-tags":{"latest":"1.0.0"},"description":"A new Webpack boilerplate with hot reloading React components, and error handling on module and component level.","readme":"React Transform Boilerplate\n=====================\n\nA *new* Webpack boilerplate with:\n\n* hot reloading React components;\n* error handling inside component `render()` function;\n* error handling for syntax errors (thanks, **[@glenjamin](https://github.com/glenjamin)**!)\n\nBuilt with **[babel-plugin-react-transform](https://github.com/gaearon/babel-plugin-react-transform)** and a few custom transforms.  \n**[Does not](https://medium.com/@dan_abramov/the-death-of-react-hot-loader-765fa791d7c4)** use React Hot Loader.\n\n[![react-transform channel on slack](https://img.shields.io/badge/slack-react--transform%40reactiflux-61DAFB.svg?style=flat-square)](http://www.reactiflux.com)\n\n## Demo\n\n![](http://i.imgur.com/AhGY28T.gif)\n\n```\ngit clone https://github.com/gaearon/react-transform-boilerplate.git\ncd react-transform-boilerplate\nnpm install\nnpm start\nopen http://localhost:3000\n```\n\nThen go ahead and edit files inside `src` (any file except `index.js`).\n\n## What’s Inside\n\n\nThe component instrumentation is implemented on top of **[babel-plugin-react-transform](https://github.com/gaearon/babel-plugin-react-transform)**:\n\n* **[react-transform-hmr](https://github.com/gaearon/react-transform-hmr)** handles hot reloading\n* **[react-transform-catch-errors](https://github.com/gaearon/react-transform-catch-errors)** catches component errors\n\nThe syntax errors are displayed in an overlay by **[@glenjamin](https://github.com/glenjamin)**’s **[webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware)** which replaces Webpack Dev Server.\n\n## Troubleshooting\n\n### I can’t serve images / use different HTML file / etc\n\nThis boilerplate is just a Webpack bundle served by an Express server. It’s not meant to demonstrate every feature of either project. Please consult Webpack and Express docs to learn how to serve images, or bundle them into your JavaScript application.\n\n### I don’t see the syntax error overlay!\n\nMake sure your react-app is not attached to `document.body` as the client overlay provided by [webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-middleware) will render into `document.body`.\nAttaching the React root node to `document.body` requires extra caution, as many third-party packages will append their markup to the body as well. React will replace the entire contents in the body on every re-render. Thus you will not see the additional markup.\n\nIt’s always better to render your React app in a `#root` DOM element.\n\n```js\nimport React from 'react'\nimport { App } from 'app'\n\nReact.render(<App />, document.getElementById('root'))\n```\n\n## Discussion\n\nYou can discuss React Transform and related projects in **#react-transform** channel on [Reactiflux Slack](http://reactiflux.com).\n\n## License\n\nCC0 (public domain)\n","versions":{"1.0.0":{"name":"react-transform-boilerplate","version":"1.0.0","description":"A new Webpack boilerplate with hot reloading React components, and error handling on module and component level.","scripts":{"clean":"rimraf dist","build:webpack":"NODE_ENV=production webpack --config webpack.config.prod.js","build":"npm run clean && npm run build:webpack","start":"node devServer.js","lint":"eslint src"},"repository":{"type":"git","url":"git+https://github.com/gaearon/react-transform-boilerplate.git"},"keywords":["react","reactjs","boilerplate","hot","reload","hmr","live","edit","webpack","babel","react-transform"],"author":{"name":"Dan Abramov","email":"dan.abramov@me.com","url":"http://github.com/gaearon"},"license":"CC0-1.0","bugs":{"url":"https://github.com/gaearon/react-transform-boilerplate/issues"},"homepage":"https://github.com/gaearon/react-transform-boilerplate","devDependencies":{"autoprefixer":"^6.0.3","babel-core":"^5.4.7","babel-eslint":"^4.1.3","babel-loader":"^5.1.2","babel-plugin-react-transform":"^1.1.1","css-loader":"^0.19.0","cssnext":"^1.8.4","eslint":"^1.6.0","eslint-config-infektweb":"^1.4.0","eslint-config-pillar":"0.0.3","eslint-plugin-react":"^3.5.1","express":"^4.13.3","extract-text-webpack-plugin":"^0.8.2","file-loader":"^0.8.4","image-webpack-loader":"^1.6.1","imagemin":"^3.2.0","normalize.css":"^3.0.3","postcss-css-variables":"^0.5.0","postcss-custom-media":"^5.0.0","postcss-custom-properties":"^5.0.0","postcss-loader":"^0.6.0","postcss-mixins":"^1.0.1","postcss-nested":"^1.0.0","raw-loader":"^0.5.1","react-transform-catch-errors":"^1.0.0","react-transform-hmr":"^1.0.0","redbox-react":"^1.0.1","rimraf":"^2.4.3","style-loader":"^0.12.4","svg-react-loader":"^0.1.5","svgo":"^0.5.6","svgo-loader":"^1.1.0","url-loader":"^0.5.6","webpack":"^1.9.6","webpack-dev-middleware":"^1.2.0","webpack-hot-middleware":"^2.0.0"},"dependencies":{"classnames":"^2.1.5","react":"^0.13.0"},"gitHead":"82cb8b7c48498949b28a23057c339a892663d0ac","_id":"react-transform-boilerplate@1.0.0","_shasum":"f26cc3b30d8bd0a0e071491093221f78637c3a11","_from":".","_npmVersion":"2.11.3","_nodeVersion":"0.12.7","_npmUser":{"name":"0nn0","email":"onno@pillar.cc"},"dist":{"shasum":"f26cc3b30d8bd0a0e071491093221f78637c3a11","tarball":"https://registry.npmjs.org/react-transform-boilerplate/-/react-transform-boilerplate-1.0.0.tgz","integrity":"sha512-xULTKIeK8dF+KhuWLvU+f+KxgMBFPj4oFKormnvT5yCIMP/DlfZIv9e+OD3d6ySWIhrtxv/asBpokNJYOcQVVw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBbxLT76qpPqkiDAhLODzuOu44EbwF/PWkYeos8ktSTfAiEA2WCD+FlU6HmW31EFqLblfXniPETZMxVGZiC4ZNYSzbg="}]},"maintainers":[{"name":"0nn0","email":"onno@pillar.cc"}]}},"homepage":"https://github.com/gaearon/react-transform-boilerplate","keywords":["react","reactjs","boilerplate","hot","reload","hmr","live","edit","webpack","babel","react-transform"],"repository":{"type":"git","url":"git+https://github.com/gaearon/react-transform-boilerplate.git"},"author":{"name":"Dan Abramov","email":"dan.abramov@me.com","url":"http://github.com/gaearon"},"bugs":{"url":"https://github.com/gaearon/react-transform-boilerplate/issues"},"license":"CC0-1.0","readmeFilename":"README.md","users":{"rw3iss":true}}