Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
初めてのReact
Kono Junya
August 04, 2017
Technology
1
300
初めてのReact
React.jsを初めて勉強する人向けのスライドです!
Kono Junya
August 04, 2017
Tweet
Share
More Decks by Kono Junya
See All by Kono Junya
FUJIMIのFastly活用事例集
konojunya
0
590
Progressive Release by using Fastly
konojunya
1
140
WinTicketにおけるPWA at PWA Night vol.9
konojunya
4
910
新卒研修を終えて
konojunya
0
160
大規模なWebの開発手法
konojunya
1
1.6k
Other Decks in Technology
See All in Technology
Sysdig Secure/Falcoの活用術! ~Kubernetes基盤の脅威モデリングとランタイムセキュリティの強化~
owlinux1000
0
230
20220803投資先CXO候補者向け 会社紹介資料_合同会社BLUEPRINT
hik
0
260
品質特性のすすめ
honamin09
0
160
DMMプラットフォーム ゼロから始めるKubernetes運用 課題と改善
pospome
0
400
Power BI のうらがわ
hanaseleb
1
130
OpenShiftのサポートを始めるぞ!高頻度で更新されるOSSを効果的にキャッチアップする仕組みを考えました!
loftkun
0
330
ログラスを支える技術的投資の仕組み / loglass-technical-investment
urmot
9
1.9k
プロダクトマネージャーの役割と育成、評価
middleokada
15
10k
Backlog × RPAでいろいろ捗った話
z_tetsu
0
380
インフラのテストに VPC Reachability Analyzer は外せないという話
nulabinc
PRO
2
700
ソフトバンクでのMECの取り組みについて
sbtechnight
0
310
ソフトウェアアーキテクチャの基礎: Software Architecture in a Nutshell
snoozer05
28
8.6k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
47
7.6k
Designing for Performance
lara
597
63k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.8k
Product Roadmaps are Hard
iamctodd
35
6.8k
Building Applications with DynamoDB
mza
84
4.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
21
1.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
The Mythical Team-Month
searls
210
39k
GitHub's CSS Performance
jonrohan
1020
420k
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ϥΠϑΛ͓ա͍ͩ͘͝͠͞