サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
次のようなコードを書いて、 importReact from "react" export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatemabuild 次のようなファイルが生成されるという、katatema というツールをつくった。 <!DOCTYPEhtml> <html> <head> </head> <body> <div>Hello!</div> </body> 最先端の消耗 前に キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘ で、こういうことを書いた。 id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。 最近のJavaScriptの周辺環境は大変で、何をやるに
発端 やりたいと言ったら @mizchi がやってくれることになった。 今回の目標 weapons.json ·GitHub メインクエスト : この json を使って、Splatoon のブキを一覧表示する機能を作る サブクエスト : 絞り込み機能を付ける サブクエスト : 検索フォームと一覧部分をサブコンポーネントに分けて、それらを管理するルートコンポーネントに state の更新内容を書き戻す 進捗 割と実践的で、構築しながら説明と言う感じだった。実際GitHub - dolpen/react-tutorial のコミットログを見た方が何をしたかは分かりやすいのではないかと思うので大胆に割愛。 コンポーネントは何を与えられるべきかReact 自体は data => view を担当するのが主機能なので、view を出力するコンポーネントの構築に、この data に当たるもの以
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。Reactとの出会いReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
Our Setup Node.js App feature allows for the choosing a specific version of Node.js in order to run the apps using Node.js 6.x, 8.x, 9.x, 10.x, 11.x, 12.x, 14.x, 16.x, 18.x, 19.x, 20.x, 22.x and 24.x versions. The currently available Node.js version pool on our Shared servers is available at this page. This function provides ultimate flexibility and features a user-friendly interface that helps yo
今日はこれまでに紹介したPropやStateを使ったComponent間でやりとりについて書きたいと思います。 親のStateを子のPropとして渡す Componentを設計する時はまずPropとしてI/Fを考えて、そのComponentが管理すべき値で変更されるものをStateとして定義します。 つまりComponent間での親子の関係を意識して、親がStateを持っていて子にPropとして渡すというのが基本になります。（子は使うだけで管理しているのは親） var User =React.createClass({ propTypes: { name:React.PropTypes.string.isRequired, id:React.PropTypes.number.isRequired }, render() { return ( <div>{this.props.id}:
react-style-guideの日本語訳が見つからなかったので、ざっと読むだけでなく英語の勉強がてらオレオレな和訳をしてみた。（半分ぐらい個人用メモ状態です） （わからない部分はGoogle翻訳に頼ったし諦めたりしたりしたし）ものすごい誤訳意訳口語訳多数だと思うので、指摘等いただけると幸いです。Reactの"独特な"考え方は今までこれといってスッキリと書くことができなかった。 だから私は、所属するチームで過去数ヶ月の間で使ってみたイケてる感じのReactの書き方についてまとめてみようと考えた。 この記事は、React-Componentsに限定した範囲での話をします。 (JavaScriptの)プログラミング全体のスタイルや、componentization（Web Componentsを用いた開発?）、Fluxの概念とかの話ではないです。 同様に、ドキュメントは生きていますし、これ
These docs are old and won’t be updated.Go toreact.dev for the newReact docs. These new documentation pages teach modernReact:react: Componentsreact: Hooksreact:APIsreact: LegacyAPIsReact is the entry point to theReact library. If you loadReact from a <script> tag, thesetop-levelAPIs are available on theReact global. If you use ES6 with npm, you can write importReact from 'react'.
Ratings are updated daily and may not reflect the most recent reviews. AddsReact debugging tools to theChrome Developer Tools.Created from revision 3cde211b0c on 10/20/2025.React Developer Tools is aChrome DevTools extension for the open-sourceReactJavaScript library.It allows you to inspect theReact component hierarchies in theChrome Developer Tools. You will get two new tabs in your Ch
React.js はコンポーネントの開始タグと終了タグの間のすべての子ノードを this.props.children という配列にセットする。 サンプルコード。 <!DOCTYPEhtml> <html> <head> <title>React.js sample: this.props.children</title> <meta charset="UTF-8"> <script src="https://fb.me/react-0.13.3.js"></script> <script src="https://fb.me/JSXTransformer-0.13.3.js"></script> </head> <body> <h1>React.js sample: this.props.children</h1> <div id="example"></div> <script ty
![[ヅ]React.js はコンポーネントの開始タグと終了タグの間のすべての子ノードを this.props.children という配列にセットする (2015-06-02)](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2fdedc756a33c7be90b6cbec15f52e8f81990ef2f3%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttp%253A%252F%252Fwww.nilab.info%252Flab%252Ftwitterpic%252F605672885672222721_1.jpg&f=jpg&w=240)
React.js で親コンポーネントと子コンポーネントが連携するシンプルなサンプルを書いてみた。 元ネタは、書籍 『入門React (Developing aReact Edge)』 のサンプルコードbleeding-edge-sample-app/client/app/components/answers at master · backstopmedia/bleeding-edge-sample-app ·GitHub で、ここから余計なものを省いてシンプルなコードにしたもの。 サンプルのスクリーンショット。 あらかじめ、子コンポーネントの onChanged プロパティに、親コンポーネントのコールバック関数を設定しておいて、子コンポーネントのイベントが発生したら、子コンポーネントから this.props.onChanged を呼び出すことで、親コンポーネントのコールバック関数
![[ヅ]React.js で親コンポーネントと子コンポーネントが連携するシンプルなサンプルを書いてみた (2015-06-02)](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2fc125478ad94098ddb3c63cc103959c076f157bdc%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttp%253A%252F%252Fwww.nilab.info%252Ff0%252F2015%252F20150602_react.png&f=jpg&w=240)
はじめに 最近仮想DOMが世間で流行ってる感あるのではじめることにしました。 Matt-Esch/virtual-domとかsegmentio/dekuとかRaynos/mercuryとかから勉強してもよかったのですが、星が1番ついていたことと、以前Atomのpackageを弄った際に少し触ったこともあったfacebook/reactから勉強していくことにしました。 仮想DOMとは 仮想DOMはHTMLのDOM構造をjsのオブジェクトで表していてDOM変更時に差分だけを変更してくれる。Reactとは facebook社の作っているUI層をつくるjavascriptフレームワークです。 特徴Just theUI Lots of people useReact as the V in MVC. SinceReact makes no assumptions about the res
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
