スキップしてメイン コンテンツに移動

[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.
ラベル:

コメント

コメントを投稿

このブログの人気の投稿

[Angular][ASP.NET Core] Upload chunked files

Intro I wanted to send files to Web application (made by ASP.NET Core). If the file size had been small, I didn't need do any special things. But when I tried to send a large file, the error was occurred by ASP.NET Core's limitation. Though I could change the settings, but I didn't want to do that, because I hadn't known the file sizes what would been actually using. So I splitted the data into chunks first, and sent them. After receiving all chunks, I merged them into one file. There might be some libraries or APIs (ex. Stream API) what did them automatically, but I couldn't find them. What I did [ASP.NET Core] Make CORS enabled [Angular] Split a large file into chunks [Angular][ASP.NET Core] Send and receive data as form data [ASP.NET Core] Merge chunks into one file [ASP.NET Core] Make CORS enabled Because the client side application(Angular) and the server side application(ASP.NET Core) had been separated, I had to make CORS(Cross-Origin Requests) ...
コメントを投稿
続きを読む

[Nest.js] Show static files

Intro I wanted to use Nest.js and WebRTC(node-webrtc). NestJS - A progressive Node.js framework Documentation | NestJS - A progressive Node.js framework And because I wanted to try with simple page(not use JavaScript frameworks), I added static HTML, CSS, JavaScript into a Nest.js project. Prepare Install First, I installed @nestjs/cli. First steps | NestJS - A progressive Node.js framework As same as last time , I couldn't do global install because I had used Volta. But I could installed by volta. volta install @nestjs/cli Create project nest new nest-web-rtc-sample volta pin node@12 Run npm start After doing "npm start", I could getting "Hello World!" from http://localhost:3000. Add static files I could add static files by two ways. @nestjs/serve-static First one of them was using "serve-static". Serve Static | NestJS - A progressive Node.js framework npm install --save @nestjs/serve-static And I needed adding a module into app.modu...
コメントを投稿
続きを読む

[Angular] Sending file with Observable and showing loading screen

Intro When I tried sending file data on last time, I had confused with "promise.then", "async/await" and "Observable". [Angular][ASP.NET Core] Upload chunked files So I wanted to distinct them, and this time, I tried to use "Observable" because HttpClient return Observable<any>. Call observables in order I sended file in these steps. Read file by FileReader Create directory for saving chunks send and saving chunks merge chunks to one file and delete chunks Each steps used the former steps result. So I could write by Promise.then like below. this.executeStep1() // return Promise<UploadResult> .then(result => this.executeStep2(result)) // return Promise<UploadResult> .then(result => this.executeStep3(result)) // return Promise<UploadResult> .catch(reason => console.log(reason)); Result I could write with pipe & flatMap. file-uploader.service.ts public upload(file: File): Observable<U...
コメントを投稿
続きを読む