Reactにおけるトランスパイラー【Babel】の役割 - Qiita
概要 前回の記事【ReactのJSXについて理解を深めよう！】においてちらっとトランスパイラーについて触れましたが、今回はさらにトランスパイラーについて深掘りしていきたいと思います！ 続きはこちら 【webpack】をサクッとまとめる トランスパイラーとは 人間の職業で言うところの通訳者・翻訳者のような役割を果たしてくれます！ トランスコンパイラ（他にトランスパイラ、ソース・トゥ・ソースコンパイラ、などとも）は、あるプログラミング言語で書かれたプログラムのソースコードを入力として受け取り、別のプログラミング言語の同等のコードを目的コードとして生成する、ある種のコンパイラである。 wikipediaより JSXはそのままでは実行できず、トランスパイラーを使って実行可能なJavaScriptに変換する必要があります。その変換作業のことをトランスパイリング、変換することをトランスパイルと言います
React Native v0.57がTypeScriptに対応したらしいので動かしてみた - Qiita
v0.57でいろいろ変わるという記事を書きましたが、本当にMetro BundlerがTypeScriptを食べてくれるのか半信半疑だったので、実際に試してみました。 結論 ビルドだけならゼロコンフィグに近い感じで行けました。型チェックをする場合はMSのブログでのやり方よりも、もうひと工夫必要です。 サンプルコード v0.57.0-rc.3でプロジェクトを作ってみました。これをベースにお話します。 前提条件：Babel 7のTypeScript対応の仕組み React NativeのTypeScript対応は、Babel 7のTypeScript対応に乗っかった形で実現されています。 ここで重要なのは、 Babelはtscを内部で実行するわけではない ということです。 今回導入された@babel/preset-typescriptは、FlowTypeの babel-plugin-flow-
React SFCでもLifecycleフックを使う - Qiita
React+Redux のスタックでアプリケーションを開発する際に、Presentational/Container でコンポーネントの責務分割をする設計手法1をとっていると、できるだけビューとなるコンポーネントは Stateless Functional Component (SFC) で書きたいという気持ちがありますよね。 とはいえ、必ずしもすべてのビューコンポーネントを関数にできるかというとちょっと難しいです。例えば、componentWillMountのタイミングでAPIを叩いてデータを予めフェッチしておくなどの処理は、どうしてもその処理がビューのライフサイクルに依存するため、ここだけ仕方なくクラス構文を使ったコンポーネントにせざるを得ない...などのモヤモヤ感が生まれます。 SFCにライフサイクルフックを提供するHOCを作る このような場合には、特定のコンポーネントにライフサイク
ReactのFunctionComponentでライフサイクル - Boostnote
こんにちは。Boostnoteのメンテナのsosukesuzukiです。BoostnoteはReactで書かれていています。そして実はBoostnoteは作られてから結構時間が経っていて至る所に肥大化したコンポーネントが存在します。Boostnoteでは肥大化したコンポーネントはコントリビュータの皆様のおかげもあって以前と比べたらマシになってはいますが、放置され気味になっています。それについていつかなんとかしたいと考えていて、なんとかする方法についての記事です。 極力StatelessFunctionalComponent 肥大化したコンポーネントは読みにくく、管理がしづらいので、適切な大きさにコンポーネントを分割していくことがが必要です。分割していく上で重要なのは省けるStateは全て省きコンポーネントは極力StatelessFunctionalComponentにすることです。exte
React Native おすすめコンポーネント一覧v2 - Qiita
はじめに よくよく考えると今日クリスマスイブらしいですが、残念ながら記事書くぐらいには予定がないです！ クリスマスの高円寺は逆にとても空いているのでオススメですよ！ 色々と進捗あって【React Native】良さげなコンポーネント紹介が古くなってしまったのでそれ以降変更あったり、新しいやつみつけてたりするので改めての報告です。 去年と同じものを紹介したりしてますが、それはとても良かったり、情勢に変化があったパターンは紹介しています！ 僕もまだまだ知識浅いのでこっちだぜ！これもあるよ！などあればお教えいただけますと幸いです！ 今年は僕がこの記事を書いた地点のスター数を記載しています！ ルーティング react-native-router-flux ★：6048 バージョン追えていない感と進んでいない感が半端なくなってきた頃合いですが、色々と触ってみた感じ、（動く環境なら）一番ちゃんと動くん
react-reduxの使い方まとめ
React React そのものは次の記事も参照。(React 公式よりももっと低レベルなところから始める、React チュートリアル, React チュートリアル 日本語翻訳) React は State を元にバーチャルDOMを作成し、バーチャルDOMを元にDOMを生成するシステムを担うライブラリ。state の更新があった場合、その差分だけを DOM に反映することができ、パフォーマンスが良い。つまり、PC への負担が少ない。React を用いる利点のうち、一番大きなものは、状態 state と view 実際の見た目をどうするか、という「二つの問題を完全に切り分ける」ことができる。つまり、state をどう変化させるか、という問題と、state を DOMにどう反映させれるか、の2つを完全に切り分けて実装できる。 React Component React はコンポーネントと呼ばれ
ReactComponent のリファクタリング指針 - freee Developers Hub
エンジニアの id:t930 です。 freee Developers Advent Calendar 2017 19日目いきます。 React はその名前を聞くようになってから3年以上が経過し、Webアプリケーション開発の文脈においてはもはや枯れた技術と言えるでしょう。会計freeeでも2015年ごろに Backbone.js から React へのリプレースを行い、現在では Reactコンポーネントだけでも900近いファイルが存在しています。当然このような規模でやっているとリファクタリングも必要になってくるわけで、本記事ではそんな中で得られたReactコンポーネントにおけるリファクタリングの指針について紹介していきます。1 適切な単位に分割する React に限った話ではないですが、巨大で見通しの悪いコンポーネントはメンテナビリティや再利用性の低下を招きます。表示領域、責務、意味付けに
Reactによるフォーム／リストの基本
対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactに興味／関心があり、これから学び始める方 前提環境 筆者の検証環境は以下の通りです。 macOS Sierra 10.12 Node.js v8.6.0／npm 5.5.1 React 16.1.1 フォームとリストで掲示板アプリを作る GUIを実装する上で、ユーザーからのインプットを受け取る方法と、ユーザーにアウトプットを見せる方法を覚えるのはとても大切なことです。今回は、HTMLの古き良きインプット方法であるform要素から入力を受け付けて、リスト形式でデータを表示する掲示板アプリを題材にして、ReactというUIライブラリがどのように活躍するのかを見ていきましょう。最終的に、図1の見た目をしたアプリケーションができ上がります。 図1 掲示板アプリ コンポーネントの設計を考える 今回の掲示板アプリではコンポーネン
私たちはなぜReactではなくVue.jsを選んだのか | POSTD
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム（qwintry.com） ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com） その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの） プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
チームで行うReact Componentの設計 - Qiita
こんにちは。DMM.comでフロントエンド開発を行っている@ma9toです。 DMMでは各プロダクト毎でフロントエンドの技術選定が違いますが、私が担当しているしているプロダクトでは、一部Reactを採用しています。 この記事では、ReactのComponentの設計をチームで行ったときの反省と、次はどのように行うと良さそうか、現時点で思うところをまとめておこうと思います。 Componentとは まず、Componentとはどういうものか振り返っておきたいと思います。 Componentとは、UIを構成する一部分と考えることができます。 ReactはComponentを組み合わせることので、より複雑なUIを構築していくようなComponentベースのViewライブラリです。 Reactを利用することで、Componentのコードのカプセル化を容易にし、独立したComponentの実装を可能
React-Reduxのイベントハンドラ定義に関するTips/Pitfalls - Qiita
イベントハンドラに関する情報で、本格的な実装を始める前に知っておいた方が良さそうな点を中心に紹介します。 ReactのSyntheticEvent（ブラウザネイティブイベントのラッパー） Reactのコンポーネントで発生するイベントは、ブラウザネイティブのイベントをラップしたものになっていて、ブラウザ間差異がある程度吸収されています。参考 → 公式Doc APIの違いなどはほとんど無いです。気をつけるのは以下の2点くらい。 関数内でreturn false;してもイベントの伝搬が止まらない。 止めたいときは明示的にevent.stopPropagation()などを呼びます。 非同期的にEventオブジェクトを参照したい場合は、event.persist()する。 パフォーマンスのためにオブジェクトを使い回しているらしいので、何もしないと変な状態になります。 イベント周りでブラウザ間の挙動
Ajaxを劇的に簡単にするReact.js
ここ数年、Javascript界隈でフレームワーク戦争が勃発してきました。クライアント開発の規模も年々大きくなり、jQueryだけでは複雑な画面遷移などを管理しきれなくなってきたのが原因だと思います。 私も昨年までAngularとbackboneを試しましたが、サーバサイドをMVCにしているのに、クライアントでもMVCを作るMVCの2階建ては、やり過ぎなのではないかと思っていました。フレームワークそのもの覚えるまでにも一苦労というのも面倒に感じました。 2014年、海外でブームに火が付いたReact.js そんな中、2014年の後半からFacebook発のReact.jsの採用事例が聞こえてくるようになりました。AirBnBや米Yahoo! Mailなど大手がReact.jsを積極的に採用し出したので気になり、年末年始を使って色々調べてみることにしました。 Rails以来の衝撃 色々試して
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript 2.4+におけるRedux Action - Qiita
関東最速でReact+Redux+TypeScriptなアプリの開発環境を作る - Qiita
https://qiita.com/kenokabe/items/7bc03b751776ec080da8
https://qiita.com/kenokabe/items/9c650ec8bcb1418c596d