React Parcel usage と画像のviewからの分離

React Parcelの導入

why

  {
    title: '抽選会',
    imgLink: 'fesa-hp/src/img/garagara.png',
    descList: [
      '米10kg',
      '米2kg',

のように配列からCardをmapで生成しようとして，

絶対パス指定じゃないから

画像のリンクを別ファイルにまとめられなかった．

qiita.com

エントリーポイントさえ設定できればいいらしい

問題

parcelがなかなかreactを動かしてくれなかった

結論

そもそもparcelで動かしてもreactはうまく動かない

localではnpm startが必要．

npx create-react-appで作ったindex.jsでは%表示でiconなどの階層構造が

書かれているので，これを/に直さなければ解釈してくれないようだ．

code

Webpackより簡単らしいのでParcelを使ってみる

npm install -g parcel-bundler

入れて早速parcelでreactをlocalで動かそうとすると

parcel build public/index.html -d

🚨 Build Error
/Users/kaede/code/fesa-hp/public/index.html: URI malformed

エラーが出た

dist/ をみると，中身がない！！

kasheight.hatenablog.jp

この記事をみてみると， reactなのにsrc/indexになってるので

parcel src/index.html

では No Entries Found になってしまう

どうしてだかわからない

publicだとMailformed, srcだとNo entries found

parcel build index.html --no-minify

app/index.html

でもだめ

cp public/index.html src

してもだめ

parcel serveもだめ

たふみ様に相談したら解決しました

developer.cdn.mozilla.net

```

> このへんが原因ですね
この指定してる画像のURLを、きちんとpathに書き換えてあげてください

と教えてもらって，動いた

[f:id:kei_s_lifehack:20200611142034p:plain]

しかし，localhost1234ではnoscriptが出てしまう, Reactでは

npm start dist．動いたが，これがdistから動いてる保証がない

他のファイルの画像の表示問題で試してみると，これで解決した.

npx create-react-appで作ったindex.jsでは%表示でiconなどの階層構造が

書かれているので，これを/に直さなければ解釈してくれないようだ．

データをまとめたcomponent

import garagara from './img/garagara.png'; import siumai from './img/siumai.jpg'; const summer2020 = [ { title: 'ご来場記念品', imgLink: siumai, descList: [ '崎陽軒のシュウマイ', '真空パック15個入り', '製造後 5ヶ月保存可能', ], }, { title: '抽選会', imgLink: garagara, descList: [ '米10kg', ........

表示するcomponent

import items from '../summer2020';

const NewInfo = () => { document.title = '夏の大感謝セール'; const SalesCards = items.map((item, key) => <Card.Img variant="top" src={item.imgLink} />

これでentry pointがsrc/ 以下で設定され，viewの側では

mapするだけで画像も呼び出せた

**関心の分離**

**完全な勝利**


[https://de-liker.com/about.html:embed:cite]

たふみ様本当にありがとうございました！

## 問題
parcel public/index.html 

でlocalhost 1234 で動かない