Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Parce que j’aime la React.

Parce que j’aime la React.

レバレジーズ株式会社 社内技術カンファレンス
「テックフェス 2022 秋」
での発表です

タイトル: Parce que j’aime la React.
発表者: 小林 京輔
概要: React18に追加された機能の紹介

Tech Leverages

December 15, 2022
Tweet

More Decks by Tech Leverages

Other Decks in Programming

Transcript

  1. table of contents 1. Who are you ? 2. SPA

    FrameWork And Library 3. React(Basic) a. Component b. Managing State c. Performance tuning 4. React18 a. Rendering b. Loading 5. RFC : “use” Hooks 6. epilogue
  2. table of contents 1. Who are you ? 2. SPA

    FrameWork And Library 3. React(Basic) a. Component b. Managing State c. Performance tuning 4. React18 a. Rendering b. Loading 5. RFC : “use” Hooks 6. epilogue
  3. Art

  4. table of contents 1. Who are you ? 2. SPA

    FrameWork And Library 3. React(Basic) a. Component b. Managing State c. Performance tuning 4. React18 a. Rendering b. Loading 5. RFC : “use” Hooks 6. epilogue
  5. table of contents 1. Who are you ? 2. SPA

    FrameWork And Library 3. React(Basic) a. Component b. Managing State c. Performance tuning 4. React18 a. Rendering b. Loading 5. RFC : “use” Hooks 6. epilogue
  6. React is not a framework (unlike Angular, which is more

    opinionated). ref:https://www.taniarascia.com/getting-started-with-react/
  7. const list = document.createElement("ul"); const apple = document.createElement("li"); apple.innerText =

    "リンゴ"; list.append(apple); const orange = document.createElement("li"); orange.innerText = "オレンジ"; list.append(orange); const grape = document.createElement("li"); grape.innerText = "ぶどう"; list.append(grape); https://typescriptbook.jp/tutorials/react-like-button-tutorial
  8. const Component: FC = () => { const fruits =

    ["りんご", "オレンジ", "ぶどう"]; return ( <ul> {fruits.map((fruit) => ( <li>{fruit}</li> ))} </ul> ); }; export default Component; https://typescriptbook.jp/tutorials/react-like-button-tutorial
  9. const InputItem: FC = () => { const [value, setValue]

    = useState<string>(""); return ( <input value={value} onChange={(event) => { setValue(event.target.value); }} /> ); }; export default InputItem;
  10. import { createRef, FC } from "react"; const Form: FC

    = () => { const inputFirstRef = createRef<HTMLInputElement >(); const inputSecondRef = createRef<HTMLInputElement >(); return ( <form> <input ref={inputFirstRef} /> <input ref={inputSecondRef } /> </form> ); }; export default Form;
  11. import { FC, useState } from "react"; const NoneMemorize: FC

    = () => { const [props, setProps] = useState<FromProps>(); console.log("rendering"); return ( <form> <div> <Input/> </div> <div> <Input/> </div> </form> ); }; export default NoneMemorize;
  12. React without memo Looking further into the future, Xuan Huang

    (黄玄) shared an update from our React Labs research into an auto-memoizing compiler. memo 不要の React より将来に目を向けた話として、Xuan Huang (黄玄) は、React Labs が 行っている自動メモ化コンパイラに関する研究の現状についてお話しし ました。 https://reactjs.org/blog/2021/12/17/react-conf-2021-recap.html React Conf 2021 Recap
  13. table of contents 1. Who are you ? 2. SPA

    FrameWork And Library 3. React(Basic) a. Component b. Managing State c. Performance tuning 4. React18 a. Rendering b. Loading 5. RFC : “use” Hooks 6. epilogue
  14. It’s a new behind-the-scenes mechanism that enables React to prepare

    multiple versions of your UI at the same time. https://reactjs.org/blog/2022/03/29/react-v18.html
  15. As a React developer, you focus on what you want

    the user experience to look like, and React handles how to deliver that experience.
  16. import { createRoot } from 'react-dom/client'; const container = document.getElementById('app');

    const root = createRoot(container); root.render(<App tab="home" />);
  17. const Component:FC = () => { const {data, isLoading} =

    useFetcher(); return( <> {isLoading ? <>...loading</> : {data.map((element) => (<h1>{element.title}</h1>))} } </> ) } export default Component;
  18. const Component :FC = () => ( <Suspense fallback={<Spiner />}

    > <MyComponent /> </Suspense> ) export default Component
  19. const MyComponent:FC = () => { const {data} = useFetcher();

    // throw Promise return ( <> {data.map((element) => (<h1>{element.title}</h1>))} </> ) } export default MyComponent;
  20. table of contents 1. Who are you ? 2. SPA

    FrameWork And Library 3. React(Basic) a. Component b. Managing State c. Performance tuning 4. React18 a. Rendering b. Loading 5. RFC : “use” Hooks 6. epilogue
  21. const MyComponent:FC = () => { const {data} = use(useFetcher());

    // use Hooks return ( <> {data.map((element) => (<h1>{element.title}</h1>))} </> ) } export default MyComponent;
  22. table of contents 1. Who are you ? 2. SPA

    FrameWork And Library 3. React(Basic) a. Component b. Managing State c. Performance tuning 4. React18 a. Rendering b. Loading 5. RFC : “use” Hooks 6. epilogue