2^nd Theoretical Class:
React cheatsheet

React

• JavaScript library for building for building user interfaces
• Work with data (model/state)
• Component-Based

JSX

Allows us to write HTML code in React (JavaScript code) - mix JavaScript with HTML.

What is component?

It is function!

Custom components start everytime with capital letter!

Props

• Input data for component - arguments for function
• We can pass everything - string, value, object, function, ...

Special props

• className - attribute class - conflict with JavaSript keywords
• htmlFor - attribute for (label html element) - conflict with JavaSript keywords
• style - inline styles. Pass object to style element - properties needs to be in camel case - paddingBottom, backgroundColor, fontFamily, etc.

JavaScript in JSX

In JSX returned from function (component), we can use JavaSript properties, functions, etc. Pass JavaScript code into {} in JSX template.

Events

Execute JavaScript code (function, ...), when user interacts with application:

• onClick - button
• onChange - input
• onSubmit - form

Hooks

Write function components

Side effects

Something will be changed from outside - API call.

useState

Hook which allows us to write state components.

Component lifecycle

• Component can be updated many times during it's life.
• Component will update every time internal state or props (coming form parent component) will be changed.

useEffect

Allows us to controll all component lifecycle parts - mount, update and unmout - "If something happened, do something with component like fetch data, do a cleanup, etc.".

Execute side effect

When component is mounting, we need to fetch data.

Modern JavaScript

Import & Export

We have 2 types of exports.

Named exports

Default exports

var vs const & let

Don't use var! Use let only if neccesary! => Use const!

Template string

We have several ways how to work with strings

Destructuring