Componentを拡張してみる - Qiita
今回はちょっとした小ネタとして、既存のComponentを拡張したようなComponentを作りたい時の話をしたいと思います。 それには、v0.12で追加されたJSXのspread attributesを使うと簡単に出来ます。 テキスト付きの画像Component 例として、テキストと画像をセットにしたImageTextというComponentを考えてみたいと思います。 I/FとしてはimgのComponentに渡すものにプラスしてテキストで考えてみます。 var ImageText = React.createClass({ render() { return ( <span>{this.props.text}<img src={this.props.src} width={this.props.width} height={this.props.height} /></span> );
React.jsがVirtualDOMを採用していて嬉しい事 - Qiita
今回はReact.jsのVirtualDOMについて簡単に触れておきたいと思います。 VirtualDOMについては別途AdventCalendarがあるので詳しくはそちらを見てください。自分もReact.jsのVirtualDOMの実装について書いています。 本当は↑だけでいいのですが、このAdventCalendarのどこかで触れておきたかったので重複する部分も多いですが簡単に触れておきます。 VirtualDOMの嬉しい点 JavaScriptを使ってDOMを操作して画面の表示を切り替えていくようなアプリケーションの場合、ユーザー体験を損ねないためにも更新されるDOMは最低限にしたくなります。 例えばBackbone.jsを使っていると、基本的にはView単位でrenderするのでViewを細かく分割していくことが必要になります。そうなるとViewが増えて複雑さが増してきて辛くなって
React.jsの地味だけど重要なkeyについて - Qiita
今回はReact.jsのVirtual DOM実装の中でもユーザーが意識するべき点のkeyについて書きたいと思います。 React.jsではPropにkeyという値を指定することが出来て、Componentのリストを表示するような時につけていないとdevelopment環境だとconsole.warnで Each child in an array should have a unique "key" prop. Check the render method of KeyTrap. See http://fb.me/react-warning-keys for more information. と表示されます。 このkeyはVirtualDOMのdiffから実際のDOMに反映させるときに最小限の変更にするために使われます。 例えば var KeySample = React.creat
React.jsでFormを扱う - Qiita
今回はReact.jsでのFormの扱いについて書きたいと思います。 例えばReact.jsでは↓のようなことをすると変更出来ないテキストフィールドになってしまいます。どうしてなのかという話ですね。 // ダメ <input type="text" value="initial value" /> // ダメ <input type="text" value={this.state.textValue} /> var Text = React.createClass({ getInitialState() { return { textValue: "initial value" }; }, changeText(e) { this.setState({textValue: e.target.value}); }, render() { return ( <div> <p>{this.st
React.jsのEventについて - Qiita
今回はDOMのイベントの扱いについて書きたいと思います。 SyntheticEvent React.jsではDOMをVirtualDOMとしてwrapしているようにDOMのイベントについてもSyntheticEventとしてwrapしていて、クロスブラウザ対応されています。 I/Fはこんな感じです boolean bubbles boolean cancelable DOMEventTarget currentTarget boolean defaultPrevented Number eventPhase boolean isTrusted DOMEvent nativeEvent void preventDefault() void stopPropagation() DOMEventTarget target Date timeStamp String type この通り、preve
JavaScript初級者から中級者になろう — uhyohyo.net
このページの最終更新日：2019年7月4日 JavaScript。主にWebページを作るのに使われるほか、現在ではさまざまなところで活躍しているプログラミング言語です。 このページはJavaScriptの中級講座です。最新鋭ではないかもしれませんが、読み進めれば大抵のものを自分で作れるようになることでしょう。 言い訳とJavaScriptの歴史 / 問い合わせ 最近の更新2017/10/05 全ページを手直ししました。十六章第六回を追加。2017/11/9 十六章第二十一回・十六章第二十二回を追加。2017/12/2 十七章第三回・十七章第四回を追加。2017/12/3 十七章第五回・十七章第六回・十七章第七回を追加。概要コンテンツは第一篇と第二篇に分かれています。 JavaScriptは昔からWebページに動きを与えるものとして用いられてきましたが、第一篇ではそのような、昔からあるJav
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
