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
320
React勉強会.pdf
kaminchu
August 07, 2019
Tweet
Share
More Decks by kaminchu
See All by kaminchu
jawsug_niigata_20220115
kaminchu
0
350
yarnの話.pdf
kaminchu
1
180
Web_アプリ_勉強会_FE_BE_.pdf
kaminchu
0
1k
ルーターの選び方その2.pdf
kaminchu
0
800
ルーターの選び方
kaminchu
0
1.2k
NDS56.pdf
kaminchu
0
120
nds54
kaminchu
0
230
internet
kaminchu
0
3k
Other Decks in Programming
See All in Programming
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
スマホから Youtube Shortsを見られないようにする
lemolatoon
25
28k
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
140
オープンソースソフトウェアへの解像度🔬
utam0k
12
2.5k
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
180
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
120
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
800
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
210
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
200
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
810
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
980
CSC305 Lecture 04
javiergs
PRO
0
260
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
Context Engineering - Making Every Token Count
addyosmani
5
220
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
4 Signs Your Business is Dying
shpigford
185
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The Cult of Friendly URLs
andyhume
79
6.6k
Music & Morning Musume
bryan
46
6.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
A Modern Web Designer's Workflow
chriscoyier
697
190k
GitHub's CSS Performance
jonrohan
1032
470k
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