今から始めるReact入門〜 React Router 編

futuremaze commented 3 years ago

今から始めるReact入門〜 React Router 編 https://qiita.com/TsutomuNakamura/items/34a7339a05bb5fd697f2

futuremaze commented 3 years ago

プロジェクトの作成

プロジェクトディレクトリをreact_routerではなく誤ってreact-routerにしたところ、 npm install の段階でエラーが発生したインストールするreact-routerパッケージと名前が同じであることが原因と思われるため、ディレクトリ名をreact_routerに修正した。ディレクトリ変更後はpackage.jsonファイル修正のためnpm init -yからやり直す必要があった。

codespace@codespaces_9c80b9:/workspaces/getting_started_with_react/react-router$ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader \
>         webpack webpack-cli webpack-dev-server \
>         react react-dom \
>         react-router react-router-dom
npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "react-router" under a package
npm ERR! also called "react-router". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR! 
npm ERR! For more information, see:
npm ERR!     <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/codespace/.npm/_logs/2021-03-31T07_13_33_032Z-debug.log

futuremaze commented 3 years ago

React Router の導入

https://qiita.com/TsutomuNakamura/items/34a7339a05bb5fd697f2#react-router-%E3%81%AE%E5%B0%8E%E5%85%A5

exactの表記がある → URL Pathに厳密にマッチ
- <Route exact path="/" ...></Route>: /のみマッチし、/fooや/barにはマッチしない
exactの表記がない → URL Pathに前方一致的な感じでマッチ
- <Route exact path="/" ...></Route>: /も/fooも/barもすべてマッチする

futuremaze commented 3 years ago

Linkの追加

https://qiita.com/taro_kawasaki/items/767dbe84b7eb58111eb3

Layout.jsのimport { Link } from "react-router-dom";で、importするLinkに波括弧{}がついているのはなぜか。

Reactで{}(curly bracket or 中括弧 or 波括弧)をimportで使う理由

以下が結論。 Named Exportというのは、exportにdefaultがついていないもののこと。

ES6のexportには

Default Export Named Export の2種類が有り、Named Exportには{ } を付けないとimportできない。

に追加して

ファイルからオブジェクト全体をimport ファイルから特定のオブジェクトをimport の2種類が有り、特定のオブジェクトをimportする際は{ }をつける。

futuremaze commented 3 years ago

URL のパラメータ取得

https://qiita.com/TsutomuNakamura/items/34a7339a05bb5fd697f2#url-%E3%81%AE%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E5%8F%96%E5%BE%97

client.jsで<Route path="/archives/:article" component={Archives}></Route>のように:パラメータ名と指定する。コンポーネント内でthis.props.match.params.articleのようにthis.props.match.params.パラメータ名で値を取得できる。

futuremaze commented 3 years ago

URL のパラメータを正規表現で指定する

https://qiita.com/TsutomuNakamura/items/34a7339a05bb5fd697f2#url-%E3%81%AE%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%82%92%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE%E3%81%A7%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B

client.jsに<Route path="/settings/:mode(main|extra)" component={Settings}></Route>のように:パラメータ名のあとに正規表現を記載する。コンポーネント内での参照はURLパラメータと同じでthis.props.match.params.パラメータ名のようにする。

futuremaze commented 3 years ago

ボタンがアクティブの時のclass 指定(activeClassName)

https://qiita.com/TsutomuNakamura/items/34a7339a05bb5fd697f2#%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%8C%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%96%E3%81%AE%E6%99%82%E3%81%AEclass-%E6%8C%87%E5%AE%9Aactiveclassname

NavLinkタグにclass属性を指定するとエラーになる。

react-dom.development.js:67 Warning: Invalid DOM property `class`. Did you mean `className`?
    at a
    at LinkAnchor (webpack:///../node_modules/react-router-dom/esm/react-router-dom.js?:158:23)
    at Link (webpack:///../node_modules/react-router-dom/esm/react-router-dom.js?:206:31)
    at NavLink (webpack:///../node_modules/react-router-dom/esm/react-router-dom.js?:279:30)
    at div
    at Layout (webpack:///./js/pages/Layout.js?:39:5)
    at withRouter(Layout) (webpack:///../node_modules/react-router/esm/react-router.js?:725:37)
    at Router (webpack:///../node_modules/react-router/esm/react-router.js?:93:30)
    at BrowserRouter (webpack:///../node_modules/react-router-dom/esm/react-router-dom.js?:59:35)

classをclassNameとすると正常になる。

futuremaze commented 3 years ago

html 静的コンテンツのコンポーネント化

https://qiita.com/TsutomuNakamura/items/34a7339a05bb5fd697f2#html-%E9%9D%99%E7%9A%84%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E5%8C%96

ポイントのみにしぼったコードと解説のため、その他のコードはgithubを直接参照する必要がある。

https://github.com/TsutomuNakamura/my-react-js-tutorials/tree/master/2-react-router

futuremaze / getting_started_with_react