コンポーネントとProps・もう一度環境構築

コンポーネントとProps

React では、データは必ず親コンポーネントから子コンポーネン トへ一方通行で渡されます。下の階層から上の階層にデータの変更を反映させることはできないの

親コンポーネントから子コンポーネントのデータの受け渡しに使われるのが Props

• クラスコンポーネントの場合は、 props という名前のメンバー変数
• 関数コンポーネントの場合は、その関数の引数

もう一度環境構築

「Props をコンポーネントに受け渡す」にさしかかり、写経してみようと思ったのでいったん環境構築に戻ります。

>> npx create-react-app chapter07 --typescript

Creating a new React app in /path/to/chapter07.

The --typescript option has been deprecated and will be removed in a future release.
In future, please use --template typescript.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...

yarn add v1.22.0
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error @typescript-eslint/eslint-plugin@2.19.2: The engine "node" is incompatible with this module. Expected version "^8.10.0 || ^10.13.0 || >=11.10.1". Got "11.1.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Aborting installation.
  yarnpkg add --exact react react-dom react-scripts cra-template-typescript --cwd /path/to/chapter07 has failed.

Deleting generated file... package.json
Deleting generated file... yarn.lock
Deleting chapter07/ from /Users/katorie/js_ex
Done.

Fetching packages... でエラーが起きました。 error @typescript-eslint/eslint-plugin@2.19.2: The engine "node" is incompatible with this module. Expected version "^8.10.0 || ^10.13.0 || >=11.10.1". Got "11.1.0" とあるので、 node のバージョンが問題になっている。。

現在のバージョンは v11.1.0 なので、nodenv でバージョンを切り替えて再度実行。

// とりあえずエラーの要件を満たすバージョンがすでに入っていたのでこちらを利用
>> nodenv local 12.1.0

// さっきwarning出てたのでオプションの書き方を修正
>> npx create-react-app chapter07 --template typescript

成功しました :tada:

まだ書き方とか考え方に慣れないので、サンプルコードを持ってきて動かしてみるより、 写経しながら進めようと思います。