How to Develop Web Applications with React – TalkIT

Welcome to the latest news from TalkIT. This issue looks at coding with React. If you want to know more take at look at our complete training course in React.

Contents
Why Bother with React
How it Works
Create a Simple Application
Start with the Components

Why Bother with React

Over the last 15 years I have developed in Classic ASP, then ASP.Net Web Forms & MVC. Along the way I have touched HTML, CSS and JavaScript. Recently I have updated my skills by studying Angular React. These contemporary frameworks offer a radically different approach to their predecessors.

The React Framework is the currently the most popular solution to developing enterprise web front ends. It uses open source JavaScript libraries to build front ends that run in a browser. React is a lightweight client-side library from Facebook, first introduced in 2013. Applications can work on any operating system: Windows, Linux or Apple’s OS.

How it Works

How does React help?

Gives you a logical way to construct your application as a hierarchy of interacting components
Simplifies DOM tree creation, e.g. via JSX
Simplifies state management, e.g. via Redux
Simplifies asynchronous operations, e.g. via Sagas

React is very lean and flexible – it allows you to use your own libraries to do things like:

Interact with local storage
Call Rest services
Generate CSS stylesheets
Test your code

React applications are written in JavaScript 6 (ES6)

ES6 is a significant enhancement of classic JavaScript (ES5)
ES6 includes some important language features that you need to understand to be effective as a React developer
Interpolated strings
Arrow functions (a.k.a. lambdas)
Classes and inheritance
Object and array destructuring
Spread parameters
Array mapping and filtering
Generator functions
CommonJS modules

The React library comprises a relatively small number of libraries. You need to manage these libraries in your application

g. using Node Package Manager (npm)
g. using Yarn

To get started, we’ll simply download React libraries directly from https://unpkg.com/

This is the CDN site for Node Package Manager libraries
Later on, we’ll see how to use WebPack to do it “properly”

Create a Simple Application

Let’s implement simple React applications in pure React. We’ll use ES6, the language of choice for React applications. This is a minimalist “Hello World” React app. Very basic.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello World Example in React</title>
</head>
<body>
<div id="osl-container"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script>
    const msg = React.createElement(
            'h1',
            {id: 'msg-0', 'title': 'This is my hello world message'},
            'Hello React!'
    )
    ReactDOM.render(msg, document.getElementById('osl-container'))
    console.log('msg', msg)
</script>
</body>
</html>

A React web app has a single top–level HTML element into which React will render the UI.

To use React in a web page, you need 2 libraries:

React – Creates views
ReactDOM – Renders views in the web browser

You can create a React element programmatically by calling React.createElement().

       <script>
           const msg = React.createElement(
…

Render your top-level React element into a target node on the web page, via ReactDOM.render()

       <script>
           …
                  ReactDOM.render(msg, document.getElementById('osl-container'))
       </script>

Start with the Components

Components are the main ingredient in React apps. Typically, apps have a hierarchy of components. This is a good place to start the apps design.

Divide–and–conquer

Partition the UI into a bunch of components
Each component is responsible for a bit of the UI

Benefits of the component approach

Each component is relatively small and focussed
Easier to develop
Potential reuse
Easier to test

There are several ways to develop components in React…

Via React.createClass() – deprecated in React 16.0

Via ES6 inheritance
Via stateless functional components

Defining a React Component via Inheritance

React has an abstract class named React.Component
Has common capabilities needed by all components
g. the ability to render the React elements for a component

To define your own component class:

Define a class that inherits from React.Component
Override render() function, to render the elements you want
Access properties passed into the component, via this.props

Here’s the data for our components

const products = [
    'Swansea City shirt',
    'Cardiff City shirt',
    'Bugatti Divo',
    '55in OLED HD TV',
    'Carving skis',
    'Ski boots',
]

const shops = [
    'London',
    'Paris',
    'NY',
    'Swansea',
]

Here’s the ItemsList component class

class ItemsList extends React.Component {
    render() {
        return React.createElement("ul", null,
            this.props.items.map((item, i) =>
                React.createElement("li", { key: i }, item)
            )
        )
    }
}

Here’s the Retailer component class

class Retailer extends React.Component {
    render() {
        return React.createElement('div', null,
            React.createElement('h1', null, 'Catalog'),
            React.createElement(ItemsList, {items: products}, null),
            React.createElement('h1', null, 'Shops'),
            React.createElement(ItemsList, {items: shops}, null)
        )
    }
}

We create/render a Retailer component as the root React element as follows

const retailer = React.createElement(Retailer, null, null)   
ReactDOM.render(retailer, document.getElementById('osl-container'))

Thanks to Andy Olsen for his excellent course slides