msl note

Intro This time, I added server-side. I choosed Nest.js because I love TypeScript and I had been interested in using TypeScript in server-side programming. Environments Angular ver.10.0.2 @ngrx/store ver.9.2.0 @ngrx/effects ver.9.2.0 @nestjs/ng-universal ver.2.0.1 Couldn't add @ngrx/store into the Angular 10 project First, I created an Angular project and tried adding @ngrx/store into it. And I got an error. Installing packages for tooling via npm. Installed packages for tooling via npm. The package that you are trying to add does not support schematics. You can try using a different version of the package or contact the package author to add ng-add support. According to the issue below, I should add "@latest". npx ng add @ngrx/store@latest Because if I didn't add it, the @ngrx/store version was too low.    cannot use ng add to install ngrx store · Issue #2604 · ngrx/platform · GitHub Though I didn't know I should add "@latest" into &q

Intro This time, I tried Effects(@ngrx/effects). [Angular] Try NgRx 1   Effects wasn't for side-effects. It was for interaction with external resources such as network requests. And it could fire actions like "store.dispatch" to Reducers.  NgRx - @ngrx/effects    I thought it worked like this. Install npx ng add @ngrx/effects Environments Angular: 10.0.2 @ngrx/store: 9.2.0 @ngrx/effects: 9.2.0 Add services In this sample, I added a service to check the game had been finished. And it didn't send and receive network request. check-game-finished.ts import { SquareValue } from './board/square/square-value'; import { GameResult } from './game-result'; type CheckTarget = { index: number, match: readonly CheckTarget[], unmatch: readonly CheckTarget[] }; const emptyTarget = { match: [], unmatch: [] }; const checkTargets: CheckTarget = { index: 0, match: [{ index: 1, match: [{ index:2,

Intro In this time, I tried NgRx. NgRx - @NGRX/STORE   It was for managing states like Redux.  [TypeScript] Try React + Redux Environments Angular: 9.1.11 NgRx: 9.2.0 Install npx ng add @ngrx/store Base project First, I created a sample project what changed states without NgRx. app.component.html <app-board></app-board> board.component.html <div class="board"> <app-square *ngFor="let s of state.squares; let i = index" [props]="s" (onClick)="updateSquare(i)"></app-square> </div> board.component.ts import { Component, OnInit } from '@angular/core'; import { BoardState } from './board-state'; @Component({ selector: 'app-board', templateUrl: './board.component.html', styleUrls: ['./board.component.css'] }) export class BoardComponent implements OnInit { public state: BoardState; constructor() { this.state = this.initialState();

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".