Node.js: create a basic web app with React - part 1

Developing a Full-Stack JavaScript web app with Caché requires you to bring together the right building blocks. Previously, I outlined the basic steps to install and connect Node.js to Caché and make it's powerful multi-model database capabilites available for use with Node.js. You can use Caché as a NoSQL-, document- (with unique key-level access!), SQL- and object-database with Node.js. When developing JavaScript applications, you'll see how powerful this combination is and makes Caché a perfect fit for Node.js.

In the first part of this article series I will show how to get started with the React framework, one of the most popular frameworks currently taking over front-end development. In the next parts you'll learn how to connect a basic web app to a Caché back-end.

You'll see, it's very easy to get started with this technology - you can even compare the amount of basic knowledge you need to COS because you only need to know a few basic concepts to start!

First, you need to have Node.js up-and-running with Caché as I've described in a previous article about Node.js.  Once you got Node.js installed on your system, you can create this first React demo application very easily.

In fact, this part is the first step showing you how to start creating a Node.js application with React. We will create a basic front-end app we will enhance later in part 3 to connect to your Caché database.

Enough introduction, let's make our hands dirty and get started!

First, you need to open a Windows command prompt and create a directory where your Node.js web apps will be stored, my directory will be C:\react

To make our React life very easy, the React developers have created a Node.js module to generate a complete React app skeleton and automatically set up all needed node modules: create-react-app. This module provides you with a complete development runtime environment for debugging an running your application.

To make this powerful module available system-wide, we have to install it using the npm utility. The NPM (Node package manager) module is the utility you need to install and manage your node.js modules in your apps. It's automatically installed for you when you install Node.js. You'll use this commandline utility very often when developing node apps.

Let's install the create-react-app module globally:

You'll notice a lot of installation activity going on, don't bother because it uses a lot of Node.js modules under the hood.

Now that we have the create-react-app command available, we can start now by letting this tool generate an application for us:

You'll see it created an application directory for you (C:\react\test) and it downloads and installs a lot (!) of node (npm) modules in this test subdirectory. Don't panic, the majority of these modules are only needed for development and are not required in production!

This also shows you the basics of how Node.js works: the Node.js runtime contains the JavaScript language features and basic system functions you need, however the real power comes from the 450,000+ readily available modules that exist in the Node.js community!

When the test app is generated completely, you should see this:

Now all we need to do is enter inside the test app directory end run "npm start" to run the application:

This command will start a Node.js development server running on localhost at port 3000 and open the application for you in your standard (Chrome) browser:

And in your browser, you should see the following:

Congratulations! You just created your first React app! That's all you need to create a fully functional web app.

As we've not written one single code line yet, we will also set up now our development environment for editing our source code. The source code editor (or IDE) you choose is entirely up to you, but a very popular choice these days is the Atom editor. Just download and install it on your system, it's very lightweight.

Start the editor, and add your C:\react project folder in the File menu:

Open the test app folder and inside the src subfolder, open the App.js file. Add the highlighted code line to this file, hit the "Save" button and watch the application update (refresh) itself in your browser in real-time:

What you just saw happening in your browser is what makes Node.js tooling so powerful: it's all built already for you and you can freely use it to build and debug your applications in a very user-friendly way.

Now let's force an error now in the source code by adding some invalid JavaScript inside the render() method:

And now see what happens in your browser ...

Pretty useful for debugging, don't you think? You get a complete debug, build & deploy environment with the standard create-react-app scripts.

Now open also the Chrome Devtools using Ctrl+Shift+I:

As you see, the error is also clearly shown in the Devtools console too.

Now there are a few more tools we can add to Atom and Chrome to create an even more powerful React debugging experience.

In your Atom editor, go to File - Settings and select +Install. Search for the "react" community package and install it. This package knows everything about the React JSX syntax with syntax highlighting.

In Chrome, install the "React Developer Tools" extension. When installed, watch the Devtools in Chrome: you'll see now a React debug tab is added - click on it. You can inspect now all your React components (and what's changing & updating) and debug them at React level (not only in HTML)!

We now have a complete React development environment using Node.js to develop your front-end. If you want to know more about React and learn the basic principles, I suggest you follow some tutorials on the React website.

In the next part of this series, we will set up our Node.js/Caché back-end (yes, you'll see you can write your complete Caché application in JavaScript!).