React

トップページのコンテンツ追加とコンポーネント仕様の変更をしてみる。【ver.3.7】

トップページにコンテンツを追加した。 コンテンツの増加でコードの見通しが悪くなってきたので、見出しやリストをコンポーネント化、リストの内容を外部jsonにして構造をわかりやすくした。 index/components/main/view.js diff import React from "react";…

読む本リストのJSONデータを読み込んで描画してみる。【ver.2.3】

ほんとはデータベースを使うべきなんだろうが、とりあえずJSONで代用する。 データファイルの作成 components/books/components/main/books.json diff [ { "title": "本のタイトル", "url": "AmazonのURL" }, ... ] Viewファイルの編集 components/books/com…

Googleのデジタルワークショップを修了したのでポートフォリオに追加してみる。【ver.2.4】

ついでに持ってる資格系を付け足した。 codecademyの受講状況も足した。それっぽくなってきたのかな。 こういう時ってマイナーバージョンあげて良いのかな? www.codecademy.com components/index/components/main/view.jsx diff import React from "react";…

react-router-domを使って画面遷移をしてみる。【ver.2.2】

ver.3.0のビジョンが見えないまま前回ver.2.1へ移行してしまったわけだが、あらためてver.3.0への目標を決めたい。 読む本リストの実装、これだ。 読む本リストを思いついた時点で、なんか他にもリスト系作ってみたいなーと思ったので、別画面を作成して画面…

CSS Modulesを導入する。【ver.2.0】

WebpackのCSS Modulesは、loaderを追加するだけでHTMLファイルの<head>内にモジュールの記述をまとめた<style>要素を追加してくれる。 ここまででいったんReact化についてやりたいことは一段落したのでver.2.0としたい。 ソース【ver.2.0】 https://github.com/cosmology2</head>…

コードをES2015+の文法で書き換えてみる。【ver.1.4】

とりあえず書き換えて実行してWebpackのエラー見ながら設定直していこうかな、と思ったら普通にビルドできちゃった。 Webpackすげえ。 ディレクトリ構成 [ROOT]/ + node_modules/ + build/ + source/ | + images/ | | + main.jpg | | | + renderer/ | | + co…

各パーツのコンポーネント化をしてみる。【ver.1.3】

Reactでのビルドと描画が無事成功したので、次はコンポーネントを作ってみたい。 Header, Main, Footerの3つのコンポーネントに分けようと思う。 エラー出て修正したところは赤太字。 コンポーネントを意識したディレクトリ構成へ React関連はsource/rendere…

WebpackでReactを試してみる。【ver.1.2】

Webpackの雰囲気がふわっとつかめてきたので早速ポートフォリオをReact化してみる。 エラー出て修正したところは赤太字(太字とh3タグの見分けがつかない)。 Webpackのインストール > npm install webpack --save-dev jsxのトランスパイルのためにloaderが…