Very simple and not yet complete example on how to use Webpack together with React.
Present greeting cards to user :-)
You can find a running example of the app's latest version here: https://nilshartmann.github.io/react-webpack-example/
- Require CSS files from javascript
- Require images from Javascript (large ones that are copied & small ones that are inlined. Transparent for requirer)
- Require JSon from JavaScript
- Use babel to enable JSX and ECMAScript 2015/ES6 language features and ES7 language proposals.
- Use Webpack Development Server with React Hot Loader to reload React components without loosing the state
npm install
: To install all dependenciesnpm run devserver
: to start Webpack development server- Point your browser to
http://localhost:8080
and enjoy greeting cards :-) - Change some CSS or JavaScript files and see modifications on the fly. No reloading is necessary. React state will be preserved during reloads.
This example application is part of a (german) blog post, that I've written about React and Webpack. You can find the blog post on the german React community site reactjs.de: http://reactjs.de/posts/react-anwendungen-mit-webpack-entwickeln