DockerコンテナでReact

f:id:fedora9:20210629215252p:plain

$ cd github
$ git clone https://github.com/dachi023/sandbox
$ cd sandbox/docker-create-react-app
$ time docker build -t dachi023/docker-create-react-app:test .
$ docker run -itd --name docker-create-react-app -p 8080:80 dachi023/docker-create-react-app:test

safariでlocalhost:8080を開く

DockerとJavaScriptの付き合いかた - コネヒト開発者ブログ

$ vi src/App.js

Lean React 
</a>の下に
<p>
Hello World!
</p>を追加して、

Docker Desktopを起動して、Containers / Appsのdocker-create-react-appを削除した後、
ビルドして実行
$ time docker build -t dachi023/docker-create-react-app:test .
$ docker run -itd --name docker-create-react-app -p 8080:80 dachi023/docker-create-react-app:test

safariでlocalhost:8080を開く

5分で始めるReact with Docker - Qiita

Headerコンポーネントの作成
$ vi src/Header.js
$ vi src/App.js

import Header from "./Header";

<div>
    <Header />
</div>

今から始めるReact入門〜 React の基本 - Qiita

タイトルを変更する
$ vi public/index.html

Reactをはじめる - ウェブ開発を学ぶ | MDN

React ToDリストの画面を作成
React ToDoリストをはじめる - ウェブ開発を学ぶ | MDN

f:id:fedora9:20210701222235p:plain

コンポーネント化

React アプリのコンポーネント化 - ウェブ開発を学ぶ | MDN

プロパティを渡す
{this.props.name}

React入門 - とほほのWWW入門

Reactチュートリアル1：犬画像ギャラリーを作ろう

f:id:fedora9:20210702214313p:plain

src/components/Tweet.js

import React from "react";

export default function Tweet(props) {
  return (
    <div>{props.content}</div>
  );
}

src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Tweet from "./components/Tweet";


class App extends Component {
  render() {
    return (
      <div>
        <Tweet content="Hello" />
        <Tweet content="React!" />
      </div>
    );
  }
}

export default App;

正真正銘のReactだけの不純物なしでReact入門

f:id:fedora9:20210702214929p:plain

正真正銘のReactだけの不純物なしでReact入門

画面遷移
react-router-dom
$ npm install react-router-dom
typescriptの時は、$ npm i --save-dev @types/react-router-dom しないとエラー
package.jsonに追加される　　"react-router-dom": "5.2.0"
src/index.jsにBrowserRouterを追加
src/App.jsを変更
src/page/one.jsとtwo.jsを追加

f:id:fedora9:20210704015542p:plain