katatema.js - ✘╹◡╹✘
次のようなコードを書いて、 import React from "react" export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatema build 次のようなファイルが生成されるという、katatema というツールをつくった。 <!DOCTYPE html> <html> <head> </head> <body> <div>Hello!</div> </body> 最先端の消耗 前に キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘ で、こういうことを書いた。 id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。 最近のJavaScriptの周辺環境は大変で、何をやるに
React勉強会1(2016-05-25) - Dolpenの日記
発端 やりたいと言ったら @mizchi がやってくれることになった。 今回の目標 weapons.json · GitHub メインクエスト : この json を使って、Splatoon のブキを一覧表示する機能を作る サブクエスト : 絞り込み機能を付ける サブクエスト : 検索フォームと一覧部分をサブコンポーネントに分けて、それらを管理するルートコンポーネントに state の更新内容を書き戻す 進捗 割と実践的で、構築しながら説明と言う感じだった。実際 GitHub - dolpen/react-tutorial のコミットログを見た方が何をしたかは分かりやすいのではないかと思うので大胆に割愛。 コンポーネントは何を与えられるべきか React 自体は data => view を担当するのが主機能なので、view を出力するコンポーネントの構築に、この data に当たるもの以
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
How to work with Node.js App - Hosting - Namecheap.com
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, and 14.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 you get faster acquainted with the ne
React.jsでPropやStateを使ってComponent間のやりとりをする - Qiita
今日はこれまでに紹介した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 を日本語訳した - Qiita
react-style-guideの日本語訳が見つからなかったので、ざっと読むだけでなく英語の勉強がてらオレオレな和訳をしてみた。（半分ぐらい個人用メモ状態です） （わからない部分はGoogle翻訳に頼ったし諦めたりしたりしたし）ものすごい誤訳意訳口語訳多数だと思うので、指摘等いただけると幸いです。 Reactの"独特な"考え方は今までこれといってスッキリと書くことができなかった。 だから私は、所属するチームで過去数ヶ月の間で使ってみたイケてる感じのReactの書き方についてまとめてみようと考えた。 この記事は、React-Componentsに限定した範囲での話をします。 (JavaScriptの)プログラミング全体のスタイルや、componentization（Web Componentsを用いた開発?）、Fluxの概念とかの話ではないです。 同様に、ドキュメントは生きていますし、これ
React Top-Level API – React
These docs are old and won’t be updated. Go to react.dev for the new React docs. These new documentation pages teach modern React: react: Components react: Hooks react: APIs react: Legacy APIs React is the entry point to the React library. If you load React from a <script> tag, these top-level APIs are available on the React global. If you use ES6 with npm, you can write import React from 'react'.
ESLintでReactを扱う - Qiita
{ "env": { "node": true, "es6: true }, "ecmaFeatures": { "jsx": true }, "plugins": [ "react" ], "rules": { "react/jsx-uses-vars": 1 } } ESLintは標準パッケージでjsxをサポートしてるのですが、React独自表記の部分はサポート外となっていて、そこはpluginでカバーする感じになっています。 例えばreact/jsx-uses-varsを無しでReact/ESLintを使うとHoge is defined but never used (no-unused-vars)とエラーが出てしまいます。 Hogeが定義されているけど使われないですよというエラーなのですが、この設定により<Hoge />と使うのを許可します。
[ヅ] React.js はコンポーネントの開始タグと終了タグの間のすべての子ノードを this.props.children という配列にセットする (2015-06-02)
React.js はコンポーネントの開始タグと終了タグの間のすべての子ノードを this.props.children という配列にセットする。 サンプルコード。 <!DOCTYPE html> <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)](https://cdn-ak-scissors.b.st-hatena.com/image/square/dedc756a33c7be90b6cbec15f52e8f81990ef2f3/height=288;version=1;width=512/http%3A%2F%2Fwww.nilab.info%2Flab%2Ftwitterpic%2F605672885672222721_1.jpg)
[ヅ] React.js で親コンポーネントと子コンポーネントが連携するシンプルなサンプルを書いてみた (2015-06-02)
React.js で親コンポーネントと子コンポーネントが連携するシンプルなサンプルを書いてみた。 元ネタは、書籍 『入門React (Developing a React 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)](https://cdn-ak-scissors.b.st-hatena.com/image/square/c125478ad94098ddb3c63cc103959c076f157bdc/height=288;version=1;width=512/http%3A%2F%2Fwww.nilab.info%2Ff0%2F2015%2F20150602_react.png)
GitHub - danvk/mocha-react: Demo of using MochaJS to test a ReactJS component (with JSX and Harmony)
What are the requirements for a script passed to the compilers option? · Issue #1458 · mochajs/mocha
はじめてのReact.js - ○△□ - yudppp techblog
はじめに 最近仮想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 the UI Lots of people use React as the V in MVC. Since React makes no assumptions about the res
【個人メモ】React Tutorialをちょこっとやってみた - Qiita
Reactが最近騒がれてるので、 よくわからないからReactjs tutorialを少しこなしてみた。 Reactとは ぐぐるとmizchiさんのブログエントリが出てくる。 Facebook製リアクティブプログラミングライブラリ React を試してみた + 感想 VirtualDOMという技術を使っているようだ。 [JavaScript] 仮想DOMを提供する『React』について少し調べてみた VirutalDOMだけ切り出した成果物も存在する。 https://github.com/Matt-Esch/virtual-dom Virtual DOMのアルゴリズムが知りたくてvirtual-domのコードを読んだ話 react-toolsのインストール React、type=“text/jsx” なコンテンツについてXHRで取りに行くようだ。 Chromeで開発することが多い、という
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://github.com/airbnb/javascript/tree/master/react
GitHub - shibe97/React-MineSweeper: MineSweeper written in React
http://shibe97.github.io/mineSweeper/
React Developer Tools
jest/examples/react at main · jestjs/jest
Testing React Apps · Jest
