JSX

アロー関数は直後の式を返す 配列のアイテムに key が必要な理由 キーのルール 参考 アロー関数は直後の式を返す あまりちゃんと意識できていなかったんですが、アロー関数は直後の式を自動的に返す。{} で囲まれる場合は、ブロック形式の関数とみなされるので return を書く必要がある。 // {} がない場合は自動的に返されるので return は不要 const listItems = chemists.map((person) => <li>...</li>); //{} で囲む場合は関数となされるので return が必要 const listItems = chemists.map(…

React がマークアップとレンダリングロジックを混在する理由 JSXのルール コンバータの利用 参考 React がマークアップとレンダリングロジックを混在する理由 ウェブサイトは、コンテンツを HTML、デザインを CSS、ロジックを JavaScript で書くというのが一般的で、通常は下記のように別ファイルで管理していた： HTML JavaScript 上記は静的な情報を扱うだけであれば良かったが、近年ではロジックがコンテンツの中身を決めるようになったため（動的に情報が変わる）、JavaScript が HTML の領分も担当するようになった。そういった背景から、React ではロジ…

dangerouslySetInnerHTMLが必要なった場面 Reactコンポーネントでこんなコードを書きました。 const mediaContent = getMediaContent(); return( <div className="post_text"> { mediaContent } </div> ) getMediaContent()は画像等を表示するためのHTMLを生成するためのオリジナルの関数です。mediaContentにはHTMLの文字列が格納されます。 これで画像が表示されるかというと、さにあらず。文字列がブラウジングされずに表示されました。 なんでなのと思って、…

概要 属性の指定 インジェクション攻撃を防ぐ JSX はオブジェクト 参考 概要 JSX は JavaScript の構文拡張で、React 要素を生成する： const element = <h1>Hello, world!</h1>; JSX のメリットは、マークアップとロジック両方をそのまま含んだように記述でき、コードが直感的に理解しやすくなる。上の例だと、HTML の h1 タグとして、Hellow world! を子要素として設定していることがすぐにわかる。 JSX は、式を埋め込むこともできる: function formatName(user) { return user.fir…

Reactとは、JavaScriptのライブラリです。Webサイトのフロント（見た目）部分を作ることができ、近年、良く使われている人気のライブラリです。 JSX Reactは、JavaScriptで組みますがサイトに表示させる部分は、HTMLでコーディングします。 こちらのHTML部分をReactでは、JSXといいます。 例えば、以下のように入力します。 JSXは、return{}内に入力するHTMLのことです。 JSX こちらに入力した内容は、ブラウザに表示されます。 JSXの表示結果 JSXの注意点 JSXは、HTMLのように書きますが、HTMLとは違う部分があります。 ◎複数行ではエラー…

はじめに 前回のHTML/CSS/JavaScript 初級編に引き続き、TechTrainのReact.js 入門編のRailwayを終えたので、その受講記録を残します。 TechTrainとは エンジニアとしての「実力を一段上に」なってもらうためのエンジニアコミュニティです。techtrain.dev詳しくは上記のHPに飛んでいただくか、下記の紹介記事をお読みください。 bonomodel.hatenablog.com モチベーション フロントエンドシリーズの続きで、勢いで進めています。 目的はフロントエンド（バックエンド）開発の基礎的な経験と知識を獲得することです。 React.js 入…

handleClick関数内でe.preventDefault()書くとうまくいかないので、JSX内の方で書く。 こんな感じで書けば大丈夫。 const handleClick = (id: string) => { console.log(id) } ... <button onClick={(e: React.MouseEvent<HTMLButtonElement>) => { e.preventDefault() handleClick(id) }} />