All Projects → cometkim → react-hot-reload.macro

cometkim / react-hot-reload.macro

Licence: MIT License
Zero configuration 🔥Hot Module Replacement🔥 using Babel macro

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-hot-reload.macro

cra-macro-example
This is an example of how you can use Create React App with Babel Plugin Macros.
Stars: ✭ 38 (+22.58%)
Mutual labels:  create-react-app, babel-plugin-macros
react-intl.macro
Extract react-intl messages with babel-plugin-macros.
Stars: ✭ 39 (+25.81%)
Mutual labels:  create-react-app, babel-plugin-macros
elegant-react-ssr
Server-side rendering with create-react-app, React Router v4, Helmet, Redux, and Thunk boilerplate, without ejecting CRA
Stars: ✭ 16 (-48.39%)
Mutual labels:  create-react-app
rocketact
🚀Developing React projects with ease
Stars: ✭ 45 (+45.16%)
Mutual labels:  create-react-app
create-react-app-relay-modern
Create React App + Relay Modern
Stars: ✭ 50 (+61.29%)
Mutual labels:  create-react-app
over-hangman
💥 Over powered hangman game
Stars: ✭ 42 (+35.48%)
Mutual labels:  create-react-app
react-shopping-cart-demo
Notes and the code for the React.js crash course by Mosh Hamedani.
Stars: ✭ 86 (+177.42%)
Mutual labels:  create-react-app
cra-template-unicorn
🦄 The full template of create-react-app with typescript, redux-toolkit, react-redux, react-router for Single Page Application!
Stars: ✭ 56 (+80.65%)
Mutual labels:  create-react-app
chatty
A React single-page-application alternative client for the shacknews chatty.
Stars: ✭ 27 (-12.9%)
Mutual labels:  create-react-app
boss
React+express+sock.io+mongodb build a boss
Stars: ✭ 25 (-19.35%)
Mutual labels:  create-react-app
epee-react-admin
🗡简洁、高效、易扩展的 React 快速开发模板,基于布局设计,纯 Hooks 开发,包含中后台应用常用功能
Stars: ✭ 87 (+180.65%)
Mutual labels:  create-react-app
templates
Templates for Intility developers.
Stars: ✭ 31 (+0%)
Mutual labels:  create-react-app
truffle-react
⚛️ A boilerplate Truffle Box project with Create React App for rapid Ethereum Dapp development
Stars: ✭ 45 (+45.16%)
Mutual labels:  create-react-app
react-app-rewire-workbox
Customise the service worker for create-react-app apps without ejecting - using Google's Workbox webpack plugins instead of the old sw-precache
Stars: ✭ 44 (+41.94%)
Mutual labels:  create-react-app
react-app-rewire-webpack-bundle-analyzer
Add webpack-bundle-analyzer to a react-app-rewired config.
Stars: ✭ 24 (-22.58%)
Mutual labels:  create-react-app
react-firebase-t3chfest
T3chFest 2017 Workshop about React + Firebase
Stars: ✭ 42 (+35.48%)
Mutual labels:  create-react-app
react-component-lib
Boilerplate repo for creating npm packages with React components written in TypeScript and using styled-components
Stars: ✭ 69 (+122.58%)
Mutual labels:  create-react-app
eslint-config-website
GUI for generating ESLint configs
Stars: ✭ 45 (+45.16%)
Mutual labels:  create-react-app
opPortfolio
A clean portfolio template made with ReactJS.
Stars: ✭ 29 (-6.45%)
Mutual labels:  create-react-app
react-mui-pro-starter
Mix of Create React App and Material UI with set of reusable components and utilities to build professional React Applications faster.
Stars: ✭ 14 (-54.84%)
Mutual labels:  create-react-app

react-hot-reload.macro

Babel Macro NPM

DEPRECATION NOTE: This does NOTTHING, but just remove the wrapper on process.env.NODE_ENV === 'production'.

I recommend to use react-hot-loader-loader by @NoamELB


Zero configuration 🔥Hot Module Replacement🔥 using Babel macro and react-hot-loader, mostly for Create React App (v2+) users

No eject 🎉 No configuration 🎉

Usage

yarn add react-hot-reload.macro
# or
npm install --save react-hot-reload.macro

Modify your App.js component

import React from 'react'
+import hot from 'react-hot-reload.macro'

...

-export default App
+export default hot(App)

That's it. Happy Hacking!

React-🔥-DOM

RHL will patch React, replace React-DOM by React-🔥-DOM and work with fiber directly

Since RHL 4.5.0+, you would need to patch react-dom by @hot-loader/react-dom

Currently only available option without ejecting is using Yarn's name resolution.

yarn add react-dom@npm:@hot-loader/react-dom

(if anyone know another workaround of it, please let me know)

Configure RHL

You still can use RHL's APIs. Following the setConfig() API of RHL.

Changelog

  • v2.1.2

    • Add Flow type definition
    • Update babel-plugin-macros to ^2.5.1
    • Update react-hot-loader to ^4.8.2
  • v2.1.0

    • Update babel-plugin-macros to ^2.5.0
    • Update react-hot-loader to ^4.7.0
  • v2.0.2

    • Add TypeScript definition
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].