[B! jsx] m_shige1979のブックマーク

生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず… | POSTD

(編注：2016/07/29、いただいたフィードバックをもとに記事を修正いたしました。) 免責事項：　私はJSX、Flux、 ES6 、そして webpack を非常に気に入っています。これらのツールについては他のシリーズで話します。 React.jsが騒ぎを起こしているのはご存知の通りです。確かに、 XMLHttpRequest 以来の良いツールです。しかし、調査に数時間を費やした挙句、あまりに多くの用語に圧倒されただけで終わっていないでしょうか。JSX、flux、ES6、webpack、react-routerが使える今、 *他に必要なのは React の使い方を説明してくれる人だけです。* 喜んでください、それがまさに当シリーズでやろうとしていることです。信じられませんか？大丈夫、 2分後、初めてのReactアプリを作った後には納得いただけるでしょう。何もダウンロードせずに、で

m_shige1979 2016/04/01

リンク

React 開発環境構築 - present

React を使ってきちんと SPA を作るのに、毎回ブラウザ表示時にコンパイルしていては、さすがに効率悪い。モダンなフロントエンド開発環境にしたいので、調べながら構築することにした。 react や react-dom などのライブラリは npm でインストール。そういえば Bower ってオワコン化してしまったな。 # プロジェクトフォルダを作る(名前は適当なやつで) mkdir react-project cd react-project # package.json を作る npm init # React をインストール npm install --save react react-dom npm でインストールしたライブラリを使って書いたアプリは、 browserify でビルドして 1 つの .js ファイルにする。 npm install --save-dev brow

m_shige1979 2015/12/29

リンク

electronでbabel + reactを直接使えるようにするまで - Qiita

