Exploring React, Less and Express

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.

Run the example project
Review the README on GitHub and ensure you have met the prerequisites. Create a folder where you want to clone into e.g. ReactExample.
Open a Terminal Window at that new folder location and run the following two commands (note the dot at the end that will clone into current folder).

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

When the above commands have completed, open a new Terminal Tab at the same location and run the following command to build sources (note that this command watches for changes, so you won’t see the command prompt until entering Ctrl-C).

$ npm run build

Open a new Terminal Tab at the same location and run the following command to start the server.

$ npm run dev

Open a Browser and navigate to http://localhost:3000 to see the example project running. Open the Browser Developer Tools and expand the Webpack section to view source map files.

 

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.


Published by Mark Brownsword

I've been working as an enterprise developer for about 15 years, always using .NET platform and mostly using Oracle databases. My degree is in Business Studies, majoring in information systems, where I learnt the fundamentals of software engineering for building systems for business. In my spare time I like to play around with games programming because the emphasis is much more on pure computer science.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s