[TypeScript] Try React 1

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

  But I got white page with IE11.

Next, I tried building and serving.

npm install --save serve
npm run build
npx serve -s build

I could view with IE11. But the logo was stopped (It was rotated when I opened the page with Chrome or Firefox).

Rotate the logo

The logo was rotated by CSS.

App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

App.css

...
.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}
...
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

The reason why the logo was stopped was "@media (prefers-reduced-motion: no-preference)". So if I removed this line, the logo started being rotated.

App.css

...
.App-logo {
  height: 40vmin;
  pointer-events: none;
}

.App-logo {
    animation: App-logo-spin infinite 20s linear;
}

...
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

prefers-reduced-motion - CSS: Cascading Style Sheets | MDN The result was here.

align-items

The view what was opened with IE11 had still had a problem. "align-items" was ignored. It was because its parent element used "min-height".

App.css

...
.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}
...

html - flex container min-height ignored in IE - Stack Overflow For making the view of this sample as same as the views what were opened by Chrome or Firefox, I could change from "min-height" to "height".

App.css

...
.App-header {
  background-color: #282c34;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}
...

Polyfill

For using Promise, window.fetch, and etc., I could use polyfill. create-react-app/packages/react-app-polyfill at master · facebook/create-react-app · GitHub But in this sample, I didn't have to use it. And because I wanted to use IE11, I might not have to import raf/polyfill. JavaScript Environment Requirements – React

Add components

I followed the tutorial, I added two components. Tutorial: Intro to React – React Because "create-react-app" didn't have adding components functions, I added tsx files and css files manually.

...
src
    L tic-tac-toe
        L Board.css
        L Board.tsx
        L Square.css
        L Square.tsx
    L App.css
    ...
...

Board.tsx

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React from "react";
import { Square } from "./Square";
import './Board.css';

export class Board extends React.Component {
    private renderSquare(i: number): JSX.Element {
        return (<Square value={i}
            onClick={() => alert(`Click ${i}`)}>
            </Square>);
    }
    public render(): JSX.Element {
        return (
            <div className="board-row">
                {Array.from(Array(9).keys())
                    .map(i => this.renderSquare(i))}
            </div>
        );
    }
}

Board.css

.board-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: auto;
    width: 21vw;
}

Square.tsx

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React from "react";
import './Square.css';

export type SquareProps = {
    value: number,
    onClick: () => void,
};
export class Square extends React.Component<SquareProps> {
    render() {
        return (<button className="square"
            onClick={() => this.props.onClick()}>
            {this.props.value}
        </button>);
    };
}

Square.css

.square{
    height: 7vw;
    width: 7vw;
}

For using props and states (I didn't set this time), I had to add types into React.Component.