読者です 読者をやめる 読者になる 読者になる

Re:ゼロから始めるNo Error No Life

ぷろぐらみんぐ的なことと趣味的な日常を少々

React.jsを触るためにCODEPENを久々に訪問

「CODEPEN」はご存じでしょうか?

自分は、エンジニアになりたての頃にちらーっとお世話になってました。※といっても見る専

最近は、もっぱらpaiza.ioで検証するくらい※phpruby

「CODEPEN」とはなんぞや!

環境構築の手間なくしてフロントエンド技術の検証が行える優れサービスさん

※保存には、会員登録が必要ですが検証だけならタダ!!!

最近のフロントエンドは、環境構築の手間があるじゃないっすか?

react、angularなどなどまぁー数多くのあれこれが存在するじゃないっすか

そこで手始めに簡単に検証やらなにやらtutorialやらやるならここで十分です!!!!

そのあとしっかりとwindowsmaclinuxなど各OSでの環境構築を学べばいいんす!

本編に入る前に心折れたらまぁー勉強にならないので。

久々に開いた「CODEPEN」さんがかなーーーり進化してて感動しましたよ。

たいていのJSのライブラリ等に対応してますし。

入門するならまず体系的に感覚的に学ぶのもありなのでは?

それに世界中のエンジニアさんがコードを公開してます。

githubと違いその場で確認が可能なので見るだけでも十分参考になります

ってことでReact.jsのtutorialの最初だけちょこっとやってみた

最初だけってのは、サードパーティ製のmarkedというライブラリが使えなかったから笑

作ってみたのは、これ

codepen.io

やったことは、htmlをコピペ、サンプルのコードをコピペし写経

レンダリングしているコンポーネントに新たにコンポーネント追加し表示

やっていることは、すごく簡単

ReactってMVCだと思われそうだけどViewのライブラリだと思っているし

実際Viewの部分である。

ただReactの存在がSPAをより進化させたのは、いうまでもなく

SEOの観点からいうとどうしても検索エンジンに引っかからない点は、否めないが

大規模サイトとかSEO対策が不要なサービスにはもってこいかなと

細かくは、向き不向きはわからないけど

Reactの動き的には、backbone.jsのレンダリングに近いかなーって個人的なイメージ

backbone.jsと比べて今回触ってみたReact.jsに関しては、

backboneより断然わかりやすいという点

基本的な箇所を抑えれば、学習コストって点では、そんな高くないのでは?というイメージ

がまだtutorialの最初なのでそんな語るほど進めてねーーっす笑

次に出てくるpropに関しては、ちょいとstay

まぁーたぶんCODEPENで実装できるんだけど

Propとはなんぞや

Componentのattributeです。

いや俺英語読めないし....

もちろんググりました。

attributeは、属性です。Componentの属性として定義

ただし作成後は変更が不可

つまりpropに関しては、作成後は定義後ってことで

一度定義したら変更は不可。

まだ検証はしてないが定義されたもの下記リンクの最初のソースで言うならuserのvalueに何か追加することは問題ないって感じかな?

Immutable-イミュータブル-って呼ぶらしい

作成後の状態変化をすることが許されないオブジェクトを指すらしい

まぁ論より証拠ってことでサンプルで説明してくれている方のQiitaをぽちっと

qiita.com

これの最初のソースを見ると個人的に理解する第一段階として

あーpropって外部の関数、変数・・・要するにオブジェクトを指定し、使用できるんだ。

よし現段階では、ここまで!