React やってみた

ナウい javascript さわってみたくて React をちょっとやってみた。
だいたいほぼ初めてさわる技術だったので、雰囲気で書いてる。  

つくったもの

f:id:whitech0c0late:20171013125037p:plain

https://tenki-yoho.herokuapp.com/

ソース

github.com

環境

  • ES2015 (ES6)
  • ESLint
  • Babel
  • webpack
  • Yarn
  • React (jsx)
  • Sinatra

なかなか環境整えるまで大変だった

ディレクトリ構成

$ tree -L 1
.
├── Gemfile
├── Gemfile.lock
├── Procfile
├── README.md
├── app.rb
├── config.ru
├── japan.yml
├── node_modules
├── package.json
├── public
├── src
├── stylesheets
├── tmp
├── vendor
├── webpack.config.js
└── yarn.lock

6 directories, 10 files

パッケージ群

$ cat package.json
{
  "name": "weather_react",
  "version": "1.0.0",
  "main": "index.js",
  "author": "7kaji <pugera@gmail.com>",
  "license": "MIT",
  "scripts": {
    "heroku-postbuild": "NODE_ENV=production webpack --config ./webpack.config.js --progress --colors",
    "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "import-glob-loader": "^1.1.0",
    "material-ui": "^0.19.3",
    "node-sass": "^4.5.3",
    "prop-types": "^15.6.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-tap-event-plugin": "^3.0.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.3.0",
    "webpack-dev-server": "^2.5.1"
  },
  "devDependencies": {
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^15.0.2",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.1.0"
  }
}

コンポーネント構成

$ tree -L 2 ./src/components
./src/components
├── App.jsx
├── CitiesTable.jsx
├── CityRow.jsx
└── SearchForm.jsx

0 directories, 4 files

感想

  • コンポーネントの設計とか慣れるまで大変そう
  • 環境構築で、けっこー時間かかった
  • material-ui でもいろいろハマった
  • デプロイまで、一通りできてよかった

TODO

  • Redux で state 管理してみる
  • React Router で複数ページ
    • パラメーター
    • 認証 (jwt)
  • SSR (Next.js)

  • Vue.js
  • Firebase, Firestore