ポートフォリオサイト作り直した

仕事でもずっとReaectNativeばかりで、まじめにフロント書いてないので

勉強がてらポートフォリオサイト作り直した

f:id:rskull:20170917021816p:plain

http://rskull.com/#/works

環境構築

$ yarn add react react-dom react-router-dom styled-components

Webpack + Babel 関連

$ yarn add webpack webpack-dev-server extract-text-webpack-plugin babel-loader babel-polyfill babel-preset-react babel-preset-es2015 babel-preset-state-2 babel-core  --dev

CSS周り

$ yarn add css-loader cssnano  postcss-easy-loader postcss-loader style-loader --dev
$ yarn add normalize.css

キーバインドするために入れた

$ yarn add  keycode react-keydown

Decorator使うのに必要

$ yarn add babel-plugin-transform-decorators-legacy --dev

.babelrc

{
  "presets": ["react-native"],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'src');

const extractCSS = new ExtractTextPlugin('style.css');

const config = {
  entry: [APP_DIR + '/index.js', APP_DIR + '/style.css'],
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "babel-loader"
      },
      {
        test: /\.css$/,
        use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
      }
    ]
  },
  devtool: 'source-map',
  devServer: {
    contentBase: 'public',
    port: 8080,
  },
  plugins: [
    extractCSS
  ],
};

module.exports = config;

シンプルな構成

webpack-dev-server を実行すればサーバーが立ち上がる

作ってみて

styled-components で雑に書いてしまった感じ

小さいサイトなのでReduxも入れてない

react-keydownでキーイベント使えるようになったのはいいけど、画面の端っことか関係無いところクリックするとイベントが解除されるのどうにかしたかった

SSRがめんどくさかったからHashでルーティングするようにしてある

次はもうちょっと大きいサイトをかっちり書いてみる