state のリフトアップ

公式サイトのURLは https://ja.reactjs.org/docs/lifting-state-up.html 複数のコンポーネントが同一の変化するデータを反映する必要がある場合は、最も近い共通の祖先コンポーネントへ共有されている state をリフトアップすること。えられた温度で水が沸…

#React

2021-02-26

リストと key

リストと key 。まずはリストの変換方法のおさらいからスタートです。 map 関数を使ったコード。 const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); // [2, 4, 6, 8, 10] 配列を要素のリストに…

#React

2021-02-23

イベント処理

イベント処理 Reactのイベント処理は DOM 要素のイベントの処理と似ているが、イベント処理文法的な違いがある。 camelCaseで名付ける JSX では関数を渡すデフォルト動作の抑止に preventDefault を使う HTML <button onclick="activeLases()"> Active Lasers </button> React <button onClick={activeLases}> Active Lasers </button> デフォ…

#React

2021-02-21

stateとライフサイクル

クラスに変換 5ステップで関数コンポーネントをクラスコンポーネントに変換する。 https://ja.reactjs.org/docs/state-and-lifecycle.html#converting-a-function-to-a-class function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTi</h2></div>…

#React

2021-02-20

要素のレンダー

要素のレンダー要素のレンダー要素とは React アプリケーションの最小単位の構成ブロックです。要素は画面に表示したいものの説明書き。 <h1>Hello, world</h1> React 要素はプレーンなオブジェクト、安価に作成できる。安価というのは、素早くハードの省資源で作…

#React

2021-02-14

React Getting Started

Reactの [Main Consepts] をなぞって学ぶ。 Getting Started から始める。試す既存のプロジェクトに徐々に追加可能どの程度利用するか選択可能オンラインエディタで試せる CodePen CodeSandbox Stackblitz 最初の例最初の例として、React のホームペー…

#React

2021-02-13

お問い合わせページの制作

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座をWebデザインの教科書として学ぶ。今日からは「お問い合わせページ」の制作に入る。お問い合わせページの制作お問い合わせページを「CONTACT」ページとして制作する。「menu.html」を複製し「co…

#Webデザイン

2021-02-12

タイル型レイアウト

HTML&CSS と Web デザイン入門でWebデザインを学ぶ。タイル型レイアウトとはタイル型レイアウトとは、画像や四角形の要素を並べたレイアウトのこと(P228)。整った印象になる。「MENU」ページではCSSグリッドを使ってレスポンシブ対応させる。ファイルを…

#Webデザイン

2021-02-11

カラムページのカスタマイズ

HTML&CSSとWebデザイン入門を今日教科書としてWebデザインを学習中。「NEWS」ページのレイアウトをカスタマイズする。 (P223) 3カラムに変更表示するカラムの順番を変更する 3カラムレイアウトに設定 news.html を開き <div class="news-contents wrapper"> 内に ad クラスのついた <div> タグと画</div></div>…

#Webデザイン

2021-02-09

レスポンシブ対応

1冊ですべて身につくHTML & CSSとWebデザイン入門講座で学ぶWebデザイン。レスポンシブWebデザインとは、表示領域の幅によって見え方がかわるようにデザインされたWebサイトのこと。 (P216) カラム数を1カラムにしたり、メニュー用のアイコンをタップするこ…

#Webデザイン

2021-02-08

サイドバーを作る

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座でWebデザインを学習中！ <aside> タグの中にサイドバーに掲載するコンテンツを書き加える。 (P213) <aside> <h3 class="sub-title">カテゴリー</h3> <ul class="sub-menu"> <li><a href="#">VVVVV</a></li> <li><a href="#">WWWWWWWW</a></li> <li><a href="#">XXXX</a></li> <li><a href="#">YYYYY</a></li> </ul> </aside></aside>

#Webデザイン