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
370
初めての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.4k
Progressive Release by using Fastly
konojunya
1
440
WinTicketにおけるPWA at PWA Night vol.9
konojunya
4
1.6k
新卒研修を終えて
konojunya
0
550
大規模なWebの開発手法
konojunya
1
2.4k
Other Decks in Technology
See All in Technology
【shownet.conf_】放送局とShowNetが共創する、未来の放送システム ~Media over IP 特別企画の裏側~
shownet
PRO
0
240
【インフラエンジニアbooks】30分でわかる「AWS継続的セキュリティ実践ガイド」
hssh2_bin
0
100
位置情報とオープンソースがやりたくてMIERUNEに転職した話 〜経歴、事例紹介、GISへのいざない〜 / MIERUNE JCT - Tokyo 2024
mierune
PRO
0
390
OPENLOGI Company Profile
hr01
0
53k
可視化がやりたくてMIERUNEに転職した話 〜“思考のための道具”とコンピューターによる新たな表現〜 / MIERUNE JCT - Tokyo 2024
sorami
2
450
Oracle GoldenGate 23ai 導入Tips
oracle4engineer
PRO
1
180
XP matsuri 2024 - 銀河英雄伝説に学ぶ
kawaguti
PRO
3
440
分析者起点の企画を成功させた連携面の工夫
lycorptech_jp
PRO
0
210
【shownet.conf_】AI技術とUX監視の応用でShowNetの基盤を支えるモニタリングシステム
shownet
PRO
0
240
山手線一周のパフォーマンス改善
suzukahr
0
110
Strict Concurrencyにしたらdeinitでクラッシュする話
0si43
0
120
【shownet.conf_】ShowNet 2024 ~ Inter * Network ~
shownet
PRO
0
350
Featured
See All Featured
Speed Design
sergeychernyshev
22
460
Making the Leap to Tech Lead
cromwellryan
129
8.8k
Clear Off the Table
cherdarchuk
91
320k
How to Ace a Technical Interview
jacobian
274
23k
The Language of Interfaces
destraynor
154
24k
Become a Pro
speakerdeck
PRO
23
4.9k
Designing for Performance
lara
604
68k
Documentation Writing (for coders)
carmenintech
65
4.3k
Building Flexible Design Systems
yeseniaperezcruz
326
38k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.7k
Debugging Ruby Performance
tmm1
72
12k
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ϥΠϑΛ͓ա͍ͩ͘͝͠͞