When you run
webpack in your terminal window it builds your React application and places it into the dist folder you made earlier so you can try it. In fact, it's there right now: if you look in dist you'll see a file called bundle.js that's surprisingly large – mine is 940KB!
webpack straight from the command line proves that it works, but it's not how we'll be using it. This is because alongside Webpack we also installed Webpack Dev Server, which is the smartest, simplest way to build React applications – and it's what we'll be using from now on.
So, please run this command now:
Your computer will think for a few seconds then lots of text will whizz by, but hopefully the last line says "webpack: bundle is now VALID."
Now for the clever bit: open your web browser and point it at the address http://localhost:8080. This is your local computer running Webpack Dev Server – not only has it built your app for you, but it's also serving that app up so you can try it live.
Right now our code doesn't do anything, but you should be able to to your web browser's developer console and see the message "React is up and running!" printed there.
This shows that our basic configuration is all done, and it's time to start some React coding. You may also see a warning that favicon.ico could not be found, but that's nothing to worry about.
Note: if you're a Chrome user, you will find the React Chrome Developer Tools very useful when debugging your React apps.
Buy the book for $10
Get the complete, unabridged Hacking with React e-book and take your learning to the next level - includes a 45-day no questions asked money back guarantee!
If this was helpful, please take a moment to tell others about Hacking with React by tweeting about it!
Copyright ©2016 Paul Hudson. Follow me: @twostraws.