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勉強会.pdf
Search
kaminchu
August 07, 2019
Programming
0
310
React勉強会.pdf
kaminchu
August 07, 2019
Tweet
Share
More Decks by kaminchu
See All by kaminchu
jawsug_niigata_20220115
kaminchu
0
340
yarnの話.pdf
kaminchu
1
160
Web_アプリ_勉強会_FE_BE_.pdf
kaminchu
0
980
ルーターの選び方その2.pdf
kaminchu
0
780
ルーターの選び方
kaminchu
0
1.2k
NDS56.pdf
kaminchu
0
110
nds54
kaminchu
0
210
internet
kaminchu
0
3k
Other Decks in Programming
See All in Programming
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
160
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
560
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
820
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
Gleamという選択肢
comamoca
6
760
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
110
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
250
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
420
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
470
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
How to Ace a Technical Interview
jacobian
277
23k
The Language of Interfaces
destraynor
158
25k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
A Tale of Four Properties
chriscoyier
160
23k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Writing Fast Ruby
sferik
628
61k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Docker and Python
trallard
44
3.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Transcript
これからにStyling はemotion でキマリ☆ 2019/08/07 React 勉強会 #1 1
⾃⼰紹介 Twitter @kam1nchu 職種 インフラエンジニア フロントエンドエンジニア 歴 Javascript 歴 3
年 React 歴 3 年 AWS 歴 半年 2
React のStyling は何使ってますか? 3
emotion が盛り上がってきています 4
他のに⽐べて何がいいのか 5
CSS Modules sass とか書けたりはする。CSS とJS の間での定数の共有ができない。 import styles from "./styles.css";
export const StyledButton = () => ( <button className={styles.button}> Styled! </button> ); 6
Inline Styles ⼿軽なので好きだけど、hover とかできないことがある。 css のサンプルのコピペとかし難い。 const styles = {
background: "#fff", padding: "20px", borderRadius: "5px", border: "none", }; export const StyledButton = (props) => ( <button style={props.selected ? styles : {...styles, background: "#ed3330"}}> Styled! </button> ); 7
Styled-Components ⼀⾒便利そうだけど... import styled from "styled-components"; export const StyledButton =
styled.button` background: ${props => props.selected ? "#fff" : "#ed3330"}; padding: 20px; border-radius: 5px; border: none; `; 8
Styled-Components 毎回Component 作らされるの、⾯倒くさくないですか? import styled from "styled-components"; const StyledTable =
styled.table``; const StyledTh = styled.th``; const StykedTr = styled.tr``; export const Table = () => ( <StyledTable> <StyledTh><td> カラム</td><td> カラム</td></StyledTh> <StykedTr><td> 値</td><td> 値</td></StykedTr> </StyledTable> ); 9
そこで 10
emotion 11
inline な感じで書ける /** @jsx jsx */ import { jsx }
from "@emotion/core"; export const StyledComponent = (props) => { return (<div css={{ color: "hotpink" }} {...props}></div>); }; 12
Styled-Components みたいなこともできる import styled from "@emotion/styled"; export const StyledButton =
styled.button` color: turquoise; `; 13
AltCSS っぽいこともできる /** @jsx jsx */ import { jsx, css
} from "@emotion/core"; const styled = css` color: blue; header & { color: green; } `; export const StyledComponent = () => ( <div> <header> <p css={styled}>Green Text</p> </header> <p css={styled}>Blue Text</p> </div> ); 14
emotion(+typescript+parcel) の導⼊の 仕⽅ 15
⾊々⼊れる # ビルド yarn add -D typescript parcel-bundler # react
yarn add -D @types/react @types/react-dom yarn add react react-dom # emotion yarn add @emotion/core @emotion/styled 16
tsconfig.json ( 当然react なので) 、jsx 記法でReact.createElement になるように設定 npx tsc --init
// 略 "jsx": "react" // 略 17
基本的なもの揃える ファイル構成はこんな感じ │ ├ node_modules ├ src ├ index.html ├
App.tsx # ReactDOM.render とかする └ components └ SomeComponent.tsx # emotion で作る ├ package.json ├ yarn.lock └ tsconfig.json 18
component を作る 実は、emotion のcomponent だけはReact.createElement を使わず、 JSX Pragma でempotion の関数を指定する。
/** @jsx jsx */ // ↑これをemotion 使うcomponent のファイルに毎回書く import { jsx, css } from "@emotion/core"; export const SomeComponent = () => ( <div css={css`color: blue;`}></div> ); 19
確認する typescript+parcel なら特に設定はいらない parcel src/index.html 20
おわり 21