2^nd Theoretical Class:
Introduction to React

React

react.dev

• JavaScript UI library
• Declarative approach
• Renders only what is necessary
• Components as building blocks

Components

Component = function that returns JSX

• reusable
• composable
• single responsibility

React renders the component by calling the function.

Component names must start with a capital letter.

Composition

Resources:

• Your First Component
• Importing and Exporting Components

JSX

JavaScript Syntax Extension

• HTML-like markup in JavaScript files
• Stricter rules and some differences
• Transpiled into React JSX function calls

JavaScript in JSX:

Using curly braces: A window into the JavaScript world.

Any JavaScript expression will work inside the curly braces.

Resources:

• Writing Markup with JSX
• JavaScript in JSX with Curly Braces

Props

• Dynamic input data for components
• Object properties in the function's first argument
• We can pass anything - string, number, object, function...

Special props

• - anything passed inside the component's JSX tags
• - HTML attribute
• - HTML attribute
• - inline CSS as a JavaScript object
  • property names in camel case

Reference:

• Passing Props to a Component
• Common components (e.g. <div>) -> Reference -> Props

Events

⚠️ Hint: When passing an event handler, do not call it immediately - only pass the reference to it!

Event handlers as props

Resources:

• Responding to Events
• Common components (e.g. <div>)

Hooks

Special React functions to store internal state, run side effects and more things from a component.

Hook names always start with followed by a capital letter.

State

A hook to store a state variable inside a component:

Components can have multiple state hooks

State is local to a component instance on the screen

Resources:

• State: A Component's Memory
• useState
• Sharing State Between Components

More about hooks

• Built-in React Hooks
• Reusing Logic with Custom Hooks