# gaearon/react-hot-boilerplate

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/gaearon-react-hot-boilerplate).**

3,892 stars · 859 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/gaearon/react-hot-boilerplate
- awesome-repositories: https://awesome-repositories.com/repository/gaearon-react-hot-boilerplate.md

## Description

This project is a live-editing development environment and React component boilerplate. It serves as a project starter and template designed to enable the updating of React components in the browser without refreshing the page.

The environment focuses on React hot reloading to provide a frontend development workflow where code changes are reflected instantly in the user interface. This supports live UI prototyping by allowing modifications to styles and component logic without losing the current application state.

The setup incorporates a development server, module replacement, and transpilation to facilitate real-time updates to the application state and interface during the building and testing process.

## Tags

### Development Tools & Productivity

- [Web Hot Reloaders](https://awesome-repositories.com/f/development-tools-productivity/hot-code-reloading/desktop-hot-reloaders/web-hot-reloaders.md) — A minimal project starter that demonstrates how to update React components in the browser without refreshing the page.
- [Web Application Hot Reloading](https://awesome-repositories.com/f/development-tools-productivity/hot-code-reloading/web-application-hot-reloading.md) — Provides a development environment where the web application UI and state are updated instantly as code changes. ([source](https://github.com/gaearon/react-hot-boilerplate/blob/master/index.html))
- [Hot Module Replacement](https://awesome-repositories.com/f/development-tools-productivity/hot-module-replacement.md) — Integrates Webpack's hot module replacement to patch the application bundle without a full page reload.
- [Live Development Environments](https://awesome-repositories.com/f/development-tools-productivity/live-development-environments.md) — Ships a complete live-editing environment that reflects code changes instantly in the user interface.
- [Live Frontend Development](https://awesome-repositories.com/f/development-tools-productivity/live-frontend-development.md) — Enables real-time updates of web interfaces, allowing developers to see changes instantly in the browser. ([source](https://github.com/gaearon/react-hot-boilerplate/blob/master/.babelrc))

### Mobile Development

- [Development Iteration Workflows](https://awesome-repositories.com/f/mobile-development/over-the-air-update-systems/development-iteration-workflows.md) — Facilitates a rapid iteration workflow with instant visual feedback for frontend user interface development.

### User Interface & Experience

- [Hot-Reload State Preservation](https://awesome-repositories.com/f/user-interface-experience/ui-state-preservation/hot-reload-state-preservation.md) — Maintains internal component and hook state during live code updates to prevent application resets.

### Software Engineering & Architecture

- [Component Proxies](https://awesome-repositories.com/f/software-engineering-architecture/asset-wrapping-modules/component-proxies.md) — Utilizes component proxies to intercept updates and apply new logic while preserving the current UI state.
- [UI Prototyping](https://awesome-repositories.com/f/software-engineering-architecture/development-methodologies/rapid-prototyping/ui-prototyping.md) — Supports live UI prototyping by allowing on-the-fly modifications to styles and logic without losing state.

### Web Development

- [React Project Boilerplates](https://awesome-repositories.com/f/web-development/create-react-app-customizations/project-scaffolders/react-project-boilerplates.md) — Provides a pre-configured React project foundation optimized for rapid prototyping and live iteration.

### Part of an Awesome List

- [Application Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/application-frameworks.md) — Minimalist boilerplate for live-editing.