修行の場

知人が言っていました。これは修行だと。

weekly react

背景

Reactを使い始めました。 バックエンドエンジニアにとってはなれないところはありますが、 再利用できるコンポーネントの数、ツールの充実、React Nativeなどを見ると、 無視できないため、毎日1ポモドーロはreactを触ってみて様子を見ることにしました。

1週間、合計20時間ほどやってみて、 Reactの基本的なコンセプトやコツとJavascriptの復習ができて Reactのプロトタイプ程度を作る知識は身についたと思います。

下記、毎日やったことの記録です。

3/4

  • infinity 画像グリッドテーブルを実装
    • componentはpropsとしてデータを受け取る場合、this.propsを直接参照することでデータ変更時にビューが再描画される。例えば、this.props.imagesをthis.state.imagesに代入して、renderメソッド内で使うと再描画されない。
    • jsxでは、XMLの塊をfirst class objectのように扱えるので非常に便利
      • XMLなので、PyQTのようにset~~と書いて無駄にストレスをためなくてすむ

3/5

  • 再ロード時に5枚以上画像が更新されなくなる問題(Infinity Listの問題?)
    • 解決していない
  • react-imagesのlightbox左上にタグボタンなどをつけた
  • yarn addはnpm installの代わりとして使う。
  • material-uiを試してみた。良さそう。
  • react.elementは
    とかfragmentsで囲ってその子として複数の要素をもたせるようにしないとけない。要素のツリー構造っぽいですね。

3/6

  • onclickの中で無名関数を書いてハンドラに与える引数を指定できる。超ベンリ。
  • react-routerの公式動画を見た。react native用もある。すごい
    • ページ切り替え時にフックしてstateを変更できるのならすぐに使える。
    • 今回はページ遷移せずにボタン押下時にstateを変更するだけで対応
  • jupyer widgetのように同じ表示部分をコントロールするだけのものなら割と少ない知識で作れる。
    • matplotlibもバイト列に簡単に変換できるのなら表示できるはず。

3/7

  • react-tag-button
  • タグ入力のバグを直したい
  • scrapyが途中終了した場合に備え、キューの中のURLを保存したい
  • python interprocess communication
  • keyのwarningがでる。reactのkeyとlistの話を確認。重要なのは次の2点
    • Keys Must Only Be Unique Among Siblings
    • Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:
  • https://github.com/manojsinghnegiwd/react-image-browser

3/8

  • 基本的な概念の理解が必要と考えたため、ReactのDocのMain Conceptsを1-6まで読む
    • JSX
      • 状態、ハンドラ、描画ロジック(従来のHTML)は本来結びついているものであり、JSXはmarkupとロジックを分けるのではなく、関心でコンポーネントを分離する。
      • 本来は、検索ボックス、画像ブラウザ。などといった単位がconcernのはず。
      • You can put any valid JavaScript expression inside the curly braces in JSX.
        • なので何重にもJSX->Javascript -> JSXとできる
      • recommend wrapping multiple lines in paranthesis
      • JSX Prevents Injection Attacks
      • We recommend using the “Babel” language definition for your editor of choice so that both ES6 and JSX code is properly highlighted.
    • Rendering Elements
      • React DOM takes care of updating the DOM to match the React elements.
      • If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
        • 複数のroot DOM nodesを持てるよう。
      • React elements are immutable.
      • React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
      • In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs
    • Components and Props
      • if you integrate React into an existing app, you might start bottom-up with a small component like Button and gradually work your way to the top of the view hierarchy. → というアプローチもある
      • This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element.
      • All React components must act like pure functions with respect to their props.
    • State and LifeCycle
      • State is similar to props, but it is private and fully controlled by the component.k
      • local state is exactly that: a feature available only to classes.
      • The componentDidMount() method runs after the component output has been rendered to the DOM.
      • React knows the state has changed, and calls the render() method again to learn what should be on the screen. This time, this.state.date in the render() method will be different, and so the render output will include the updated time. React updates the DOM accordingly.
      • Do Not Modify State Directly
      • To fix it, use a second form of setState() that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument