Skip to content

Instantly share code, notes, and snippets.


Maksim Ivanov satansdeer

View GitHub Profile
View fail.ts
interface ICard {
id: string
text: string
interface IColumn {
id: string
text: string
cards: ICard[]
View Class

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:

View extract-typescript-fields.ts
interface FullOfFields {
x: number;
y: string;
z: () => void;
type FullOfFieldsX = FullOfFields["x"]
interface Example extends Pick<FullOfFields, "x" | "y"> {
foo: string
View deno-files-example.ts
const config = {
typeDirs: [
{ type: "pdf", directory: "documents" },
{ type: "png", directory: "images" },
{ type: "mp3", directory: "music" },
type Config = typeof config;
type TypeDirs = Config["typeDirs"];
View TimerButton.jsx
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()
View gist:8a247d55c287d9d5829354073dda12dc
## Вебинар Тестирование Реакт Приложений
- Как настроить окружение
- Jest
- React Testing Library
- React Hooks Testing Library
- Какие плагины я использую
- VSCode Jest Plugin
- Как понять что тестировать
- Рендер
View HOC.tsx
// -------------------- 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 }) => {
View tictactoe_solver.js
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";