SSR vs. CSR

SSR (Server-Side Rendering)

• Server generates ready to use HTML
• Preloaded -> Synchronous

CSR (Client-Side Rendering)

• Client generates ready to use HTML directly in the Browser
• Data is fetched async from the backend

What is React?

Overview

• Library to build web applications
• JavaScript / TypeScript
• Developed by Facebook
• Client-Side Rendering
• Component-based

Attributes

• JSX (JavaScript XML) Syntax
• Extensions: .jsx, .tsx
• Virtual DOM

Getting Started

Production-grade React frameworks

• Next.js
• Remix
• Gatsby

Tools

• Vite
• Create React App

Create a new React Typescript app using Vite

	# npm 6.x
	npm create vite@latest my-react-app --template react-ts

	# npm 7+, extra double-dash is needed:
	npm create vite@latest my-react-app -- --template react-ts

	# yarn
	yarn create vite my-react-app --template react-ts

	# pnpm
	pnpm create vite my-react-app --template react-ts
			

Example

Components

Functional Component

(recommended)

Class Component

(not recommended)

Props

You can define custom props for your component, so it can be rendered dynamically.

Props can be accessed through the `props` parameter of your components function.

Strings and numbers can be rendered directly. Other values must be mapped.

State

useState Hook

Update Objects in State

Update Arrays in State

Hooks

What are Hooks?

Hooks let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own.

Built-in React Hooks

• useState
• useRef
• useEffect
• useMemo
• useCallback
• ...

useState

useRef

Holds information which isn't used for re-rendering. Often used to hold a DOM node.

useEffect

Effects let a component connect to and synchronize with external systems. This includes dealing with network, browser DOM, animations, widgets written using a different UI library, and other non-React code.

Custom Hooks

Custom Hook Usage

Styling

CSS Classes

Note: unlike in HTML, the name of the corresponding prop in JSX is not `class`, but `className`

CSS Modules

Classnames are imported as object. The final classnames are randomly generated (e.g `HelloWorldComponent_helloWorld_2cvf73`).

Inline Styles

Allows usage of JavaScript variables. CSS classes are generally better for performance than inline styles.