satansdeer

interface ICard {
  id: string
  text: string
}

interface IColumn {
  id: string
  text: string
  cards: ICard[]
}

satansdeer

Create Columns and Cards. How to Define React Components

Now that we have our styles ready we can begin working on actual components for our cards and columns.

In this section I'm not going to explain how React components work. If you need to pick this knowledge up - refer to React documentation. Make sure you know what are props, what is state and how do lifecycle events work.

Now let's see what is different when you define React components in Typescript.

How to Define Class Components? When you define a class compoenent - you need to provide types for it's props and state. You do it by using special triangle brackets syntax:

satansdeer

interface FullOfFields {
  x: number;
  y: string;
  z: () => void;
}

type FullOfFieldsX = FullOfFields["x"]

interface Example extends Pick<FullOfFields, "x" | "y"> {
  foo: string

satansdeer

const config = {
  typeDirs: [
    { type: "pdf", directory: "documents" },
    { type: "png", directory: "images" },
    { type: "mp3", directory: "music" },
  ],
};

type Config = typeof config;
type TypeDirs = Config["typeDirs"];

satansdeer

import React from "react";
import Button from "@material-ui/core/Button";
import Snackbar from "@material-ui/core/Snackbar";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import worker from './TimerWorker/worker';
import WebWorker from './TimerWorker/workerSetup';

function TimerButton() {
  const workerRef = React.useRef()

satansdeer

## Вебинар Тестирование Реакт Приложений

- Как настроить окружение
    - Jest
    - React Testing Library
    - React Hooks Testing Library
- Какие плагины я использую
    - VSCode Jest Plugin
- Как понять что тестировать
    - Рендер

satansdeer

// -------------------- HOC definition ----

type InjectedProps = {
  initialState: AppState
}

export function withData<TProps>(
  WrappedComponent: React.JSXElementConstructor<TProps & InjectedProps>
) {
  const WrapperComponent: React.FC<Omit<TProps, keyof InjectedProps>> = ({ children, ...props }) => {

satansdeer

let solutions = []; // Points array

const checkCells = (...cells) => {
  return !!cells[0] && cells[0] === cells[1] && cells[1] === cells[2];
};

const checkWinConditions = (solution) => {
  let board = newBoard();
  solution.forEach((cell, k) => {
    board[cell[0]][cell[1]] = k % 2 ? "x" : "y";

satansdeer

import { useState } from "react";
import { NodeData } from "../utils/types";
import { useFocusedNodeIndex } from "./useFocusedNodeIndex";
import { Cover } from "./Cover";
import { Spacer } from "./Spacer";
import { BasicNode } from "../Node/BasicNode";
import { Title } from "./Title";
import { nanoid } from "nanoid";

export const Page = () => {

satansdeer

.node {
	border-radius: 4px;
	padding: 6px;
	cursor: text;
	width: 100%;
}

.page {
	cursor: pointer;
	font-weight: bold;