Learning React requires quite some knowledge of the modern JavaScript build pipeline (node.js especially), but it is worth exploring this gem of a technology. The usual approach to get skilled in React is to look through and run the starter projects available on GitHub, which reveal part of the problem in learning React, that it takes many technologies to create a web application but most starter projects focus only on React. This article introduces at a high level the technologies required to build a web application with React, Less and Express, with a working example project that integrates these technologies together.

Tooling
You’ll need to have Git and node.js installed to get started. I’ve previously written about how to Setup MacBook for node.js Development. Node.js is the foundation for building a React application, in our case running the Express server component, performing bundling of the client application with Webpack and providing the CommonJS module format that allows us to split the React components into separate files. The Node.js package.json file contains scripts for performing development tasks that are launched with the npm run command e.g. building sources and running the server. Building the sources is done with Webpack, which is a node module that converts the React and Less code into plain JavaScript and CSS that can be included with the HTML.

React
The essence of React revolves around state, props, the virtual DOM and efficient rendering based on comparing the difference between the virtual DOM and the real DOM and only updating what has changed. Renderings are triggered by setting state within React components, triggering a flow that sees props passed down the component tree. Each React component has a render function that provides the user interface for the component, where dynamic layout decisions can be made based on the received props. The markup that is written in the render function is referred to as JavaScript XML (JSX) and is transpiled into JavaScript by Webpack. A web application is created by assembling these React components together. It is this idea of components that makes React such a powerful technology for building web applications that are scaleable and maintainable.

Less
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
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.

$ git clone https://github.com/markbrownsword/react-example.git .

$ npm install

$ npm run build

$ npm run dev

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.