React学んでみた

Transcript

1. 大沼　佑樹 REACT 学んでみた 2022年1月30日
2. 名前：大沼 佑樹 最近オススメの配信 スノー・ホワイト・パラダイス・エルサント・フロウ・ ワスレナ・ピュア・プリンセス・リーヴル・ラブ・ハイ デルン・ドコドコ・ヤッタゼ・ヴァルキュリア・パッシ ョン・アールヴ・ノエル・チャコボシ・エルアリア・フ ロージア・メイドイン・ブルーム・エルの原神配信 自己紹介 ハイライト：課金でカード止めら れて、慌てて走ってコンビニ行っ て課金した回 あと、普通にAPEX配信もおすすめ
3. 今日の予定 導入方法 どんな感じか 所感 今日の学び：
4. パート 1 導入方法
5. VITEを使おう VITE:https://vitejs.dev 「yarn create vite」を実行してあとはコマンドラインでReactを選択するだけ ・起動は「yarn dev」で開発サーバを起動できる。 ・本番ビルドは「yarn build」 META謹製のCreate React Appはすでにあまりメンテされなくなってきている
6. パート ２ Reactについて ストラテジア・ブランディング 危機管理におけるリーダーシップ
7. Reactとは ユーザインターフェース構築のための JavaScript ライブラリ 宣言的な View コンポーネントベース 一度学習すれば、どこでも使える
8. 宣言的な View 出力の性質やあるべき状態を記述してプログラムを構成する宣言型プログラミ ング 例えばReact Elementの記述スタイル <Test name="cat" times="1" /> のようにどんなデータが表示されるかべきかを記述することで、Reactが表示してくれて、適切なタイミン グで更新もしてくれる。 参照透過性の担保、つまり同じ入力には必ず同じ出力が得られる。 これは、Web Componentsの思想を踏襲している。
9. コンポーネントベース 機能単位でデザインとロジックがカプセル化されたものの組み合わせ つまりMVCのVだけ。 Reactではカプセル化されたコンポーネントをベースに必要なデータが宣言的に取得されるようにする。
10. 一度学習すれば、どこでも使える レンダラーを変更することでいろんなプラットフォームの開発ができる ネイティブアプリ WindowsやMacのアプリ ベクターグラフィック PDFドキュメント コマンドラインアプリ
11. JSXとは JavaScriptとXMLの組み合わせによるコンパイルを前提としたシンタッ クスシュガー <button type="submit"> Click! </button> React.createElement( 'button', {type: 'submit'}, 'Click!' ); HTML React
12. コンポーネントとは コンポーネントには、クラスコンポーネントと関数コンポーネントが存 在する。 しかし、今は React開発チームが推奨しているように関数コンポーネン トが主流 <Text text="テスト"/> main.jsx app.jsx const Text = (props) => { const text = props.text return <p>{text}</p> } const Text = ({ text }) => { return <p>{text}</p> }
13. React hooksとは クラスコンポーネントでしか扱えなかったstate等を関数コンポーネント で扱えるようになった。 function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div>); }
14. React hooksの副作用(useEffect)を使えば非同期処理もできる const useGetStatus = (code): ReturnValue => { const [code, setCode] = useState([]); useEffect(() => { const load = async () => { try { const statusData = await getStatus(code); setCode(statusData); } catch (err) { throw new Error(`'${code}' not exists`); } }; }, [code]);
15. Context APIとは グローバルで値を保存できる const ThemeContext = React.createContext('light'); const App = () => { const theme = useState('light'); return ( <ThemeContext.Provider value={theme}> <ThemedButton/> </ThemeContext.Provider> const ThemedButton = () => { const theme = userContext(ThemeContext); return <Button theme={theme} />; }
16. 主要な外部ライブラリ等 ・Redux(グローバルな値の管理) ・React-router(SPAルーティング) ・Zustand(ポストRedux) ・Next.js(Reactフレームワーク) ・Gatsby(Reactフレームワーク)
17. まとめ ここまで、機能を紹介したが、それらを完全に理解してすぐに実務で活 躍できなかった。 ただし、既存のコードが読めるようになったので、改修から慣れていけ ば、段々理解が深まるはず。 本を読んだこと自体は無駄では無かった。 これから、もっと理解を深めて行きたい。
18. おわり