React.js、ヤバい。

この記事はSYSKEN Advent Calendar 2017 18日目の記事です。

 

どうも、進級が危うい〆鯖です。

今回は、私が今年のプロコンで開発に使ったjavascriptの激ヤバライブラリであるReact.js(以降React)の簡単な紹介と、その中でも特にヤバいある機能についてお話していきます。

前日の記事で後輩に煽られてしまったのでがんばります。

 

Reactとは

Reactは、Facebookが開発、OSSで公開しているフロントエンド向けライブラリで、

Facebookはもちろんinstagramのフロントエンドにも用いられています。すごい。

 

ここがすごいよReact

そんなReactですが、

  • コンポーネント
  • 仮想DOM
  • リアクティブプログラミング

などなど、たくさんの特徴がありますが、全部紹介する気力がないので、僕が一番衝撃的だったJSXというReactのSyntaxについてお話します。

Reactでは、通常のJSともう一つ、JSXという形式でコードを記述できます。JSXで記述したプログラムをJSにコンパイルして実行するわけです。

では具体的にJSXについて解説していきます。

 

JSXとは、そしてJSXのヤバさ

というわけで、JSXのキモいすごいところをサンプルコードで見ていきます。

今回はHello,World.

HTMLはこんな感じで、

JSXがこんな感じになります。

HTMLはすごくシンプルです。Reactを読み込んで、コンポーネントを埋め込むためのdivタグを置いてるだけです。

一方JSXですが、render()の中身が表示されると思ってもらえれば大丈夫です。よく見てみると、

見た目からヤバさが滲み出てますね。なんとJSXでは、JSの中にHTMLタグを書けるんです。

初めて見たときはビビりました。「JSの中にタグとか・・・ええ・・・」みたいな。

しかしこれを半年ほど使い続けて、あることに気づきました。

超わかりやすい・・・

これを実行したときにどんな見た目で表示されるかがイメージしやすいんですよ。JSの中にタグがあるキモさに慣れればの話ですけど。

 

最後に

構成めっちゃくちゃな記事ですいません。

今回解説できなかった部分については、また今度記事を書くつもりです。

 


コメントを残す

メールアドレスが公開されることはありません。