Lately I started developing using React and webpack and I just got a boost on productivity. I find this combination puts the fun back into front-end development and think you should really give it a try.
So for the sake of an example, in this series of blog posts we’ll try and build a simple property grid that is linked to a component that updates state in real time, as properties update in the property grid. You will find the complete example on github as we advance through the next posts.
This will be a series of articles on React and webpack, with multiple parts. This first part covers just the initial setup to get you going with React and displaying a hello world example (with autorefresh as you change your code)
Part 1 - initial setup
First our initial setup, create a folder for the app (let’s call it
cd into it and then run
in order to initialize your app as an npm package.
Install react and webpack
Then of course you need the
react npm package installed so just do
After having installed
react let’s install all our dev dependencies. For this we’ll need
webpack-dev-server for building/developing the app. We’ll need
jsx-loader in order to let
webpack transform our
jsx files into regular
Your first component
Now we are ready to write our first ReactJS component, so just create a file
Hello.jsx with a basic component:
Now let’s create
index.jsx as a starting point of our simple app.
Then we need to pack all those files into a single bundle file, and that’s why we have chosen to use
webpack. We need to create
webpack.config.js which is the default file webpack will look for when launched. So here it is:
The webpack config options are explained with comments, so you should get a basic understanding of what webpack will do given this configuration. This should be enough for now, so let’s go prepare our
index.html and launch our app
We need to create an
index.html file and serve it from a web server, so we install the npm
index.html should look like this
react (the version with addons) from the node_modules directory. It then includes
webpack-dev-server.js script, which is a script served by the
webpack-dev-server that will run on port
8090. The script is notified by the dev server whenever one of our files are changed, and reloads a new version of the bundle.
Finally we include
bundle.js, served by
webpack-dev-server, which contains all our files combined into one single file. NOTE: the bundle file is served from memory - no bundle.js will be created on your hard-drive at this point. This makes
webpack-dev-server really fast in rebundling/reloading when changes to our codebase occur.
Prepare run scripts
The final thing is to add three
scripts entries into our
What we just did was to add 3 commands that can be run through
npm run <cmd>.
npm run serve- just starts an
http-serverserving files from our local dir, running on port
8080(it serves index.html).
npm run dev- starts
8090which serves both the
webpack-dev-server.jsruntime and our
npm run start- command simply executes
servefirst and then starts the
Now we are ready:
If everything is fine, you should open localhost:8080 and have the app greet you with
Now if you go back into your text editor, and change the text, your browser should reload automatically and reflect the changes.
All the code for this first part can be found on github/radubrehar/react-examples/basic-property-grid