日本一わかりやすいReact入門#4...コンポーネント間でデータの受け渡しと再利用をしよう

[@1492tiger]

【目次】 01:15 コンポーネントとは（復習） 02:40 なぜコンポーネントを使うのか？ 05:50 Class ComponentとFunctional Component 11:30 コンポーネントを作ろう（ハンズオン） 19:55 propsを使ったデータの受け渡し 26:00 コンポーネントの再利用

[@岩澤理人]

トラハックのエンジニア学習ゼミ【とらゼミ】 わかりやすい解説ありがとうございます！ 動画を見ていて一つ気になったので質問させてください。 27分からのコンポーネントの使い回しの解説でtitleの文字列に対して{}を使われていますが文字列は{}がなくても表示できるのに今回{}を使われた理由はありますか？ 教えていただけると嬉しいです！

[@yuriko2714]

初学者のために、ここまでかみ砕いて説明してもらえるなんて　ありがてぇ

[@keita5518]

以前見たときは自分の知識が未熟でちんぷんかんぷんでしたが、 今回なんとか理解することができました。 改めてみると本当にわかりやすい説明で感謝しています。 繰り返しみてマスターしたいと思います。

[@入海エンジニアリング研究所]

エンジニア歴２２のおっさんですが、とても参考になりました。 ありがとうございます。

[@坪井佑太]

この動画のおかげでようやくReactの使い方と特徴が何となくわかった気がしてきました！ DOMの操作(HTML/CSS+javascript)よりも分割統治のおかげで変更に強いというのが実感できた気がします！ 無料でこんな分かりやすい動画を出してくださってありがとうございます。

[@falconno6554]

ああ、要はコンポーネントはテンプレートとして「Articleだったらこういう表示をしろ」というのを作ってそれを入れ子状態で呼び出していくスタイルってことですね アトミックデザイン…おもしろそうですね

[@あきぽん-y9q]

06:48 PUBGのエナジードリンクを拾った時の音がするので、なんだか嬉しい気分になります（関係ないのコメントすみません！）

[@1492tiger]

あきぽん めちゃマニアックww

[@yuyaceo6260]

ものすごく参考になります

[@1492tiger]

ものすごく有り難うございます！

[@shogohirasawa3543]

どの教材よりもわかりやすく勉強になりました！ ありがとうございましたm(_ _)m

[@maki2422]

もう一つ質問させてください。 私のVSコードにはtsエラーがでました。とらゼミさんはエラーが出ていないようでしたので、 typescriptの環境を入れて、 "javascript.validate.enable": falseをjson settingに入れてみました。 具体的なエラーはimport...=は、typescriptファイルでのみ使用できます。ts(8002)[1, 1]とか'='が必要です。ts(1005)[1、14] （その他数個）などといったものです。 こちらは無視しても良いものでしょうか？

[@joellejoster3298]

今晩は！ やっとReact入門入れて粗方流れは掴めました、がそもそも props が何なのか、について解説が無かったのでどういう役割を果たしているのかがよく分かりません。 教えてくれると幸いです。

[@1492tiger]

親から子のコンポーネントに渡す値のことです！ React公式の説明がわかりやすいのでぜひご一読ください！

[@joellejoster3298]

@@1492tiger 成る程！やっと理解できました！有り難う御座います！

[@user-uu6ft3nm2w]

コンポーネント間の関係はArticle→Blog→indexという認識でよろしいでしょうか？

[@maki2422]

いつも動画ありがとうございます。 動画を見ながら作業をしていたのですが、サイトを開くとフォルダやファイル名がリスト形式で並んでいる状態になりました。 最初Typescriptでしか使えないなどエラーがでましたが、それはjson settingへの記述で解消しましたのでそれが理由ではなさそうです。 動画を何度も止めながら作業をしたのですが、動画と同じ用にタイトルが表示されないのはなぜでしょうか。 よろしくお願いいたします🙏

[@maki2422]

こちら解決しました！

[@Tomoki-j1z]

