yukikim

<canvas id="myChart" width="400" height="400"></canvas>

yukikim

<canvas id="myChart" width="400" height="400"></canvas>

yukikim

利用可能サービスの確認

$ firewall-cmd --list-all

ポート開放

開放しているポートの確認

• $ firewall-cmd --list-ports --zone=public

ポート開放

yukikim

====Nginx インストール===================================

$ sudo yum install http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm

repoファイル作成

$ sudo vi /etc/yum.repos.d/nginx.repo

以下を記述する

yukikim

//React.ReactNodeの指定

// Containerのpropsの型を定義します
type ContainerProps = {
  title: string
  children: React.ReactNode
}

// Reactコンポーネントの型付けに関しては、以下もご参照ください
// https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/

yukikim

import { useReducer } from 'react'

// reducerが受け取るactionの型を定義します
type Action = 'DECREMENT' | 'INCREMENT' | 'DOUBLE' | 'RESET'

// 現在の状態とactionにもとづいて次の状態を返します
const reducer = (currentCount: number, action: Action) => {
  switch (action) {
    case 'INCREMENT':
      return currentCount + 1

yukikim

import React, { useState } from 'react';

// それぞれのコンポーネント
const ComponentA: React.FC = () => <div>Component A</div>;
const ComponentB: React.FC = () => <div>Component B</div>;
const ComponentC: React.FC = () => <div>Component C</div>;

const MyComponent: React.FC = () => {
  // ステートを定義
  const [currentComponent, setCurrentComponent] = useState<string>('A');

yukikim

import React, { useReducer } from 'react';

// それぞれのコンポーネント
const ComponentA: React.FC = () => <div>Component A</div>;
const ComponentB: React.FC = () => <div>Component B</div>;
const ComponentC: React.FC = () => <div>Component C</div>;

// reducer のアクション型
type Action = { type: 'showA' } | { type: 'showB' } | { type: 'showC' };

yukikim

import React from 'react';

interface Item {
  id: number;
  name: string;
}

const MyComponent: React.FC = () => {
  // 配列データを定義
  const items: Item[] = [

yukikim

//### 親コンポーネント

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent: React.FC = () => {
    const [data, setData] = useState<string>('');

    const handleDataFromChild = (childData: string) => {