kriasoft / react-starter-kit

The web's most popular Jamstack front-end template (boilerplate) for building web applications with React
https://reactstarter.com
MIT License
22.75k stars 4.16k forks source link

Integrate React Hot Reload #7

Closed koistya closed 8 years ago

koistya commented 10 years ago

React Hot Reload http://gaearon.github.io/react-hot-loader/

mofas commented 9 years ago

+1

buxel commented 9 years ago

+1 because its really sweet

Maybe -1 because it adds avoidable complexity to a starter kit. It either should be well documented / commented to remain starter friendly, or you might consider making it optional and convert the starter kit to a yeoman generator.

goatslacker commented 9 years ago

Definitely this. Do you need help tackling any of these things?

koistya commented 9 years ago

Trying to figure out, is there a way to use both Browser-Sync and React-Hot-Loader..

gaearon commented 9 years ago

Why use BrowserSync over Webpack? It can handle CSS just fine.

koistya commented 9 years ago

@gaearon with BrowserSync you can open your website in different browsers and even on different devices (it creates HTTP tunnel with external IP to make things simple for connecting from devices other than your local PC), then when you navigate through the site, all the click, scroll, form data events are synchronized accross all the connected browsers which makes testing in different browsers supper easy.

Check this article by Addy Osmani http://addyosmani.com/blog/browser-sync/ Also these slides: https://speakerdeck.com/addyosmani/front-end-tooling-workflows

gaearon commented 9 years ago

I get it now, thanks! That's a nice tool.

27leaves commented 9 years ago

:+1: Here are some slides of a local presentation about that topic. Isn't very detailed, but enough for me to be excited about it :) http://okonet.ru/slides/reactive-development/

koistya commented 8 years ago

React Hot Transform was integrated into the starter kit. It plugs into the app when you run the site in a "watch" mode by hitting npm start (see tools/start.js).