さくっとelectronでbabel呼び出すところまでが良さそうな情報無くて錯綜した。一旦出来たのでメモ（ビルド＆配布あたりまでは行ってないが、まず動く感じのところまでなのでご了承）出来上がりが見たい場合はこれ (もう記事より古くなってるので多分参考になりません） https://github.com/suisho/example-electron-babel/ 構成好みだがこんな感じにしている $ tree -I node_modules . ├── app │ ├── client │ │ ├── Foo.jsx │ │ └── main.jsx │ ├── index.html │ └── index.js └── package.json コード本体は./app以下に固めている。トップ階層に入れておくと後でgulpfileとか膨れてきた時に汚い感

m_shige1979 2015/12/24

リンク

TypeScript で React - present

今まで書いたサンプル程度の規模でも、実行時に踏むまでバグに気付かないことが結構あって、実際踏むと萎える。 React で規模の大きい SPA 作っていたらと思うとゾッとする。コンパイル時に分かれば良いのに。そうだ。 TypeScript で書いてみよう。 JavaScript のスーパーセットというアプローチが、 AltJS の中でも筋が良いと思っていたんだよな。 github.com TypeScript と、型定義ファイルを管理するための tsd をインストール。 npm install -g typescript npm install -g tsd React と React-DOM、その他使っているライブラリの型定義ファイルをインストールする。 cd src tsd query react --action install --resolve tsd query rea

m_shige1979 2015/12/24

リンク

React入門 - Part2: Browserify/Reactify/Gulpを使う - Qiita

前回作成したhelloworldはブラウザでJSXTransf ormerを読み込みオンラインでjsにコンパイルしていました。実行時にChromeのデベロッパーツールに表示されるように、予めJSXはコンパイルすることが推奨されています。コンパイルの方法は、jsxコマンドを使う方法、 BrowserifyとReactifyを使う方法、最後にGulpのタスクでまとめる方法を順番に試してみます。 Getting Startedの復習作成したhelloworld.jsxを少し修正してコンポーネントを作り構成してみます。ディレクトリ構成は以下です。 $ cd ~/react_apps/helloworld/ $ mkdir src dist $ mv helloworld.jsx src/ $ tree . . |-- dist |-- index.html `-- src `-- hellowor

m_shige1979 2015/12/19

リンク

Electron x React x Webpack

3.md Electron x React x Webpack 0. Synopsis 今回は次のような問題を解決してみる。 ES6が使いたいよりアプリらしく作りたい変更するとRefresh押すのが面倒いいまず、Electronは現状Node v4.1.1を使っているので、ES6で使えないものがまだ多い。今回はこれをWebpackで抑えてみる。ついでに、WebpackのHot module replace(以下、HMR)を利用して、ScriptやCSSの変更をRefreshsせずに反映されるようにしてみる。その上にReactを導入する。 1. 初期設定 Electronを設置する。 npm i -D electron-prebuilt WebpackのLoaderとPluginを設置する。まずは、WebpackとJSXをコンパイルするためのBabel loader、React tr

m_shige1979 2015/11/28

リンク

React 0.13 日本語リファレンス | js STUDIO

このサイトについて Reactの日本語リファレンスです。 Reactの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 JUST THE UI 人々の多くはReactをMVCのVとして使用します。 Reactは他の技術スタックについて想定を行わないため、既存プロジェクトの小規模の機能でこれを試すことは簡単です。 VIRTUAL DOM ReactはDOMを論理的に取り出し、シンプルなプログラミングモデルとより良いパフォーマンスを提供します。また、ReactはNodeを使用するサーバー上でも描画可能であり、 React Nativeを使用したネイティブアプリも動かすことが可能です。 DATA FLOW Reactは一方向のReact

m_shige1979 2015/09/03

リンク

Reactのjsxファイルの拡張子をjsxにしたときにjsxコマンドでwatchするには - Qiita

Help us understand the probl em. What are the probl em?

m_shige1979 2015/09/02

jsx
react

リンク

React.jsのJSXを使ってみる - Qiita

var Hello = React.createClass({ render: function() { return ( <div>Hello {this.props.name}</div> ); } }) こんな感じで一見HTMLに見える部分<div>...</div>がJSXのSyntaxです。詳しくは↓に書いてある通りなのですが、XML likeにタグを書いていく感じです。覚えることはほとんどないです。注意点としてはHTMLではないということで、例えばdivにcontainerというクラスを指定したい場合は、<div class="container">...</div>ではなくて、<div className="container">...</div>となります。(classはJavaScriptの予約語のため) その他ではlabelのfor属性はhtmlforにする必要があ

m_shige1979 2015/09/02

リンク

最近のReactへの言及についての違和感 - mizchi's blog

「最近のReactへの言及についての違和感」というエントリ書いたら燃えますかね— イカid:mizchi0x (@mizchi) 2015, 6月 7 僕がみた資料の中でFluxの設計について正しい理解をしていると思えるのはげたさんのこの資料だけです https://t.co/XaKHhhuP2A— イカid:mizchi0x (@mizchi) 2015, 6月 7 みんなsetStateに騙されてる— イカid:mizchi0x (@mizchi) 2015, 6月 7 一部で「React使うとコード量が増える」という意見、サーバサイドで書いたテンプレートのレタッチをするjQueryと比べたらそりゃそうなんだけど、SPAでそもそもJS側がテンプレート握るような環境では handlebars とかで書いてたところが JSXになるだけでそれ移行コスト— イカid:mizchi0x (@mi

m_shige1979 2015/06/07

リンク

React.js に XSS 対策を求めるのは間違っているだろうか

Transcript 1. React.js に XSS 対策を求めるのは間違っているだろうか #edomaesec 2015 5/30 LT 2. @clariroid 3. くらりど 4. React.js 5. React.js 6. React.js 青い紐 7. React.js • UI を構築する JavaScript ライブラリ 8. React.js • UI を構築する JavaScript ライブラリ • Virtual DOM 9. React.js • UI を構築する JavaScript ライブラリ • Virtual DOM • Component Composable 10. React.js • UI を構築する JavaScript ライブラリ • Virtual DOM • Component Composable • Server-side R