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
エラーって何種類あるの?
kajitack
5
310
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
300
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
580
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
120
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
46
31k
XP, Testing and ninja testing
m_seki
3
190
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
440
5つのアンチパターンから学ぶLT設計
narihara
1
110
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.4k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
230
Java on Azure で LangGraph!
kohei3110
0
170
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
4 Signs Your Business is Dying
shpigford
184
22k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Producing Creativity
orderedlist
PRO
346
40k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Being A Developer After 40
akosma
90
590k
Bash Introduction
62gerente
614
210k
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