Chapter 1: Components

Hello
20:11

JS for babies

Syllabus
20:11

Tentative syllabus (subject to change)

  1. Functional Component Architecture with React
  2. SPA with React Router
  3. SSR and Isomorphic JS with Next.js
  4. Authentication
  5. GraphQL (if time allows)
  6. Mobile development with React Native (if time allows)
  7. State of the art (signals, hydration, ...) (if time allows)

Aims

  1. Write scalable and maintainable apps
  2. Write high quality code
  3. Understand the strengths and drawbacks of isomorphic Javascript development
  4. Make good architecture choices for hybrid development

TypeScript
20:11

  • First release: 2012
  • Developed by Microsoft
  • Superset of JavaScript that adds type annotations
  • Filename extensions: .ts, .tsx

TypeScript
20:11

We shall see that using TypeScript will give us very helpful Intellisense.

Why should we use JS frameworks?
20:11

Question

Why should we use JS frameworks?

To deal with mutations: You need to read the entire code to know what a node represents.

About React
20:11

Original author
Jordan Walke
Developers
Meta and community
Source code
github.com/facebook/react
License
MIT License
Website
react.dev

Question

Why React?

React in 100 seconds
20:11

5 min university
20:11

Question

What is React?

  • Javascript Library for creating UI components ( html tags)
  • Declarative: performs DOM mutations for you (no need for .innerHTML etc.)
  • Incredibly simple (and beautiful)
  • Components are easier to test

Install React
20:11

  1. Install Node
  2. Run npm create vite@latest <project_name>.
  3. Select React as a framework and TypeScript as a variant.
  4. Run npm install in the newly created directory.

Exercise

Set up React using the instructions above

Pure components: example
20:11

Here is a simple example of React code. Components are simply function, and props is an object that contains the component's attributes.

JSX
20:11

The HTML you see in the return clauses in in reality syntactic sugar called JSX.

A tool called Babel compiles it to Javascript.

JSX vs HTML
20:11

Remark (Differences with HTML)

  • Use of camelCase
  • JS Expressions in curly braces
  • Renamed attributes because of conflicts (e.g. class -> className)
  • Props can be types other than string
  • style is an object

CV
20:11

Exercise

Create a CVLine component, and use it to create your CV

This is how your component should be used like this:

The useState hook
20:11

Idea

useState: for variables that affect the UI. Provides a setter function that triggers a rerender to update the DOM.

Definition

Remark

  • Just changing variable will not update the UI, you need to use the setter function if you want the change to be reflected.
  • useState is an example of React hook
  • Hooks can only be called at the top level of a component

React: stateful components
20:11

Question

Why do we need setCount?

Aside: Svelte
20:11

I highly encourage you to have a look at other frameworks. Svelte is known for being extremely readable.

Todo application
20:11

Exercise

Create a todo app with React

Props
20:11

Idea (Props)

Props (properties) generalize HTML attributes.

Example (Simple component with props)

Remark

Components are rerendered at every prop change

Pitfalls of React's reactivity model
20:11

Exercise

Write a component that shows a clock in the hh:mm:ss format and a counter that increases every second.

Remark

Unless you've done some React before, your first attempt will most likely be wrong. Can you explain why?

Idea

  • Have a look at the setInterval function.
  • Read up on React's useEffect hook.

Aside: Svelte
20:11

The useEffect hook
20:11

Definition (useEffect hook)

callback is called every time one of the dependencies changes. It needs to be a synchronous function.

Remark

If dependencies is an empty array, the callback will be executed once (on mount).

Example: data fetching
20:11

Remark

Newer versions of React introduce Suspense to deal with async

Exercise: Pokemon
20:11

Exercise

Implement the following:

Loading

Use the PokéAPI.

Exercise: Wordle
20:11

Implement the word game wordle

Signal Implementation
20:11

We'll implement together a signal implementation of useEffect and useState.

Remark

This implementation has a lot of advantages because we need not follow the rules of hooks, and can create effects with asynchronous functions.