msl note

Intro In this time, I tried Hooks. [TypeScript] Try React 1 [TypeScript] Try React + Redux Try Hooks Introducing Hooks – React According to the documents, Hooks were for using states and side-effects in function components. State "useStates" gave me current states and functions what create next states like Reducer of Redux. App.tsx import 'raf/polyfill'; import React, { useState, useEffect } from 'react'; import logo from './logo.svg'; import './App.css'; import { renderBoard } from './tic-tac-toe-hooks/BoardHook'; import { BoardState } from './tic-tac-toe/Board'; function App() { // default value and the "state" type came from the argument of "useState". const [state, setBoardState] = useState(initialState()); function updateSquareValues(key: number) { const lastSquares = state.squares.slice(); lastSquares[key] = (state.nextIsX)? '✕': '◯'; // update ...

Intro [TypeScript] Try React 1 This time, I tried Redux to manage props and states. Manage by React First, I tried manging props and states by React. Manage in child components(Square.tsx) If only in the child components(Square.tsx) used the states, I could let them manage the states. SquareValue.ts export type SquareValue = '◯'|'✕'|null; Square.tsx import React from "react"; import './Square.css'; import { SquareValue } from './SquareValue'; export type SquareProps = { key: number, value: SquareValue, onClick: () => void, }; export type SquareState = { value: SquareValue, } export class Square extends React.Component<SquareProps, SquareState> { render() { return (<button className="square" onClick={() => this.setState({ value: '✕'})}> {this.state?.value} </button>); }; } When I clicked the buttons, they would show '✕...

Intro This time I tried React. First, I referred Documents and Tutorial. React – A JavaScript library for building user interfaces GitHub - facebook/react: A declarative, efficient, and flexible JavaScript library for building user interfaces. Getting started with React - Learn web development | MDN Create a project To create a new React project, I used "Create React App". GitHub - facebook/create-react-app: Set up a modern web app by running one command. It created these files. .git node_modules public L favicon.ico L index.html L logo192.png L logo512.png L manifest.json L robots.txt src L App.css L App.test.tsx L App.tsx L index.css L index.test.tsx L index.tsx L logo.svg L react-app-env.d.ts L serviceWorker.ts L setupTests.ts .gitignore package.json package-lock.json README.md tsconfig.json Make the page work with IE11 I could view the page by "npm start" or "npm run start".   ...

Intro In this post, I tried migration and setting foreign key. [PostgreSQL] Play with TypeORM 1 GitHub - typeorm/typeorm TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ES5). Migration To migrate tables, I created migration files by command. npx typeorm migration:create -n AddUpdateDate The file was created in src/migration. 1591186678545-AddUpdateDate.ts import {MigrationInterface, QueryRunner} from "typeorm"; export class AddUpdateDate1591186678545 implements MigrationInterface { public async up(queryRunner: QueryRunner): Promise<void> { } public async down(queryRunner: QueryRunner): Promise<void> { } } This time, I wanted to add "updateDate" column into "SampleUser" table. 1591186678545-AddUpdateDate.ts import {MigrationInterface, QueryRunner} from "typeorm"; export class AddUpdateDate1591186678545 implements MigrationInterface { public async up(queryRunner: QueryRunner): Promise<...

Intro This time, I tried accessing Database by TypeORM. Because I wanted to manage Database tables by ORM, I created a table first.  GitHub - typeorm/typeorm   TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ES5). Installation and creating a project Installation TypeORM needed "reflect-metadata" and database driver. npm install --save typeorm reflect-metadata pg typescript tsc npm install --save-dev @types/node And I also installed "ts-node" to skip compiling. npm install --save ts-node Preparing References I could generate a TypeORM project by TypeORM command. npx typeorm init --name gen-typeorm-sample --database postgres I refered Most of all settings from it. Adding files and folders First, I added tsconfig.json. npx tsc --init And I edited like below. tsconfig.json { "compilerOptions": { /* Basic Options */ "incremental": true, "target": "es5", "module": "comm...

Intro I showed some elements center with flexbox. And I wanted to make scrollable when a text what was in an element was long. Environments PostCSS ver.7.0.32 Autoprefixer ver.9.8.0 Samples package.json { "scripts": { "css": "npx postcss src/pcss/*.css -c postcss.config.js -d dist/css -w" }, "browserslist": [ "last 2 versions" ], "dependencies": { "autoprefixer": "^9.8.0", "postcss": "^7.0.32", "postcss-cli": "^7.1.1", "postcss-import": "^12.0.1", "precss": "^4.0.0" } } postcss.config.js module.exports = { plugins: [ require('autoprefixer')({ "grid": true, }), require('precss') ] } main.html <!DOCTYPE html> <html lang="en"> <head> ...