PPP's Blog

雑コード帳

トップ > その他 > Microsoftのfrontend-bootcampを始めた

Microsoftのfrontend-bootcampを始めた

その他

※ここには有益な情報はありません。雑記です。

Microsoft frontend-bootcamp

github.com

進捗

  • Step1-01～03までは飛ばしたのでStep1-04から始めた。

  • Propsまで写経した。

つまづいたところ

書いたコードが反映されない（解決した）

Step1-04フォルダにsrcとindex.tsxファイルを作成して、以下のコードを打ち込むも全く画面に反映されず。

import React from 'react';
import ReactDOM from 'react-dom';

const App = (props) => {
  return <h1>{props.text}</h1>;
};
ReactDOM.render(
  <div>
    <App text="Hello" />
    <App text="How are you doing?" />
  </div>,
  document.getElementById('app')
);

なにが原因か見つけることができず、諦めていったんホットリロードをストップさせ、 再度npm startでページを表示させたら読み込みが上手く行った。よくわからない。雰囲気で写経している。

propsの値を呼び出すのに、classだと上手くいかない（未解決）

先述のコードは、propsの値を呼ぶ出すのに関数を使っている。 step1-04内では、propsの呼び方は関数とclassとで異なると記述がある。

  • 関数：props.text
  • class：this.props.text

それに倣って、classでpropsの値を呼び出そうにも呼び出せずエラー発生。

ReactDOM.render(<App />, document.getElementById('app'));
class App extends React.Component {
  render() {
    return <h1>{this.props.text ? this.props.text : 'woops!!!!!'}</h1>;
  }
}

ReactDOM.render(
  <div>
    <App text="Hello" />
    <App text="How are you doing?" />
  </div>,
  document.getElementById('app')
);

エラー内容

Property 'text' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'.

なぜ関数だとうまくいくのかわからず... とりあえず飛ばす。

次

明日はStep1-04を全部終わらせるぞ