わかりやすかったです。 intelliJ IDEAは有償のものを使われてますでしょうか？

[@1492tiger]

はい、有償です！

[@たく-f5b7o]

最近見させていただいてます！ ちなみに概要欄の中で目次を書きますと、動画の時間バーにも目次が反映されます。

[@lebronirving]

React入門として見させていただいています。 よければVSCodeのプラグインとか教えていただけませんか？

[@1492tiger]

ありがとうございます！ すみませんが私が使っているエディタはVSCodeではありませんのでお力になれません... ちなみにJetBrains社のIntelliJ IDEAというエディタです。

[@lebronirving]

すみません。勘違いしておりました。 IntelliJは自分も利用しているのですが、Javaでしか使ったことがありませんでした。 ちなみに利用されているのはUltimate版でしょうか？ Community版でも特に問題なさそうなら一度Intellijで開発してみようと思います。

[@content-throne]

質問です！super(props)ですがsuperに打ち消し線が入ってしまいます、問題なく動くんですがこれは何かしらのエラーですか？見た感じそんな表示は出ていません、調べても特に解決策が見当たりませんでした、VSCODEを使っています、お時間ありましたらご返信の方お願いしたいです🤲

[@maikokuroki9923]

私もまだまだ勉強中なので間違っているかもですが、コンストラクター内で何もステイトを記述していないのでコンストラクターを書いている意味がないからでは？と思いました。

[@jurihosoda974]

すごいわかり易いです〜 この方のセミナーならお金出してもいいです。 私会社の役員なんですが、うちのエンジニア育成で講座開いてくれませんか？

[@1492tiger]

ありがとうございます。嬉しいお言葉です。 講座について、メールにてご連絡いただけましたら詳細なお話が可能です☺️ [e-mail]

[@ああ-v2d2q]

面白い

[@みうらっちょ-n1e]

基本サーバーもフロントもアプリも何でもやる15年目エンジニアですが、nodeつかったフロント開発だとVue使いです。 突然React案件が降ってきて（手伝ってと）時間もないので手っ取り早く勉強する方法探したらこの動画にたどり着きました。 本も何冊か調べたんですがちょっと情報古めで、関数型にシフトしてるとかHooks?とか手法が変わってきてるくさいのでこの動画がかなり役に立ちそうです。 ありがとうございます。1.5倍速再生でとりあえず全部みようと思います。 VSCodeでもJSXでemmet使って素早くタグ入力できるっぽいですが全部手打ちしてる理由って初心者向けだからですか？

[@1492tiger]

ご覧いただきありがとうございます。 こちらのシリーズは内容が古くなっており、現在はクラスコンポーネントはほぼ使われていませんので、Hooksを中心に解説している新シリーズをよろしければご覧ください。 kzbin.info/aero/PLX8Rsrpnn3IWPoM7-1YPDksRRkamRY25k

[@1492tiger]

単純に私がemmet使ってないだけですね笑

[@user-uu6ft3nm2w]

内容はかなり分かりやすいのですがコードが小さくて見にくいです。。

[@chatiny6271]

31:06 受け渡せるデータ型

[@maikokuroki9923]

create-react-appでそのままコードを書かずにnpm run buildをするメリットはなんですか？ また私は一度Reactアプリを作ったことがありますが（学習用）その時は全てJSファイルで制作しましたが、JSXファイルを使うメリットはなんですか？

[@shogohirasawa3543]

コードをGit hubで公開していただけたら嬉しいです・・・。

[@エウロパの海]

とても参考になるので、分かるまで何度も確認させてもらっていますが、一つ分からない点があります。 Blogコンポーネントで定義した authorName は authorプロパティとなって、Article.jsxでは{props.author}で表示されるべきでは？ と思っていたのですが、これだとエラーになってしまいます。 なぜ{props.authorName}としなければならないのでしょうか。何か順序の違いでしょうか。 どなたか御手隙な時に教えていただけたらありがたいですm(__)m