Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
初めてのReact
Search
Kono Junya
August 04, 2017
Technology
1
390
初めてのReact
React.jsを初めて勉強する人向けのスライドです!
Kono Junya
August 04, 2017
Tweet
Share
More Decks by Kono Junya
See All by Kono Junya
FUJIMIのFastly活用事例集
konojunya
0
1.5k
Progressive Release by using Fastly
konojunya
1
450
WinTicketにおけるPWA at PWA Night vol.9
konojunya
4
1.7k
新卒研修を終えて
konojunya
0
550
大規模なWebの開発手法
konojunya
1
2.5k
Other Decks in Technology
See All in Technology
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
9
1.4k
EDRからERM: PFN-SIRTが関わるセキュリティとリスクへの取り組み
pfn
PRO
0
140
AIをプロダクトに実装するならAPIで分離しよう 〜タクシーアプリ『GO』のアーキテクチャ実例紹介〜
74th
2
140
Ask! NIKKEI RAG検索技術の深層
hotchpotch
12
2.4k
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
420
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
110
Kubernetesでメールの大量配信をしている話/k8sjp-20250205
hfukamachi
0
320
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
120k
Classmethod AI Talks(CATs) #14 司会進行スライド(2025.01.31) / classmethod-ai-talks-aka-cats_moderator-slides_vol14_2025-01-31
shinyaa31
0
110
例外処理を理解して、設計段階からエラーを「見つけやすく」「起こりにくく」する
kajitack
14
4.5k
アンチパターンのアーキテクチャと組織 / Anti-Pattern Software Architecture and Organization
oztick139
0
160
AIエージェントについてまとめてみた
pharma_x_tech
20
13k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
GitHub's CSS Performance
jonrohan
1030
460k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
290
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
For a Future-Friendly Web
brad_frost
176
9.5k
Optimizing for Happiness
mojombo
376
70k
Documentation Writing (for coders)
carmenintech
67
4.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
620
Visualization
eitanlees
146
15k
How to Ace a Technical Interview
jacobian
276
23k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
ॳΊͯͷReact 㽈
·ͣclone ͦͯ͠npm install https://github.com/konojunya/react-starter-kit
Reactͱ
Reactͱ React.jsUIͷύʔπʢߏ෦ʣΛ࡞ΔͨΊͷϥΠϒϥϦͰ͢ɻ Facebook͕OSSͱͯ͠ެ։͍ͯ͠·͢ɻ
ReactΛಋೖ͢ΔϝϦοτ • ԾDOMʹΑͬͯύϑΥʔϚϯε্͕͢Δʂ • ίϯϙʔωϯτࢥߟʂ • ࠶ར༻ੑ͕͋Δ • গ͠લ૽͍ͰͨAtomic Designͱ૬ੑ͕ྑ͔ͬͨΓ
ReactΛಋೖ͢ΔσϝϦοτ • Reactͷ։ൃڥΛ࡞ΔͷΊΜͲ͍͘͞ • ES6(ES2015)Λ֮͑Δඞཁ͕͋Δ ֶशίετ͕ߴ͍ʂ
ReactΛ࠾༻͍ͯ͠ΔαʔϏεɾاۀ
ಋೖ͢Δ࠷ॳͷҰา
ಋೖ͢Δ࠷ॳͷҰา ࠓճwebpackͱ͍͏ٕज़Λ͍·͢ɻ webpackͱͯڧྗͰ͕͢ɺຯʹઃఆΊΜͲ͍͘͞ͷͰ ࡞͓͖ͬͯ·ͨ͠ɻ
ॳΊͯͷJSX JSXXMLͳͷͰݸҙ͢Δ͖͕͋Γ·͢ɻ • classclassNameʹͳΓ·͢ɻ • ด͡λά͕ඞཁͰ͢ɻ <img src=“hoge.jpg”> <img src=“hoge.jpg”
/> ❌ ⭕ <div class=“hoge”>Hoge</div> <div className=“hoge”>Hoge</div> ❌ ⭕
JSXͰʮHello Worldʯ͠Α͏ʂ
src/components/Hello.jsx import React from “react”; const Hello = () =>
( <h1>Hello World</h1> ) export default Hello;
src/app.js import React from “react”; import { render } from
“react-dom”; // componentΛimport͢Δ import Hello from “./components/Hello.jsx”; render( <Hello/>, document.getElementById(“app”) );
$ npm run build:watch
CSSΛ͚͍ͭͨ(´∀ʆ*)
src/components/Hello.jsx import React from “react”; const style = { color:
“red” } const Hello = () => ( <h1 style={style}>Hello World</h1> ) export default Hello;
src/components/Hello.jsx import React from “react”; const Hello = () =>
( <h1 className=“red”>Hello World</h1> ) export default Hello;
มͰ֎෦͔Β͍ͨ͠(´∀ʆ*)
src/components/Hello.jsx import React from “react”; const Hello = ({ color
}) => ( <h1 style={{ color }}>Hello World</h1> ) export default Hello;
src/components/App.jsx import React from “react”; import Hello from “./Hello.jsx” const
App = () => ( <div> <Hello color=“red” /> </div> ) export default App;
src/app.js import React from “react”; import { render } from
“react-dom”; // componentΛimport͢Δ import App from “./components/App.jsx”; render( <App/>, document.getElementById(“app”) );
ͨ͘͞Μ࡞Γ͍ͨ(´∀ʆ*)
src/components/App.jsx import React from “react”; import Hello from “./Hello.jsx” const
colors = [“red”,”blue”] const App = () => ( <div> { colors.map(color => ( <Hello color={color} /> )) } </div> ) export default App;
src/components/App.jsx import React from “react”; import Hello from “./Hello.jsx” const
items = [ { id: 1, color: “red” }, { id: 2, color: “blue” } ] const App = () => ( <div> { items.map(item => { <Hello color={item.color} key={item.id} /> }) } </div> ) export default App;
ϘλϯΛϙνʙ͍ͨ͠(´∀ʆ*)
src/components/ MyButton.jsx import React from “react”; const MyButton = ()
=> ( <button onClick={() => alert(“ϙνʙ”)}>push me!</button> ) export default MyButton;
src/components/App.jsx import React from “react”; import MyButton from “./MyButton.jsx” const
App = () => ( <div> <MyButton /> </div> ) export default App;
src/components/ MyButton.jsx import React from “react”; export default class MyButton
extends React.Component { render(){ return( <button onClick={this.onClickHandler}>push me!</button> ) } onClickHandler(){ let pochi = “ϙνʙ”; alert(pochi); } }
จࣈͷೖྗ͕͍ͨ͠(´∀ʆ*)
src/components/MyInput.jsx import React from “react”; export default class MyInput extends
React.Component { render(){ return( <div> <input/> </div> ) } }
src/components/MyInput.jsx import React from “react”; import MyButton from “./MyButton.jsx” export
default class MyInput extends React.Component { render(){ return( <div> <input/> <MyButton onClick={this.onClickHandler}/> </div> ) } onClickHandler(){ alert(“ϙνʙ”) } }
src/components/ MyButton.jsx import React from “react”; export default class MyButton
extends React.Component { constructor(props){ super(props) } render(){ return( <button onClick={this.props.onClick}>push me!</button> ) } }
import React from “react”; import MyButton from “./MyButton.jsx” export default
class MyInput extends React.Component { constructor(){ super() this.state = { value: “” } } render(){ return( <div> <input value={this.state.value} onChange={this.setTextData} /> <MyButton onClick={this.onClickHandler}/> </div> ) } setTextData(e){ let text = e.target.value this.setState({ value: text }) } onClickHandler(){ alert(“ϙνʙ”) } }
࠷ޙʹ
࠷ॳʹݴͬͨίϨ • Reactͷ։ൃڥΛ࡞ΔͷΊΜͲ͍͘͞
https://github.com/facebookincubator/create-react-app create-react-app
UIʁ
http://www.material-ui.com/#/ Material UI
buttonͳͲ͕σβΠϯ͞ΕͯίϯϙʔωϯτʹͳͬͯΔʂ
͜͏ݴ͏ͷΛΈΔͱࣗͰ࡞Δͱ͖ propsʹԿ͕͋Ε͍͍͔Θ͔Γ͍͔͢ʂ
ྑ͖ReactϥΠϑΛ͓ա͍ͩ͘͝͠͞