【React】Reactに爆速で入門する1。GN125、グラディウス400のメンテナンス/カスタムブログです。バイクGNブログRSSまとめカメラ/写真/絶景IT系GN125作成したスマホアプリ/Webアプリたち【React】Reactに爆速で入門する1。ReactHOMEIT系Javascript【React】Reactに爆速で入門する1。結果はじめにみなさん、こんにちは!今回は、Javascript、というかReactの話です。最近のフロントエンド開発ではまぁまず名前を耳にするReact。私も、もう2年前位に遊びで手を出してみましたが、どうにもコンポーネントの切り単位の統一やデザイナーの分業といったところで引っ掛かりを感じ、結局Angularをメインで使用しています。業務でReactを使った案件に携わることになり、重い腰を上げて、マジで今更なんですがReactを勉強することにしました。マジで今更なんですけどね。Webpack、をベースに他のReact周辺まわりライブラリを追加していくぜ、みたいな感じらしいんですが、これらを一気に習得しようとするとこんがらがってしまうと考えたので、まずはReactのみ、次にWebpackを使って、次にReduxと一緒に、のように段階的に勉強していくことにしました。今回は、本当にReactだけに焦点を当て、モジュール切り出しとかそういうのも特に考えずに1ファイル内でReactを動かすだけの回にします。ちなみに、私はReactの勉強を始めるにあたって、下記のQiitaの記事を参考にさせて頂きました。シンプルで分かりやすかったです。React入門チュートリアル1(Qiita)今回の記事は、上記記事の内容に沿っていきますんで、進み方は同じです。補足とか、私の思ったことなんかを追記していきます。さんのindex.htmlとほぼほぼ同じです。下記雛形をコピーしてください。type="text/babel"></script></body></html>[/javascript]実際のReact開発では、WebpackやらBrowserifyやらを使ってbundleしたファイル1つをindex.htmlで読み込んで、というのが普通です。今回は他のフロントエンドの色々を考えずに、というコンセプトなんで、Scriptタグで読み込んでいきますからね。先ほどの雛形のscript部分に追記します。/>,document.getElementById("app"));[/javascript]ReactDOM.render一旦、下の方から解説していきます。ReactDOM.render()は、雰囲気で分かると思いますがReactにDOMの描画をお願いしている部分です。第1引数には、DOMっぽい何かを与えます。Javascriptに慣れている人は、かなり違和感を感じると思います。/>は”や’で囲まれていないのかと。私はかなりもやもやを感じましたが、こういうものなので慣れましょう。このHTMLに似た謎の記法はJSXと呼ばれます。JSXを使用しない方法もありますが、一般的にはJSXを使用するのでやはり慣れてください。ちなみに、JSXはHTMLと完全に互換の記法ではありません。第2引数は、第1引数で与えたオブジェクトを描画する対象を指定します。ここは普通にJavascriptです。Class定義部についてさて、コードの前半のclass定義部分についてです。/>と対応しています。React.Componentとrenderメソッドです。Reactの仕組みで描画させたい場合(ReactComponentとして使用する場合)は、React.Componentを継承させておく必要があります。中身は気にしないでokです。このクラス内の唯一のメソッド、renderは、最終的にReactComponentを返却する必要があります。Worldを表示したいだけなんでh2要素とp要素を返却しています。renderメソッドでは、親が1つになるようにしないとエラーになります。pをトップレベルで書いてしまうとエラーです。今回class定義したものを使用して、最終的にReactDOM.renderしていますが、classではなく関数でも良いですし、直接jsxを書いてもokです。結果とりあえず全てのコードが間違いなく書かれていれば、下記のように画面表示されるはずです。次回は、もっと実践的にReactしていきます。【React】Reactに爆速で入門する2。【Javascript】爆速でChrome拡張プラグイン開発を試す。作り方は意外とかんたんでした。今回は、Phonegap/Cordova入門3回目です。2016.10.18今回は、TalendでSAPと接続する方法についてまとめてみました。SAPというのはその業界では割と有名なERPパッケージです。前回は、Phonegap/Cordovaの概要について記述しました。前回、Chrome拡張機能の作り方を勉強したよーという記事を書きました。【React】Reactに爆速で入門する1。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。【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.。