Skip to content

Instantly share code, notes, and snippets.

Avatar
🚜
Traktor-schooling

Maksim Ivanov satansdeer

🚜
Traktor-schooling
View GitHub Profile
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";
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 gist:8a247d55c287d9d5829354073dda12dc
## Вебинар Тестирование Реакт Приложений
- Как настроить окружение
- Jest
- React Testing Library
- React Hooks Testing Library
- Какие плагины я использую
- VSCode Jest Plugin
- Как понять что тестировать
- Рендер
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 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 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 Class components.md

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 fail.ts
interface ICard {
id: string
text: string
}
interface IColumn {
id: string
text: string
cards: ICard[]
}
View theme_example.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";
import { createStore, combineReducers } from "redux";
import { Provider } from "react-redux";
import { reducer as form } from "redux-form";
import { profileReducer as profile } from "./profile/reducer";
View New ES10 features.md

Javascript 2019 - ES10 New Features

It is 2019, and there is a bunch of new features that got approved by the TC49 consortium and soon will become part of ES10 standard.

My name is Maksim and let's check them out.

One thing before we move to the code examples: watch this video till the end, because I'll show you how to always well informed and up to date about new Javascript features.