【React】Reactに爆速で入門する2。GN125、グラディウス400のメンテナンス/カスタムブログです。バイクGNブログRSSまとめカメラ/写真/絶景IT系GN125作成したスマホアプリ/Webアプリたち【React】Reactに爆速で入門する2。ReactHOMEIT系Javascript【React】Reactに爆速で入門する2。ReactDOM.renderについてはじめに業務でReactを使うことになったので爆速で入門するぜ!の第2回です。前回の第1回では、とりあえずReactを使ってもともと決まりきったDOMを画面表示していましたが、今度はコンポーネントの外から値(配列)を与えて、その値を画面にリスト表示してみます。雛形は前回記事のものと同じものを使用しますので、用意しておいてください。前回にも書きましたが、暫くはReduxは使いませんし、WebpackやBrowserifyでトランスパイル&バンドルはしません。コードを書いていきますそれでは、どんどんやっていきましょう。最初に書きましたが、今回はコンポーネントの外からパラメータを与えて、そのパラメータを子コンポーネントが受け取って画面に値をリストで吐き出す、ということをやっていきます。雛形のscript部分を下記のように修正します。Classについて前回、HelloWorldしたのと同様、React.Componentを継承したクラス定義を行います。このクラスではrenderメソッドの実装が必要で、その点も前回と同様です。変わった点としては、constructorとthis.props.items.mapのところでしょうか。constructorpropsを引数として受け取っています。このpropsに、親から与えられる値が格納されてきます。super(props)はおまじないと思って書いてください。constructor」のエラーが発生します。this.props.items.mapによるli要素の描画コンストラクタでsuper(props)すると、以降はthis.propsで親から受け取ったpropsプロパティにアクセスできるようになる、ようです。後述しますが、親からitemsという属性で配列を受け渡しますので、このコンポーネントの中ではthis.props.itemsにて親からのプロパティにアクセスできます。mapメソッドについては、いつかの記事で書きましたが、配列の1要素ずつループして値を編集して返却するメソッドです。そのメソッドの内部で配列の1要素ずつli要素とp要素を描画していきます。Worldの時とほぼ同じですが、描画するコンポーネントに属性を設定しています。前述のように、要素に属性を与えるようなかたちでそのコンポーネントに値を受け渡すことができます。全てが上手くいっていれば、下記のような画面表示になります。オブジェクトの配列で与えた値が画面表示されていることが確認できます。次回は、画面からの入力値をもとに、リストに値を追加していく、というところをやっていきます。【React】Reactに爆速で入門する3。今回は、本ブログ初のプログラム関係の話題です。今回のテーマはPhonegap/Cor[...]【React】Reactに爆速で入門する1。2016.10.14今回は、Talend内で行(row)データをx倍にする方法についてまとめました。Youtuberになりました!チャンネル登録をお願いします!(登録し[...]【Talend】sequenceで連番を振る方法。hidetaso[...]ETL開発ツールは比較するまでもなくTalend一択だと思う。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。【Javascript】爆速でChrome拡張プラグイン開発を試す。作り方は意外とかんたんでした。【Talend】グローバル変数の使い方(globalMapとcontext)【Talend】条件分岐(if)する4つの方法をまとめました【JSF入門02】ボタン押下時のイベントを扱う。入門01】開発環境の構築。TalendをインストールしようETL開発ツールは比較するまでもなくTalend一択だと思う。入門02】CSVデータを変換する。Talendの使い方からはじめます。【エストレヤ】なんと妹がバイク乗りになるらしい。いうわけでバイクを購入しました。Songバイクでツーリングいこっ!心に残る絶景を写真にGN倶楽部IT系カテゴリの最新記事2019.03.06Wordpress,【WordPress】突然固定ページが404エラーで表示されなくなった!?ので私の対処法を書きます。WebSlides,【WebSlides】HTML+CSS+Javascriptでプレゼン資料を作成したら割とウケた話。React,【React】Reactに爆速で入門する4。React,【React】Reactに爆速で入門する3。React,【React】Reactに爆速で入門する2。WordPress.。