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
Culture Deck
optfit
0
330
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
730
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
670
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
240
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
Building Products in the LLM Era
ymatsuwitter
10
4.4k
君も受託系GISエンジニアにならないか
sudataka
2
370
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Embracing the Ebb and Flow
colly
84
4.6k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How GitHub (no longer) Works
holman
313
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Bash Introduction
62gerente
610
210k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
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ϥΠϑΛ͓ա͍ͩ͘͝͠͞