MDN Reactチュートリアル復習#1

前置き

MDNのReactチュートリアルを読んで&&やってみて学んだことの復習です。本記事では基礎的なことからpropsまでのことを復習しています。
MDN React入門
環境構築は下記記事を参考にしました。
https://qiita.com/2754github/items/413bdaaa90834e219dc8

何か間違いがあれば指摘していただけると大変励みになります。

Reactプロジェクトの主なディレクトリ

src...主にいじるファイルが入っている
public...ブラウザによって読み込まれるファイルが含まれる。Reactはこの中のindex.htmlにコードを挿入する。

初期状態のブラウザ描画の流れ

App.js→index.js→index.html
App.js

1. App.js内でfunction又はclassを定義する※(前者と後者で状態管理などが変わってくるらしい…)
2. 1で定義したものの中で、retur()内にJSXを記述
3. 「export default 〇〇」で出力
   ※ここでは「function App」と定義した
   index.js
4. App.jsで定義したものをimport
5. render()メソッド内でindex.html内の対象のidを取得して描画

チュートリアル開始

props

props …propertiesの略、コンポーネント間でデータを渡すことができる。親から子にのみ渡すことができる。
index.js内のAppコンポーネントを呼び出しているところに下記の様な形で変数に値を代入する。

index.js

ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));

子コンポーネントであるApp.jsで下記のように記述するとデータを渡すことができる

App.js

function App(props) {
  console.log(props);
  return (
    // return statement
  );
}

終わりに

次からはtodoアプリをチュートリアルに沿って作っていこうと思います。