React By Example: Part 1

John Tucker

Published in

Frontend Weekly

4 min readMay 26, 2017

Learning React through examples instead of theory.

What is React?

A JavaScript library for building user interfaces

— Facebook

Rather than trying to explain React concepts, we will introduce them through a series of increasingly complex examples. The completed examples are available as a GitHub repository.

If you are going to follow along, you will need to install some tools.

Chrome Browser: A number of React specific tools are available in Chrome.
Node.js: Many modern development tools are based on this JavaScript run-time environment.
Yarn: An improved JavaScript dependancy management tool that is compatible with Node.js (replaces functionality provided by npm) and increasingly being used.

note: Since this article was written, the standard Node.js package manager (npm) has made significant improvements and is now a perfectly fine option. But, these examples were written with Yarn in mind and there is no need to change.

What We Are NOT Covering

One of the biggest challenges of learning React, ironically, is not React itself. Instead it is the myriad of related tools layered in that creates the complexity.

While we will learn the concepts of the build process, we will avoid the complexities of webpack in this series. I wrote a separate series on this topic; webpack By Example: Part 1 that you can explore later.

In a later article, we will superficially touch upon the popular state management tool Redux. Likewise I wrote another series, Redux By Example: Part 1 that you can explore later.

The Reference

We first build a reference example with browser-friendly ES5 JavaScript; a counter application. We will come back to this example through-out this series to illuminate problems that React provides solutions for.

In a folder, create two files: index.html and index.js.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>React By Example</title>
  </head>
  <body>
    <div id="counter">0</div>
    <button id="increment">+</button>
    <script src="index.js"></script>
  </body>
</html>

index.js

(function () {
  'use strict'
  var counterEl = document.getElementById('counter');
  var incrementEl = document.getElementById('increment');
  incrementEl.addEventListener('click', function() {
    counterEl.innerHTML = (parseInt(counterEl.innerHTML, 10) + 1).toString();
  });
})();

Open index.html in Chrome Browser to load the counter application.

Create React App

Create React App (CRA) is a command-line tool, provided by Facebook, to allow you to develop React applications without the understanding the complexity of the build process.

note: With previous versions of Node.js, one had to install global packages. More recently, we can download and use the latest version of a package.

To download and use this tool to create an application, called my-app, type:

npx create-react-app my-app

To run the application, from inside the my-app folder, type:

yarn start

This will automatically load the application in your browser; showing a Welcome to React screen.

CRA as Build Tool

Interestingly enough, CRA has little to do with building React applications but is rather a robust modern JavaScript build solution. To illustrate this, we will build our plain ES5 JavaScript reference application using it.

npx create-react-app reference-cra

We first strip the application down to a bare minimum by deleting all the files in the src folder except index.js (which we will update).

src/index.js

window.console.log('Hello World');

To run the application, from inside the reference-cra folder, type:

yarn start

and the application will automatically load in your browser. Use your browser’s developer tools, e.g, Chrome Developer Tools, to see Hello World on the console.

We then build it back to our reference application by:

Updating public/index.html to our reference html file (above); except we remove the line <script src=”index.js”></script> (CRA will automatically build this line into the final application).
Updating src/index.js to our reference JavaScript file (above).
For good measure delete the unused files public/favicon.ico and public/manifest.json.

You will notice that as you save files, the browser will automatically reload your application. The command:

yarn start

starts the development build process that we will use as we develop applications; there is a separate production build process (we will explore later) that we will use when we want to deploy our application.

note: For now, we will ignore the warning about use strict that is output by yarn start process.

The Next Part

In the next part, React by Example: Part 2, we will learn a number of concepts surrounding the build process.

It bears repeating, much of what folk are learning when they transition to React is the concepts and tools used in modern JavaScript development; actually React itself is fairly simple.

React By Example: Part 1

Written by John Tucker