ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

React

Reactのrenderで改行を反映させたい

renderメソッドで表示させる際に、htmlタグがエスケープされた状態で表示されてしまう。 class Hoge extends React.Component { constructor(props) { this.state = { hoge: '<div>ssssss</div>' } } render(){ <div>{this.state.hoge}</div> } } 通常であれば問題はないのだが改行…

Reactでscrollアニメーションを実装する

jQueryでアニメーションをさせながスクロール処理を行う時がまぁ〜まぁ〜あります。 $('html, body').animate({ scrollTop:0, 500, 'swing', function(){ console.log("done") } }); で、Reactでスクロールをアニメーションさせたい場合、jQueryのanimateメ…

Google AdSenseをReactに対応させる

Reactで作ったwebページに対してGoogle AdSenseを表示させる機会があり、その際に少し手こずったので、対応方法について書く。 まず前提条件として、下記のscriptをheadタグ内に設定しておく。 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> Reactを使わなければinsタグとscriptタグを設定することで表示…

Reactでコンポーネントが更新された際にDOMの更新をかけたい

Reactでpropsに変更があった際にDOMの更新も行いたい。 例えば、親からもらったpropsに変更があった時、ajaxでリクエストをかけてその結果をもとにDOMの更新を行いたい場合など。 そんなことに直面した場合は、componentDidUpdateメソッドを使えば解決するよ…

ReactでinnerHTMLを実行したい

React.Componentのrenderメソッドでhtmlを描画する時に、htmlが含まれている場合は、エスケープされてしまう。 class Hoge extends React.Component { constructor(props) { super(props); } render(){ //fooにhtmlが含まれていてもエスケープされてしまう r…

React.Componentでclassを付与する時の注意点

React.Componentのrenderメソッドを使ってDOMを表示する時がある。 class HelloMessage extends React.Component { constructor(props) { super(props); } render() { return <div>Hello React</div> } } ReactDOM.render( <HelloMessage />, document.getElementById('test') ); ここで</hellomessage>…

JSXでReact.Componentを宣言する時の注意点

Components and Props reactjs.org と JSX In DepthのUser-Defined Components Must Be Capitalized reactjs.org を読み返してびっくりしたことがあった。 React.Componentを表示する時、頭文字を大文字にしないといけないということだ。 どういうことか例を…

ReactでHTML(DOM)を表示させる

Rendering Elementsという項目でHTML(DOM)を表示させる方法を確認する reactjs.org <div id="test"></div> 上のように1行だけのdivタグがあった場合、これに対してDOMを追加する場合は、ReactDOMクラスのrenderメソッドを呼べばよい。 <div id="test"></div> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

Reactでstyle属性を直接表示(インライン表示)させる方法

Reactで、例えば、CSSのbackground-imageを動的に設定したい場合、JSXで文字列結合してしまうとエラーが発生してしまう。 // エラー class Hoge extends React.Component { constructor(props) { super(props); } render(){ return <div style="background-image:url(" + {this.props.imgURL} + ">Hello React</div> } } ReactDOM…

ReactのsetStateでstateが即時反映されない件

ReactでsetStateを呼び出した直後にその変数を参照しにいこうとすると更新が反映されていないケースがある。 例えば、componentDidMountメソッドでsetStateを呼び出して、stateの更新依頼をかけた後、すぐにcomponentDidMountメソッド内でそのstateを参照す…

今さら人に聞けないReactをIE11に対応する方法

Reactの公式サイトに記載があるのだが、デフォルトではReactはIE9、IE10、IE11には対応していない。 (IE8はどうした(笑)) facebook.github.io だが、windows7、windows8という古いOSを使っているユーザーの場合は、EdgeではなくIE11あたりを使っているはず。…

React.Fragmentという最終兵器(またはリーサル・ウェポン)

少し前にReactでrenderを使う時に注意点について書いた。 jumbomonaca.hatenablog.com renderメソッドを使う場合は、domで囲むか、false、nullまたは文字列でないとbabelでコンパイルする時にエラーを出してしまう。 例えば、エラーのパターンとして、dom同…

今さら人に聞けないReactでajaxを実行するタイミング

Reactを選択したからといってajaxを実行しないわけではない。 当然、Reactの時だってajaxを使う。 (正確にはHTTPリクエストなのだが) ただ問題は、いつ使えばいいのだろうか? 公式マニュアルで確認するとcomponentDidMountメソッドのタイミングで実行してく…

Reactで直接propsを書き換えてはいけない件

ついつい忘れてしまいそうになるので、記事化 公式マニュアルにもある通り、propsを直接書き換えてはいけない! reactjs.org

Reactでdomを表示させる時の注意点

Reactのrenderメソッドを使ってdomを表示させようとしてもエラーが表示されてしまうケースがある。 エラーが発生するケースは、domがなく文字列だけ出力する場合のエラー class HelloMessage extends React.Component { render() { return ( Hello {this.pro…

Reactのrenderメソッドで何もdomを表示させたくない場合

Reactで書いた時に、class宣言をして、renderメソッドが呼ばれます。 class Helloworld extends React.Component { render() { return <div>Hello React</div> } } renderメソッドが実行される時に、あえて何もdomを出力、生成させたくない場合があります。 そんな時は…

今さら人に聞けないReactをインポートする方法について

前回、Reactを始めるにあたっての準備について書いた。 jumbomonaca.hatenablog.com 今日は、npmでインストールしたReactをjs(またはjsx)が使えるようになる方法について書きたい。 npmでReactをインストールしただけだとjsの中にReactを書いてもエラーが発…

今さら人には聞けないbabelをコンパイルする方法

Reactに触りたくて、少し前にReactを始めるまでに必要になることを書いた。 jumbomonaca.hatenablog.com jsxないしbabelを書いた後、そのままではブラウザは解釈をしてくれないので、コンパイルする必要があります。 で、そのコンパイルはどうやって行えばい…

今さら人に聞けないReactをはじめるまでの準備

本当に今さら感たっぷりなのですが、備忘録も兼ねて、Reactをはじめるまでに行ったことについて書いていきたい。 まずは、npmでBabelをインストール。 npm install babel-cli@6 npm install babel-preset-react-app@3 次にReactとReactDOMをインストール npm…