進めてる(進めていく)教材とか

• HypertextCandy React入門チュートリアル 完了
• りあクト！ TypeScriptで始めるつらくないReact開発 1/14 完了
• Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 未完了
• Udemy React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう！ 未完了
• React 公式チュートリアル 未完了

今日やったこと

• Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 開発環境構築編
• Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 Reactアプリケーション基礎編
• Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 Reduxアプリケーション基礎編 途中

Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 開発環境構築編

Node.jsとかyarnはすでにインストール済みなのでポンポン飛ばしていきます。
そしてcreate-react-app を使ってプロジェクトを作成していくところで早速詰ました。

Cannot create a project named "Udemy-React-Redux" because of npm naming restrictions:
  * name can no longer contain capital letters

プロジェクト名は小文字じゃないと行けないみたいです。
小文字にプロジェクト名を修正してプロジェクトが作成できまいした。

README.mdを開くとなんかでてきました。

The ESLint extension will use 'udemy-react-redux-app/node_modules/eslint' for validation,
which is installed locally in 'Udemy-React-Redux'.
If you trust this version of ESLint, press 'Allow', otherwise press 'Do Not Allow'.
Press 'Cancel' to disable ESLint for this session.

翻訳してみるとESLintがなんちゃらっていってますがが今は使わない方向で。

ESLint拡張機能は、検証に「udemy-react-redux-app / node_modules / eslint」を使用します。
これは、「Udemy-React-Redux」にローカルにインストールされます。このバージョンのESLintを信頼する場合は、「許可」を押してください。
そうでない場合は、「許可しない」を押してください。このセッションのESLintを無効にするには、[キャンセル]を押します。

yarn startします。
Hello, React出来ました。

Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 Reactアプリケーション基礎編

ざっくりサマリー

• JSX (JavaScriptXML)
• 講座ではクラスコンポーネントだけど,最新版のcreate-react-appだと関数コンポーネントで作成される
• どっちで書いていくのがいいんだろう？
• 関数コンポーネントに読み替えてやるとちからつくかなー

• JSX → babel → JavaScript

  • babelがどうJavaScriptのコードに変換してるかを見るにはこちら

• webpack

  • バンドラー
  • jsファイルをまとめてくれる
• propsという引数名で複数の属性をうけれるんだ

• defaultProps

  • propsがない場合にデフォルトで属性を入れてくれる

• prop-types

  • Propsに対し型チェックしてくれる
  • required(必須チェックもできる)

• State

  • 状態(State)くらいからクラスコンポーネントと関数コンポーネントで変わってくる
  • クラスコンポーネントでのやり方も覚えておいたほうが良さそう
  • setStateを何故使う?
  • レンダー関数を呼んでくれる 再実行してくれる
  • 再描写する要素を考えなくてもよくなる

Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 Reduxアプリケーション基礎編

ざっくりサマリー

• Redux

  • Flaxアーキテクチャ?
  • コンポーネント階層が大きくなった時に状態を簡単に共有する手段を提供してくれる
• インストールyarn add redux react-redux

• Action

  • オブジェクトでtypeというキーを持っている。値は一意(ユニーク)である必要がある
  • アクションクリエーター
  • 再度使うやつはexportする

まとめ

コンポーネントは関数コンポーネントで書くのが今後の主流なんですかね？
ただ,クラスコンポーネントの書き方も頭には入れておきたいところですね。
Reduxは概念が腹に落ちるまで時間かかりそうです…
地道に進めていきます。

それではまた明日。