{"id":13422623,"url":"https://github.com/insin/react-heatpack","last_synced_at":"2025-03-15T12:30:46.261Z","repository":{"id":34474673,"uuid":"38412385","full_name":"insin/react-heatpack","owner":"insin","description":"A 'heatpack' command for quick React development with webpack hot reloading","archived":true,"fork":false,"pushed_at":"2016-08-16T04:07:50.000Z","size":222,"stargazers_count":347,"open_issues_count":9,"forks_count":17,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-10-27T23:59:06.016Z","etag":null,"topics":["deprecated","react","toolkit","unmaintained"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/insin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-02T05:03:46.000Z","updated_at":"2024-09-29T10:58:44.000Z","dependencies_parsed_at":"2022-08-24T20:41:55.470Z","dependency_job_id":null,"html_url":"https://github.com/insin/react-heatpack","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-heatpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-heatpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-heatpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/insin%2Freact-heatpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/insin","download_url":"https://codeload.github.com/insin/react-heatpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243730982,"owners_count":20338748,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["deprecated","react","toolkit","unmaintained"],"created_at":"2024-07-30T23:00:48.982Z","updated_at":"2025-03-15T12:30:45.801Z","avatar_url":"https://github.com/insin.png","language":"JavaScript","funding_links":[],"categories":["Dev Tools","Uncategorized","JavaScript"],"sub_categories":["Miscellaneous","Uncategorized"],"readme":"# DEPRECATED\n\nIf you want to quickly prototype React apps without setting up a project, try [nwb](https://github.com/insin/nwb)'s `react` command instead.\n\nIf you want something to tweak and iterate on React components, try [Carte Blanche](https://github.com/carteb/carte-blanche), [Cosmos](https://github.com/skidding/cosmos) or [React Storybook](https://github.com/kadirahq/react-storybook)\n\n---\n\n# react-heatpack\n\n![heatpack](heatpack.png)\n[![npm package][npm-badge]][npm]\n\nA `heatpack` command for quick [React](https://facebook.github.io/react/) development with [webpack](https://webpack.github.io/) hot reloading.\n\n## Usage\n\nInstall the `heatpack` command globally:\n\n```\nnpm install -g react-heatpack\n```\n\nCall `heatpack` with the path to a module which either:\n\n* runs `ReactDOM.render(...)`,\n* exports a single React component,\n* or exports a React element (e.g. `module.exports = \u003cdiv\u003e\u003c/div\u003e`)\n\nFor example:\n\n```\n$ cat \u003e index.js\nimport React from 'react'\n\nexport default React.createClass({\n  render() {\n    return \u003cdiv\u003eHello worlds!\u003c/div\u003e\n  }\n})\n\n$ heatpack index.js\nreact-heatpack listening at localhost:3000\nwebpack built d32ba06f966491387326 in 2075ms\n```\n\nOpen http://localhost:3000/ and your app will be served and will be hot reloaded with any changes you make.\n\n\"Hello worlds!\"? Let's fix that typo:\n\n![hot reloading example](heatpack.gif)\n\nSyntax errors or errors in `render()` methods will be displayed on the screen.\n\n### Use cases\n\n* Quick development and experimentation without the inertia of having to create config files and configure development dependencies up-front.\n\n* Creating [Gists](https://gist.github.com/) which can be cloned, `npm install`ed and `npm start`ed when you want to share code, instead of having to create and host a static build, e.g. [React Form Play](https://gist.github.com/insin/49040037bbb6cd99faf7)\n\n## Configured loaders\n\nWebpack loaders are configured for the following:\n\n### JavaScript\n\nJavaScript modules can have `.js` or `.jsx` extensions and will be transformed with [Babel](http://babeljs.io) (version 5), so you can use:\n\n* [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html)\n* [ECMAScript 6 features](https://web.archive.org/web/20150910124138/http://babeljs.io/docs/learn-es2015/#ecmascript-6-features)\n* [ECMAScript 7 proposals](https://web.archive.org/web/20150910174653/https://babeljs.io/docs/usage/experimental/) experimentally supported by Babel 5.\n\nYou can also require `.json` files as normal.\n\n### CSS\n\nRequire CSS files from your JavaScript as if they were any other module, e.g.:\n\n```javascript\nrequire('./Widget.css')\n```\n\nStyles will be automatically applied to the page and hot reloaded when you make a change.\n\nVendor prefixes will be automatically applied to your CSS, as necessary.\n\nImages and font files referenced from your CSS will also be handled for you.\n\nSee the [css-loader documentation](https://github.com/webpack/css-loader) for more information on what webpack allows you to do when you start using `require()` for CSS.\n\n### Images\n\nRequire image files from your JavaScript as if they were any other module, e.g.:\n\n```html\n\u003cimg src={require('./logo.png')}/\u003e\n```\n\nSmall images will be inlined as `data:` URIs and larger images will be served up by webpack.\n\n## Gotcha avoidance\n\n### Root element\n\nSince [you should never render to `document.body`](https://medium.com/@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375#486f), the page served up by heatpack includes a `\u003cdiv id=\"app\"\u003e\u003c/div\u003e` element for your app to render into.\n\n## Tips \u0026 tricks\n\n### Single-file hot reloading with multiple components\n\nIf you define and render a bunch of React components in the same module, they can still be hot reloaded.\n\nThis can be handy for quickly hacking together something which needs multiple components without having to create separate modules for them:\n\n```js\nvar React = require('react')\nvar ReactDOM = require('react-dom')\n\nvar App = React.createClass({\n  render() {\n    return \u003cdiv\u003e\u003cMenu/\u003e\u003cContent/\u003e\u003c/div\u003e\n  }\n})\nvar Menu = React.createClass({\n  render() {\n    return \u003cnav\u003e\u003cul\u003e\u003cli\u003eItem\u003c/li\u003e\u003c/ul\u003e\u003c/nav\u003e\n  }\n})\nvar Content = React.createClass({\n  render() {\n    return \u003csection\u003e\u003ch1\u003eContent\u003c/h1\u003e\u003c/section\u003e\n  }\n})\n\nReactDOM.render(\u003cApp/\u003e, document.querySelector('#app'))\n```\n\n### Heatpack in a Tweet\n\n```\ncat \u003c\u003c ^D \u003e index.js\nimport React from 'react'\nexport default () =\u003e \u003cdiv\u003e#reactjs\u003c/div\u003e\n^D\nnpm install -g react-heatpack\nheatpack index.js\n\n```\n\n## Beyond heatpack\n\nCheck out [rwb: the React workbench](https://github.com/petehunt/rwb), which serves and creates production builds for React apps without having to set up your own build tools.\n\nAlternatively if you want set up your own webpack config for a production build, these resources should be useful:\n\n* [petehunt/webpack-howto](https://github.com/petehunt/webpack-howto) is a great place to start for the most common \"How do I configure X?\" questions about webpack.\n\n* [cesarandreu/web-app](https://github.com/cesarandreu/web-app) describes itself as a \"reasonable starting point for building a web app\" - as such, it probably doesn't have everything you'll end up needing, but it's a working out-of-the-box example of building for dev, test and production, with meticulously-commented webpack config which links out to relevant documentation and other resources.\n\n* [SurviveJS - Webpack and React](http://survivejs.com/) - while this entire book is a useful reference for working with React and webpack, the [Deploying Applications](http://survivejs.com/webpack_react/deploying_applications/) chapter is of particular interest for putting together a production build.\n\n## MIT Licensed\n\n[npm-badge]: https://img.shields.io/npm/v/react-heatpack.svg\n[npm]: https://www.npmjs.org/package/react-heatpack\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Freact-heatpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finsin%2Freact-heatpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finsin%2Freact-heatpack/lists"}