React勉強会.pdf

Transcript

1. これからにStyling はemotion でキマリ☆ 2019/08/07 React 勉強会 #1 1
2. ⾃⼰紹介 Twitter @kam1nchu 職種 インフラエンジニア フロントエンドエンジニア 歴 Javascript 歴 3 年 React 歴 3 年 AWS 歴 半年 2
3. React のStyling は何使ってますか？ 3
4. emotion が盛り上がってきています 4
5. 他のに⽐べて何がいいのか 5
6. CSS Modules sass とか書けたりはする。CSS とJS の間での定数の共有ができない。 import styles from "./styles.css"; export const StyledButton = () => ( <button className={styles.button}> Styled! </button> ); 6
7. 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
8. 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
9. 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. そこで 10
11. emotion 11
12. inline な感じで書ける /** @jsx jsx */ import { jsx } from "@emotion/core"; export const StyledComponent = (props) => { return (<div css={{ color: "hotpink" }} {...props}></div>); }; 12
13. Styled-Components みたいなこともできる import styled from "@emotion/styled"; export const StyledButton = styled.button` color: turquoise; `; 13
14. 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
15. emotion(+typescript+parcel) の導⼊の 仕⽅ 15
16. ⾊々⼊れる # ビルド 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
17. tsconfig.json ( 当然react なので) 、jsx 記法でReact.createElement になるように設定 npx tsc --init // 略 "jsx": "react" // 略 17
18. 基本的なもの揃える ファイル構成はこんな感じ │ ├ node_modules ├ src ├ index.html ├ App.tsx # ReactDOM.render とかする └ components └ SomeComponent.tsx # emotion で作る ├ package.json ├ yarn.lock └ tsconfig.json 18
19. 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
20. 確認する typescript+parcel なら特に設定はいらない parcel src/index.html 20
21. おわり 21