Blueprint for building React web applications with webpack

React is a powerful JavaScript library for building rich user interfaces. Here is a blueprint that you can use to easily build your first web application using React.

React

React is a popular library for building rich user interfaces. Since it focuses only on the UI you can integrate it with your existing stack and other libraries that you already know and have React manage showing and refreshing your data on the screen.

Event though React has been around for a few years now, it’s still somehow confusing what you need exactly to get started building your first React web application. This is even more the case if you want to combine it with webpack for transpiling and bundling your application to plain JavaScript.

Easily getting started with React and webpack

To simplify the process of getting started with React and webpack I’ve published a GitHub repository that contains the most basic pieces required for building React applications.

The repository contains:

• React and ReactDOM references for building React classes and adding them to the DOM
• webpack configuration for transpiling React to JavaScript and bundling the different React classes together
• webpack configuration for including CSS files in the generated bundle
• all dependencies required by webpack to transpile React to JavaScript
• npm tasks for starting the webpack dev server for running the web application on your dev machine and building an optimized version of the bundle

To start building your first web application using React all you need to do is:

• clone the repository
• in the command line run npm i to install all dependencies
• start the sample application by running in the command line npm start

The main application file is located in app/index.jsx. This is the file that you would start editing and extending with additional components of your web application. All other components referenced in app/index.jsx and other React classes will be automatically picked up by webpack and included in the generated bundle.

The sample web application doesn’t contain any references to the Flux architecture. Instead it’s meant to quickly get you started with React and webpack.

Happy Reacting!