How to Develop Web Applications with React

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 toplevel HTML element into which React will render the UI.

<div id=”osl-container”></div>

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

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

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

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.

Divideandconquer

  • 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

David Ringsell TalkIT 2019 ©

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top