React やってみた
ナウい javascript さわってみたくて React をちょっとやってみた。
だいたいほぼ初めてさわる技術だったので、雰囲気で書いてる。
つくったもの
https://tenki-yoho.herokuapp.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