Reactチュートリアルめも（全体内容）

Dockerを使ってサーバーを立ち上げる ローカル環境を使って実施。

変数をタグを入れて表示する

・{}で変数を囲い、変数にhtmlを入れて表示

        const contentData = ({data2}) => ({data2})
        const ja = "*****Japan!";
        return (
          <h1>{ja}</h1>

ちなみに、最初、「Japan!」の部分が「apan!」で出力されていた。BootStrapのミスだった。

関数を表示

・functionを作りreturn下でhtmlを埋め込む。

    class App extends Component {
    ・・・中略
    render() {
    ・・・中略
        return (
            <div className="content">
              <Wil name="Name" />
            </div>
        );
    }
    }
    function Wil(props) {
      return <h1>Wil99999, {props.name} !!</h1>;
    }
  export default App;

※ファンクションはクラス外や外部に置いても反映される！だから邪魔にならないように下においてもOK！

関数の使い方

https://ja.reactjs.org/docs/components-and-props.html

header.js/footer.jsを確認

・それぞれのファイルをApps.jsへimportする→それぞれのコンポーネントをApps.jsから表示させる。 ・インポート import Header from './components/Header'; import Footer from './components/Footer'; ・組み込み

index.htmlへbootstrapを読み込む（CDNを使う。）

→Bootstrap参照

table作成

https://teratail.com/questions/307654?whotofollow= Bootstrapのメモファイルを参照！ ・map関数を用いた書き方 https://qiita.com/codeship_tech/items/a4c8ba5d26a09dc79e6a ⇨見本ファイルあり！チェック！

app.js側からの変数をTop.jsへ送る

  import React, { Component } from 'react';

  import Header from './components/Header';
  import Footer from './components/Footer';
  import Top from './components/Top';
  import Content from './components/Content';


  class App extends Component {
      constructor(props) {
          super(props);
      }
      componentDidMount() {
          (async () => {
              const test = "test"

              this.props.didMnt(test);
          })();
      }

      render() {
          console.log('App.render:', this.props);

          const data1 = "AAAAAAAAAAAAAAAAAAAAAAA";　⇦この部分の編集を出力させたい！
          const data2 = "data2";


          const topData = ({data1}) => ({data1})


          const contentData = ({data2}) => ({data2})
          const ja = "*****Japan!";
          return (
              <div className="content">
                  <Header />
                      sample site
                  <div className="row">
                      <div className="col-3">
                          <h1>{ja}</h1>
                      </div>
                      <div className="col-5">
                          <p>testtesttest tttttttest!</p>
                      </div>
                  </div>
                  <Top data1={data1} />     ⇦変数をTop.jsに送る
                  <br />
                  <br />
                  <br />
                  <div className="container">
                              <Content {...contentData(this.props)} />
                          </div>
                  <br />
                  <br />
                  <br />
              </div>
          );
      }
  }
  export default App;

'use strict';
import React from 'react';
import {appTop} from "./../App.js";

export default function Top(props) {
    console.log("**********");
    console.log("**********");
    console.log("**********");
    console.log("**********");
    console.log("**********");
    console.log("**********");
    console.log(props)

    return (
        <div>
            <h1>
                {props.data1}
            </h1>
        </div>
    )
}

出力