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
410
初めての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.6k
Progressive Release by using Fastly
konojunya
1
500
WinTicketにおけるPWA at PWA Night vol.9
konojunya
4
1.8k
新卒研修を終えて
konojunya
0
560
大規模なWebの開発手法
konojunya
1
2.6k
Other Decks in Technology
See All in Technology
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
8.8k
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.6k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
80k
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
200
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
850
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
200
Node.js 2025: What's new and what's next
ruyadorno
0
340
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
220
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
160
Git in Team
kawaguti
PRO
3
370
Railsの話をしよう
yahonda
0
150
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
130
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
How STYLIGHT went responsive
nonsquared
100
5.8k
A Modern Web Designer's Workflow
chriscoyier
697
190k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Designing for Performance
lara
610
69k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Side Projects
sachag
455
43k
The Cost Of JavaScript in 2023
addyosmani
55
9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Producing Creativity
orderedlist
PRO
347
40k
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ϥΠϑΛ͓ա͍ͩ͘͝͠͞