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