全体的な View の作成が終わった
全体的な View の作成が終わった。
作成したもの
source/renderer/components/ 以下の view ファイル、 style ファイル
期待する動き
現行ページのレイアウトを再現する。
結果
成功
手順など
各コンポーネントディレクトリの下には view.js と style.css が配置されている。
ROOT_DIRECTORY/ + node_modules/ + build/ + source/ | + renderer/ | | + components/ | | | + app/ | | | + header/ | | | + main/ | | | + footer/ | | | + advertisement/ | | | + ranking-actress/ | | | + search-entry/ | | | + entries/ | | | + view.js | | | + style.css | | | | | + renderer.js | | | + styles/ | | + reset.css | | | + index.html | + gulpfile.babel.js + .babelrc + package.json
source/renderer/components/app/view.js
ページ全体の骨組みを作る。
import React from "react"; import styles from "./style"; import HeaderComponent from "../header/view"; import MainComponent from "../main/view"; import FooterComponent from "../footer/view"; export default class Component extends React.Component { render() { return ( <div className={styles.container}> <HeaderComponent /> <MainComponent /> <FooterComponent /> </div> ); } }
source/renderer/components/header/view.js
ヘッダー部分のコンポーネント
import React from "react"; import styles from "./style"; export default class Component extends React.Component { render() { return ( <header className={styles.container}> <h1 className={styles.title}> <a href="/">Nukindex</a> </h1> <p className={styles.description}> 毎日のおかずを提供するサイトです </p> </header> ); } }
source/renderer/components/footer/view.js
フッター部分のコンポーネント
import React from "react"; import styles from "./style"; export default class Component extends React.Component { render() { return ( <footer className={styles.container}> <p className={styles.row}> Copyright © 2017 Nukindex. All rights reserved. </p> <p className={styles.row}> Contact: <a href="mailto:ura.katz.1988@gmail.com">ura.katz.1988@gmail.com</a> </p> </footer> ); } }
source/renderer/components/main/view.js
メインコンテンツを入れるコンポーネント
import React from "react"; import styles from "./style"; import RankingActressComponent from "../ranking-actress/view"; import AdvertisementComponent from "../advertisement/view"; import SearchEntryComponent from "../search-entry/view"; import EntriesComponent from "../entries/view"; export default class Component extends React.Component { render() { return ( <main className={styles.container}> <RankingActressComponent /> <AdvertisementComponent> <a href="http://track.bannerbridge.net/click.php?APID=138222&affID=88332&siteID=172583" target="_blank"> <img src="http://track.bannerbridge.net/adgserv.php?APID=138222&affID=88332&siteID=172583" /> </a> </AdvertisementComponent> <SearchEntryComponent /> <EntriesComponent /> <AdvertisementComponent> <a href="http://track.bannerbridge.net/clickprod.php?adID=1661429&affID=88332&siteID=172583" target="_blank"> <img src="http://track.bannerbridge.net/adgprod.php?adID=1661429&affID=88332&siteID=172583" /> </a> </AdvertisementComponent> </main> ); } }
source/renderer/components/advertisement/view.js
広告部分のコンポーネント
import React from "react"; import styles from "./style"; export default class Component extends React.Component { render() { return ( <div className={styles.container}> <h2 className={styles.title}> 広告 </h2> <div className={styles.ads}> {this.props.children} </div> </div> ); } }
source/renderer/components/ranking-actress/view.js
女優ランキング部分のコンポーネント
import React from "react"; import styles from "./style"; export default class Component extends React.Component { render() { const actressRankingData = getActressRankingData(); const actressRankingItems = actressRankingData.map(actress => { return ( <li className={styles.item}> <a href="#">{actress}</a> </li> ); }); return ( <div className={styles.container}> <h2 className={styles.title}> 私的女優ランキング </h2> <p className={styles.description}> 個人的な女優ランキングです。 </p> <ol className={styles.list}> {actressRankingItems} </ol> </div> ); } } function getActressRankingData() { return [ "跡美しゅり", "橋本ありな", "市川まさみ", "月本れいな" ]; }
source/renderer/components/search-entry/view.js
検索部分のコンポーネント
import React from "react"; import styles from "./style"; export default class Component extends React.Component { render() { return ( <div className={styles.container}> <h2 className={styles.title}> 動画検索 </h2> <p className={styles.row}> <input className={styles.field} placeholder="動画を検索" /> </p> </div> ); } }
source/renderer/components/entries/view.js
動画リスト部分のコンポーネント
import React from "react"; import styles from "./style"; export default class Component extends React.Component { render() { const entriesData = getEntriesData(); const entryItems = entriesData.map(entryData => { const tagItems = entryData.tags.map(tag => { return ( <li className={styles.item_tag}> {tag} </li> ); }); return ( <li className={styles.item_entry}> <h2 className={styles.title_entry}> {entryData.title} </h2> <ul className={styles.list_tags}> {tagItems} </ul> </li> ); }); return ( <div className={styles.container}> <ul className={styles.list_entries}> {entryItems} </ul> </div> ); } } function getEntriesData() { return [ { "videoId": 12345678, "imageId": 0, "title": "動画タイトル", "tags": ["タグ1", "タグ2"] } ]; }
いろいろ調べながら書いた。 React の基本的な描画機能は使えていると思う。
次はデータの外部化と Redux の導入を頑張りたい。