[入門] これからReactでサービス作ってみたいっていう初心者にみてもらいたい記事とか

このエントリーをはてなブックマークに追加

[入門] これからReactでサービス作ってみたいっていう初心者にみてもらいたい記事とか

これからReactを触りたい!できるようになりたい!サービス作ってみたい!って方向けに必要最低限のスキルというかツールとオススメの記事をご紹介します。ここにある記事を参考にしながらチュートリアルなどとりあえず何か作ってみると大体把握できるのではないかなと思います。

React

React – A JavaScript library for building user interfaces

React.jsとは

まずはReact.jsってなんなのっていう方は下記の記事をみてもらうといいです。
ちなみに、個人的にはjQueryは使わなくなった訳ではないです。もちろんReact.jsを使っているサービスではjQueryを使うことはないですが、コーポレートサイトなどでReactを使う必要性もないのでjQueryを使っています。住み分けができている分jQueryだけできるよりもReact.jsもできた方が仕事の幅は広がりますね。

Redux

reactjs/redux: Predictable state container for JavaScript apps

ReactはViewを担当するフレームワークです。SPAサービスなどを作っているとどうしてもしんどくなってくるのが、stateの管理です。Reduxを使うことでstateの一元化、更新管理がわかりやすくなります。なので、以下の記事等で概要を把握した後に実際に使ってみてstateがどのように流れているか把握するのがいいでしょう。

実際にサービスを作る時には導入することをオススメします。

環境構築

Reactを使うってなると絶対に通らなければいけないのが環境構築です。新規サービスを作るってなると以外にここが手間だったりします。しかも、これからReactやりたいって方には結構とっつきにくいんですよねー。BabelでトランスパイルしてWebPackでバンドルしてwebpack-dev-serverでとか。さらにBabelのプラグイン使ってってなるとかなりしんどくなってきます。なので手っ取り早くやるなら
facebookincubator/create-react-app: Create React apps with no build configuration.がいいかなと思います。

ただ、実際にサービス作るなら必要な知識なので以下の記事でまずは概要から把握していくといいと思います。

React-Router

React Router: Declarative Routing for React.js

Reactでページ遷移させるなら必須です。SPAによくあるブラウザバックの時にはページトップへスクロールさせないなどもわずかなコードでできます。基本的には上記の公式サイトを見れば大体のことはできます。以下の記事は補足的に見るといいと思います。

Redux-Form

Redux Form – Redux Form

Reduxを使っているならForm周りはRedux-Formがオススメです。理由としては、活発に開発が行われていますし、慣れてくると使いやすいです。当ブログでも過去に紹介しているのでぜひご覧になってください。

Immutable.js

Immutable.js

こちらもReact, Reduxでサービスを実際に開発していると起きるのがReducer周りの肥大化です。僕も一年前に作ったサービスで経験しました。んで、このImmutable.jsを使うことでReducerでModel的な役割をすることができます。

CSSについて

普通にCSSファイルを作ってJSX内で要素にCSSクラスなりを割り当てることもできるけど、
CSSクラスをローカルにするためにCSS in JSCSS Modulesがよく使われる手法です。

Styleとなるオブジェクトを直接JSで記述する CSS in JSと.cssを.jsから利用する CSS Modulesどっちを使うかは好みかもしれないです。
個人的にはCSS Modulesの方が使いやすいかなと思います。というか併用もできます。

オススメの本



WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

イチからわかる!Reactの仕組みと使い方UIコードの再利用化と速度向上を図る!Reactのコンセプト、コンポーネント、JSX、活用テクニック、一歩進んだ使い方を解説!

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

ページの先頭へ