ReactJS in development mode

Question

Is there a way to not have to build my app every time I want to run it? It is impossible to debug once it is compiled. I have seen in videos the browser loads 100s of js files instead of one big build.js.

What do I need to change to make this happen?

Answer 1

This is a downfall in working with modern things like React, but the answer is to use something like webpack. Webpack is able to generate the single file, but generate source maps with it as well. Browser tools are then able to map the single build file to the original source code, making it much easier to debug. Browserify has this ability as well, which you can use along side gulp or grunt, along with babel to compile ES6.

I'd recommend checking out webpack though, as it's becoming more commonplace. Personally I find it a bit tricky to figure out, but once you have it running, it's great. I don't have a good example handy on using webpack with react, but there are a number of articles & tutorials out there on the subject: https://www.codementor.io/reactjs/tutorial/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack