Less brings structure to the CSS world through nesting of query selectors, variables and helper functions. To use Less with React we need to require the Less files in our React code, while Webpack takes care of bundling and minification with the dedicated less-loader. After being converted to CSS, the extract-text-plugin outputs the CSS to a file, ready to be included in the HTML.
Express’ role is to serve the applications assets when requested by the Browser. All recognised page requests return the same home page, since we are a Single Page Application. Express runs directly on node.js when deployed to Heroku, but during development it runs on nodemon, which watches for changes in server components and performs a restart when a change is detected. This keeps the running server up-to-date.
While React may appear to be the star of the show, there are many technologies required to pull off a modern web application. These include Less for styling, Express for serving the assets and Webpack for bundling the sources, with all of this technology stack sitting on top of node.js.
View the code on GitHub.