CODEWITHSUNDEEP
reactjsreact-reduxjsx
Xi 张熹
Xi 张熹

Reputation: 11071

Make React JSX build faster with no production

I switched to ReactJS from pure JS for my web frontend. I made my dev workflow slower. It used to be that I edit a file, refresh browser and it's there. But now, I have to run "npm run build" and wait for a few seconds before refreshing browser.

Is there a way I can do it without building? Or is there a way I can choose not to build a minified JS to save time?

Upvotes: 1

Views: 193

Answers (1)

Dinesh Pandiyan
Dinesh Pandiyan

Reputation: 6289

1. Use webpack watch mode to build automatically.

Add --watch param to the script that starts your build

"start": "webpack --watch"

2. Hot module replacement

You can configure webpack to use hot module replacement, which basically puts your code in live edit mode and you don't have to refresh you browser to get the changes. Configuration might be tricky but will save you a lot of time.

For more info, refer official docs - Hot Module Replacement

3. Use create-react-app

If you are just starting your project, use create-react-app to generate the react boilerplate. It comes with built-in hot module replacement and optimal confguration for both development and production.

Navigate to a new dir and run

npx create-react-app your-project-name

This will create a new directory with the name you provided and everything else from there will be straight forward.

More info here - create-react-app

Upvotes: 1

Related Questions