Suche senden
Hochladen
Reactのおさらい
•
Als PPTX, PDF herunterladen
•
0 gefällt mir
•
146 views
iPride Co., Ltd.
Folgen
2022/12/16の勉強会で発表されたものです。
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 15
Jetzt herunterladen
Empfohlen
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
Unified JVM Logging
Unified JVM Logging
Yuji Kubota
AWS Amplify 入門
AWS Amplify 入門
Hideaki Aoyagi
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
1日5分でPostgreSQLに詳しくなるアプリの開発 ~PostgRESTを使ってみた~(第38回PostgreSQLアンカンファレンス@オンライン 発...
1日5分でPostgreSQLに詳しくなるアプリの開発 ~PostgRESTを使ってみた~(第38回PostgreSQLアンカンファレンス@オンライン 発...
NTT DATA Technology & Innovation
Jenkins使ってみた~Windows編~
Jenkins使ってみた~Windows編~
Yuta Matsumura
Empfohlen
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
Unified JVM Logging
Unified JVM Logging
Yuji Kubota
AWS Amplify 入門
AWS Amplify 入門
Hideaki Aoyagi
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
1日5分でPostgreSQLに詳しくなるアプリの開発 ~PostgRESTを使ってみた~(第38回PostgreSQLアンカンファレンス@オンライン 発...
1日5分でPostgreSQLに詳しくなるアプリの開発 ~PostgRESTを使ってみた~(第38回PostgreSQLアンカンファレンス@オンライン 発...
NTT DATA Technology & Innovation
Jenkins使ってみた~Windows編~
Jenkins使ってみた~Windows編~
Yuta Matsumura
SPAのルーティングの話
SPAのルーティングの話
ushiboy
入社1年目のプログラミング初心者がSpringを学ぶための手引き
入社1年目のプログラミング初心者がSpringを学ぶための手引き
土岐 孝平
Guide to GraalVM (JJUG CCC 2019 Fall)
Guide to GraalVM (JJUG CCC 2019 Fall)
Koichi Sakata
Understanding react hooks
Understanding react hooks
Maulik Shah
React Hooksでカスタムフックをつくろう
React Hooksでカスタムフックをつくろう
Yoichi Toyota
An Internal of LINQ to Objects
An Internal of LINQ to Objects
Yoshifumi Kawai
Docker Tokyo
Docker Tokyo
cyberblack28 Ichikawa
とにかく分かりづらいTwelve-Factor Appの解説を試みる
とにかく分かりづらいTwelve-Factor Appの解説を試みる
Masatoshi Tada
Spring Bootの本当の理解ポイント #jjug
Spring Bootの本当の理解ポイント #jjug
Masatoshi Tada
Mavenの真実とウソ
Mavenの真実とウソ
Yoshitaka Kawashima
SmartNews TechNight Vol5 : SmartNews AdServer 解体新書 / ポストモーテム
SmartNews TechNight Vol5 : SmartNews AdServer 解体新書 / ポストモーテム
SmartNews, Inc.
いまさら聞けないDockerコンテナ超入門
いまさら聞けないDockerコンテナ超入門
VirtualTech Japan Inc./Begi.net Inc.
CRDT in 15 minutes
CRDT in 15 minutes
Shingo Omura
Terraformで始めるInfrastructure as Code
Terraformで始めるInfrastructure as Code
Takahisa Iwamoto
.NET 7期待の新機能
.NET 7期待の新機能
TomomitsuKusaba
React and redux
React and redux
Mystic Coders, LLC
コンソールアプリケーションでDIを使う
コンソールアプリケーションでDIを使う
Core Concept Technologies
Flutterでscroll viewとexpandedを併用してsign in sign up画面 などの レイアウトを作成する
Flutterでscroll viewとexpandedを併用してsign in sign up画面 などの レイアウトを作成する
IgaHironobu
はじめよう Azure Functions
はじめよう Azure Functions
一希 大田
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
Reactのおさらい②.pptx
Reactのおさらい②.pptx
iPride Co., Ltd.
Angularreflex20141210
Angularreflex20141210
Shinichiro Takezaki
Weitere ähnliche Inhalte
Was ist angesagt?
SPAのルーティングの話
SPAのルーティングの話
ushiboy
入社1年目のプログラミング初心者がSpringを学ぶための手引き
入社1年目のプログラミング初心者がSpringを学ぶための手引き
土岐 孝平
Guide to GraalVM (JJUG CCC 2019 Fall)
Guide to GraalVM (JJUG CCC 2019 Fall)
Koichi Sakata
Understanding react hooks
Understanding react hooks
Maulik Shah
React Hooksでカスタムフックをつくろう
React Hooksでカスタムフックをつくろう
Yoichi Toyota
An Internal of LINQ to Objects
An Internal of LINQ to Objects
Yoshifumi Kawai
Docker Tokyo
Docker Tokyo
cyberblack28 Ichikawa
とにかく分かりづらいTwelve-Factor Appの解説を試みる
とにかく分かりづらいTwelve-Factor Appの解説を試みる
Masatoshi Tada
Spring Bootの本当の理解ポイント #jjug
Spring Bootの本当の理解ポイント #jjug
Masatoshi Tada
Mavenの真実とウソ
Mavenの真実とウソ
Yoshitaka Kawashima
SmartNews TechNight Vol5 : SmartNews AdServer 解体新書 / ポストモーテム
SmartNews TechNight Vol5 : SmartNews AdServer 解体新書 / ポストモーテム
SmartNews, Inc.
いまさら聞けないDockerコンテナ超入門
いまさら聞けないDockerコンテナ超入門
VirtualTech Japan Inc./Begi.net Inc.
CRDT in 15 minutes
CRDT in 15 minutes
Shingo Omura
Terraformで始めるInfrastructure as Code
Terraformで始めるInfrastructure as Code
Takahisa Iwamoto
.NET 7期待の新機能
.NET 7期待の新機能
TomomitsuKusaba
React and redux
React and redux
Mystic Coders, LLC
コンソールアプリケーションでDIを使う
コンソールアプリケーションでDIを使う
Core Concept Technologies
Flutterでscroll viewとexpandedを併用してsign in sign up画面 などの レイアウトを作成する
Flutterでscroll viewとexpandedを併用してsign in sign up画面 などの レイアウトを作成する
IgaHironobu
はじめよう Azure Functions
はじめよう Azure Functions
一希 大田
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
Was ist angesagt?
(20)
SPAのルーティングの話
SPAのルーティングの話
入社1年目のプログラミング初心者がSpringを学ぶための手引き
入社1年目のプログラミング初心者がSpringを学ぶための手引き
Guide to GraalVM (JJUG CCC 2019 Fall)
Guide to GraalVM (JJUG CCC 2019 Fall)
Understanding react hooks
Understanding react hooks
React Hooksでカスタムフックをつくろう
React Hooksでカスタムフックをつくろう
An Internal of LINQ to Objects
An Internal of LINQ to Objects
Docker Tokyo
Docker Tokyo
とにかく分かりづらいTwelve-Factor Appの解説を試みる
とにかく分かりづらいTwelve-Factor Appの解説を試みる
Spring Bootの本当の理解ポイント #jjug
Spring Bootの本当の理解ポイント #jjug
Mavenの真実とウソ
Mavenの真実とウソ
SmartNews TechNight Vol5 : SmartNews AdServer 解体新書 / ポストモーテム
SmartNews TechNight Vol5 : SmartNews AdServer 解体新書 / ポストモーテム
いまさら聞けないDockerコンテナ超入門
いまさら聞けないDockerコンテナ超入門
CRDT in 15 minutes
CRDT in 15 minutes
Terraformで始めるInfrastructure as Code
Terraformで始めるInfrastructure as Code
.NET 7期待の新機能
.NET 7期待の新機能
React and redux
React and redux
コンソールアプリケーションでDIを使う
コンソールアプリケーションでDIを使う
Flutterでscroll viewとexpandedを併用してsign in sign up画面 などの レイアウトを作成する
Flutterでscroll viewとexpandedを併用してsign in sign up画面 などの レイアウトを作成する
はじめよう Azure Functions
はじめよう Azure Functions
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Ähnlich wie Reactのおさらい
Reactのおさらい②.pptx
Reactのおさらい②.pptx
iPride Co., Ltd.
Angularreflex20141210
Angularreflex20141210
Shinichiro Takezaki
React + Reduxで作る対話AI
React + Reduxで作る対話AI
Kentaro Tada
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
OCHI Shuji
Om Next ~React.jsを超えて
Om Next ~React.jsを超えて
Kazuki Tsutsumi
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
david9142
WKWebViewとUIWebView
WKWebViewとUIWebView
Yuki Hirai
Mithril - 軽量/高速なMVCフレームワーク
Mithril - 軽量/高速なMVCフレームワーク
sairoutine
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Masahiko Tachizono
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
WESEEKWESEEK
Lt7 SPA
Lt7 SPA
GIG inc.
JavaFX + NetBeans環境におけるJenkinsの活用(Jenkins第六回勉強会)
JavaFX + NetBeans環境におけるJenkinsの活用(Jenkins第六回勉強会)
Ryusaburo Tanaka
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
Yuta Matsumura
BPStudy20121221
BPStudy20121221
Shinichiro Takezaki
Synquery ja
Synquery ja
EastCloud
Mvc conf session_1_osada
Mvc conf session_1_osada
Hiroshi Okunushi
Movable typeseminar 20120925
Movable typeseminar 20120925
Six Apart
MEANスタック提案プレゼンテーション
MEANスタック提案プレゼンテーション
Takumi Yokoyama
【日本語版】Styler: Our Journey to GCP
【日本語版】Styler: Our Journey to GCP
MichaelFindlater
Ähnlich wie Reactのおさらい
(20)
Reactのおさらい②.pptx
Reactのおさらい②.pptx
Angularreflex20141210
Angularreflex20141210
React + Reduxで作る対話AI
React + Reduxで作る対話AI
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
Om Next ~React.jsを超えて
Om Next ~React.jsを超えて
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
WKWebViewとUIWebView
WKWebViewとUIWebView
Mithril - 軽量/高速なMVCフレームワーク
Mithril - 軽量/高速なMVCフレームワーク
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Rendr入門: サーバサイドで(も)動かす、Backbone.js
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
Lt7 SPA
Lt7 SPA
JavaFX + NetBeans環境におけるJenkinsの活用(Jenkins第六回勉強会)
JavaFX + NetBeans環境におけるJenkinsの活用(Jenkins第六回勉強会)
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
BPStudy20121221
BPStudy20121221
Synquery ja
Synquery ja
Mvc conf session_1_osada
Mvc conf session_1_osada
Movable typeseminar 20120925
Movable typeseminar 20120925
MEANスタック提案プレゼンテーション
MEANスタック提案プレゼンテーション
【日本語版】Styler: Our Journey to GCP
【日本語版】Styler: Our Journey to GCP
Mehr von iPride Co., Ltd.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
iPride Co., Ltd.
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作り
iPride Co., Ltd.
AWS (Amazon Web Services) を勉強してみる その3 2024/03/01の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる その3 2024/03/01の勉強会で発表されたものです。
iPride Co., Ltd.
AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
iPride Co., Ltd.
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
iPride Co., Ltd.
AWSで全てのパブリックIPv4アドレスが有料になった件について 2024/02/09の勉強会で発表されたものです。
AWSで全てのパブリックIPv4アドレスが有料になった件について 2024/02/09の勉強会で発表されたものです。
iPride Co., Ltd.
AWS CDKを使おうとしたら普通に悪戦苦闘した話 2024/02/02の勉強会で発表されたものです。
AWS CDKを使おうとしたら普通に悪戦苦闘した話 2024/02/02の勉強会で発表されたものです。
iPride Co., Ltd.
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
iPride Co., Ltd.
AWS SAM入門 2024/01/26の勉強会で発表されたものです【アイ・プライド】
AWS SAM入門 2024/01/26の勉強会で発表されたものです【アイ・プライド】
iPride Co., Ltd.
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
iPride Co., Ltd.
ChatGPTを用いてCDKを勉強
ChatGPTを用いてCDKを勉強
iPride Co., Ltd.
OpenID Connectについて
OpenID Connectについて
iPride Co., Ltd.
画像生成AIの問題点
画像生成AIの問題点
iPride Co., Ltd.
AI入門
AI入門
iPride Co., Ltd.
Mehr von iPride Co., Ltd.
(20)
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS (Amazon Web Services) を勉強してみる その3 2024/03/01の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる その3 2024/03/01の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
AWSで全てのパブリックIPv4アドレスが有料になった件について 2024/02/09の勉強会で発表されたものです。
AWSで全てのパブリックIPv4アドレスが有料になった件について 2024/02/09の勉強会で発表されたものです。
AWS CDKを使おうとしたら普通に悪戦苦闘した話 2024/02/02の勉強会で発表されたものです。
AWS CDKを使おうとしたら普通に悪戦苦闘した話 2024/02/02の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
AWS SAM入門 2024/01/26の勉強会で発表されたものです【アイ・プライド】
AWS SAM入門 2024/01/26の勉強会で発表されたものです【アイ・プライド】
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
ChatGPTを用いてCDKを勉強
ChatGPTを用いてCDKを勉強
OpenID Connectについて
OpenID Connectについて
画像生成AIの問題点
画像生成AIの問題点
AI入門
AI入門
Kürzlich hochgeladen
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
Kürzlich hochgeladen
(7)
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
Reactのおさらい
1.
Reactのおさらい 執筆者:トビウオ
2.
目次 • Reactとは • Reactの設計思想 •
Reactでの書き方 • 「状態」をどう定義するか • なぜuseStateなのか?
3.
Reactとは? • 三大Webフロントエンドフレームワークの一角 npm trendsより取得。vueが跳ねてるのはvue
3が出てきたから
4.
Reactの設計思想 • 各要素をコンポーネント に分割し、その粒度を積 み上げることでWebペー ジを構成する • 再利用性が高く、応用力 が高いUI構築が可能 入力部分 出力部分 画面全体
5.
Reactの設計思想 • 「画面中、描画を変えないといけない場所だけ 再描画」するため、「仮想DOM」という仕組み が組み込まれている • これにより、動的なWebページもスムーズに動 かすことができる
6.
Reactでの書き方 • コンポーネントは、JSX (HTML風の記法で書かれたオブジェクト) を返すものとして定義されている export
default class OutputTag extends React.Component <{list: string[]}> { public render() { return ( <h1>TODO一覧:</h1> <ul>{this.props.list.map((w,i) =>(<li key={i}>{w}</li>))}</ul> ); } }
7.
Reactでの書き方 • 先ほどのはクラスを用いた古い書き方で、関数として表現する新し い書き方だと次のようになる export const
OutputTag = ({list}:{list: string[]}) => { return <> <h1>TODO一覧:</h1> <ul>{list.map((w,i) =>(<li key={i}>{w}</li>))}</ul> </>; }
8.
Reactでの書き方 export const OutputTag
= ({list}:{list: string[]}) => { return <> <h1>TODO一覧:</h1> <ul>{list.map((w,i) =>(<li key={i}>{w}</li>))}</ul> </>; } 属性の定義 タグ名の定義 どのようなHTMLを返すか?
9.
Reactでの書き方 export const OutputTag
= ({list}:{list: string[]}) => { return <> <h1>TODO一覧:</h1> <ul>{list.map((w,i) =>(<li key={i}>{w}</li>))}</ul> </>; } <OutputTag list={dataList}/> 使用方法 描画したもの
10.
Reactでの書き方 • Reactには「ReactDOM.render」というメソッドがあり、これを指 定したHTMLタグに対して「適用」することで、画面を描画する ReactDOM.createRoot( document.getElementById('root') as
HTMLElement ).render( <React.StrictMode> <App /> </React.StrictMode> );
11.
Reactでの書き方 • 下をざっくり翻訳すると「id=“root”であるHTMLタグに対し、<App />タグ(これもReactコンポーネント)の情報を描画する」 ReactDOM.createRoot( document.getElementById('root') as
HTMLElement ).render( <React.StrictMode> <App /> </React.StrictMode> );
12.
「状態」をどう定義するか • コンポーネントを関数として記述する、新しい書き方においては、 React Hooksと呼ばれる関数を別途使用する export
const CountButton = ()=> { const [count, setCount] = useState(0); const add = () => setCount(count + 1); return <button onClick={add}> Count: {count} </button>; }
13.
「状態」をどう定義するか • React Hooksの一つに「useState」がある。この関数は、「変数」 と「変数を変更するための関数」を返す export
const CountButton = ()=> { const [count, setCount] = useState(0); const add = () => setCount(count + 1); return <button onClick={add}> Count: {count} </button>; }
14.
「状態」をどう定義するか • 「変数」はそのまま使う(読み込み専用)。「変数を変更するための 関数」の引数に値をセットすると、「変数」が書き換わる export const
CountButton = ()=> { const [count, setCount] = useState(0); const add = () => setCount(count + 1); return <button onClick={add}> Count: {count} </button>; }
15.
なぜuseStateなのか? • 普通の変数(「let count
= 0;」など)だと、値を変更しても、画面が再 描画されない • useStateを使うことで、「値が変更されたら画面が追従してくれる 変数」を提供できる。その変数を、データ読み込みやユーザーの入 力などで変化させ、画面を再描画させるのがセオリー
Jetzt herunterladen