ポートフォリオサイト作り直した
仕事でもずっとReaectNativeばかりで、まじめにフロント書いてないので
勉強がてらポートフォリオサイト作り直した
環境構築
$ 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でルーティングするようにしてある
次はもうちょっと大きいサイトをかっちり書いてみる