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
Software Architecture
hschwentner
6
2.3k
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
理論と実務のギャップを超える
eycjur
0
140
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
500
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
930
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
私はどうやって技術力を上げたのか
yusukebe
44
19k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
900
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
390
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
640
技術的負債の正体を知って向き合う
irof
0
180
Featured
See All Featured
Six Lessons from altMBA
skipperchong
29
4k
Optimizing for Happiness
mojombo
379
70k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
The Language of Interfaces
destraynor
162
25k
How GitHub (no longer) Works
holman
315
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
35
6.1k
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