React

Topics

overview and simple example
JavaScript basics for React
state
JSX
React and TypeScript
development tooling
components
querying APIs
side effects
routing

React overview

React: JavaScript library for creating interactive user interfaces in the browser

Basics of modern JavaScript UI libraries

state-based / declarative
component-based

State-based / declarative

data model which describes the entire application state
user interactions change the state, causing the UI to update automatically

State-based / declarative

Example: complete state of a todo application

{
  "newTitleInput": "learn Rea",
  "todos": [
    { "id": 1, "title": "laundry", "completed": true },
    { "id": 4, "title": "shopping", "completed": true },
    { "id": 7, "title": "gardening", "completed": false }
  ]
}

State-based / declarative

possible appearance of a todo application:

Component-based

"custom" HTML-Tags
communication between parent and child elements via props and events

Component-based

example: component structure in a todo application

screenshot of a todo list application with components outlined in red

Component-based

Example: components, state and props in a todo application

What makes React special?

JavaScript-based template syntax: JSX
explicit state changes via setters
immutable (unchangeable) state objects

JSX

simple code example with state and JSX:

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div>current count: {count}</div>
      <div>
        <button onClick={() => setCount(count + 1)}>
          increment
        </button>
      </div>
    </div>
  );
}

Online editors

options:

common functionality:

based on VS Code
templates for React and React TypeScript
Prettier-based formatting via Shift + Alt + F
public hosting of results

Basic example: slideshow

example slideshow component that demonstrates:

component definition as a function
component state (image id)
JSX template language: mix of JavaScript and XML

online version on Codesandbox: https://codesandbox.io/s/slideshow-cn6m5

Basic example: slideshow

in App.js / App.tsx:

import Slideshow from './Slideshow';

// ...

  return (
    // ...
      <Slideshow />;
  )

Basic example: slideshow

import { useState } from 'react';

const baseUrl = 'https://picsum.photos/300/200?image=';
function Slideshow() {
  const [img, setImg] = useState(0);
  const imgUrl = baseUrl + img.toString();
  function goToPrevImg() {
    setImg(img !== 0 ? img - 1 : 0);
  }
  return (
    <div>
      <h1>Image {img}</h1>
      <button onClick={() => setImg(0)}>start</button>
      <button onClick={() => goToPrevImg()}>prev</button>
      <img src={imgUrl} alt="slideshow" />
      <button onClick={() => setImg(img + 1)}>next</button>
    </div>
  );
}
export default Slideshow;

Basic example: slideshow

function Slideshow() {
  // ...
}

A component is defined as a function that returns an XML tree

The function is called every time the component needs to be (re-)rendered

Component names always start with capital letters

Basic example: slideshow

  const [img, setImg] = useState(0);

A component can have internal state entries

useState returns the current state entry and a corresponding setter on every render

Basic example: slideshow

  const imgUrl = baseUrl + img.toString();

We should usually store the minimal state

Other values (like imgUrl) can be derived from the state values

Basic example: slideshow

  function goToPrevImg() {
    setImg(img !== 0 ? img - 1 : 0);
  }

functions that interact with state can be defined within the component function

Basic example: slideshow

  return (
    <div>
      ...
    </div>
  );

An XML tag switches from JavaScript to XML mode

Basic example: slideshow

      <h1>Image {img}</h1>

A curly brace switches back to JavaScript

Basic example: slideshow

      <button onClick={() => setImg(0)}>start</button>
      <button onClick={() => goToPrevImg()}>prev</button>
      <img src={imgUrl} alt="slideshow" />
      <button onClick={() => setImg(img + 1)}>next</button>

Event handlers can be defined as JavaScript functions