イマドキWebフロントエンド環境とReactを触りながらサンプルを10本書いてみた

はじめに

Webフロントエンドの知識がjQueryで知識が止まっていたので、モダンなWebフロントエンドに触れてみた。そのメモ。

良かった点

「今はこうなっているのかー」と分かった。今後はナウい記事を読んでもビビらないと思う。

Reactのすごさ

触ってみて下の記事のいうことが理解できた。何がすごいの?と聞かれたら下の記事を掻い摘んで説明したい。

触ってみたもの

  • ES6
  • Yarn
  • Webpack
  • Babel
  • Sass/SCSS
  • React

とりあえずエディタ開いてHTMLを書くぞというタイプの人間だったので、フロントエンド開発にまずはコマンドラインを打って環境を構築する点が新鮮。自動化できるところはツールで共通化してラクできるところはラクをする、というのは分かった。Reactは使うか分からないが、Webpack/Babel/SCSSは絶対に使うと思う。

作ってみたもの

以下サンプル。いくつかはドキュメントをそのまま写経したものがある。

Github repo

01 Hello

01

02 Router

react router

https://reacttraining.com/react-router/web/guides/ のサンプル

02

03 Material-UI

material ui

03

04 Chart

react chartjs 2

04

05 Todo List

05

06 Editor

Markd

06

07 Form

07

08 Hacker News

Hacker News Reader

08

09 Google Maps

react-google-map

09

10 Redux

Reduxの実装とReactとの連携を超シンプルなサンプルを使って解説のサンプルコードをいじったやつ

10

チートシート

困ったらみる。

Awesome

網羅的な記事。

おわりに

学んでみて新鮮だったし楽しかった。ここしばらくWebフロントエンドは書いてないけど、久しぶりに何かサービスを作りたくなった。