【翻訳】React Native at Airbnb: The Technology - Studio Andy
はじめに この記事は2018年6月20日にAirbnb社のGabriel Pealによって公開された記事を日本語に翻訳したものです。 公開にあたっては氏本人の同意を確認中ですが、誤訳や問題のある表現等を見つけた方は僕のTwitterアカウントまでDMいただけますと幸いです。 元記事: medium.com 本文 この記事はAirbnb社におけるReact Native体験と 次の時代のモバイルアプリケーション開発について記したブログシリーズの第二弾です。 React NativeはAndroid, iOS, Webで横断的に動作する、それ自体が比較的新しく急速に発展しているクロスプラットフォームフレームワークです。2年間に渡って使ってきた今、React Nativeは多くの点において革新的なツールであると自信を持って言えます。それはモバイル開発におけるパラダイムシフトであり、私たちはRea
ドラッグ&ドロップでReact製のWEBアプリがつくれるReactStudioがやばい - Qiita
ReactStudioを使ったアプリの作り方はこちら React Studioを使ってQiitaの記事一覧アプリを作成してみる はじめに reactというとJSXの書き方、props、stateの挙動等を覚える必要があるため、 学習コストが割りと高めであったり、環境を構築するのに一手間かかったり等、 まだまだとっつきにくさが否めないライブラリです。 しかし、今回は、そんなReactをドラッグ&ドロップでアプリが 作れてしまうツールがあったので紹介したいと思います。 ※尚、Windowsはなく、Macのみで使用できるツールでございますので、予めご了承下さい。 公式サイト 公式サイトへのURLはこちら。 React Studio https://reactstudio.com/ ツールの使い方 ReactStudioでコンポーネントをデザインします。 その後、コードが自動生成されます。 無料で
Reactを使って本気でアンケートシステムをつくった - Qiita
この記事は エムスリー Advent Calendar 2017 の25日目の記事です。 普段はDB・サーバサイド・クライアントサイドまでの設計・実装・運用を扱っていますが、この記事ではReactを使って開発したシステムについてを紹介しようと思います。 作ったもの アンケートシステム(survey-designer-js)を作り、社内で使っていました。またOSSとしてレポジトリに公開もしています。 GitHub DEMO なお公開しているのはクライアントサイドのみで、サーバサイドの実装は公開していません。なお、エムスリー社内で使用しているものはこのレポジトリからフォークしたものとなっています。 下記のような機能を備えています。 ページの作成 ページ内への設問の作成 複数選択肢 単一選択肢(ラジオボタン) 単一選択肢(プルダウン) 数値記入 1行テキスト 複数行テキスト 表形式 都道府県 説
2017末時点での React Component 設計のベストプラクティス - Qiita
どう考えているか、というのを聞かれたので、記事に起こしておきます。個人の意見です。 Prettier を使う 気づけばコードの整形を人間がやる時代は終わりました。 細かいコーディングスタイルでレビューの時間を取るぐらいだったら、一貫した自動整形ルールを適用すべきです。 人によっては細かいこだわりがあって prettier の規則が気に食わないかもしれず、僕も最初はそうでしたが、Atomで保存する度に自動整形を走らせる prettier の強烈な開発体験によって、最終的にそれらのこだわりを全て捨てることが出来ました。 生産性を求めるなら、現時点では最優先で導入すべきものです。 React.createClass を使わない v16 で削除されたのでいわずもがな。 同様に、 createClass でしか使えなかった mixin 周辺機能も丸ごと deprecated です。 「可能な限りは」
Relicensing React, Jest, Flow, and Immutable.js
Next week, we are going to relicense our open source projects React, Jest, Flow, and Immutable.js under the MIT license. We’re relicensing these projects because React is the foundation of a broad ecosystem of open source software for the web, and we don’t want to hold back forward progress for nontechnical reasons. This decision comes after several weeks of disappointment and uncertainty for our
WordPressはReactの採用を取りやめることに（追記アリ） – Capital P – WordPressメディア
以前お伝えした通り、Reactのライセンス問題がWordPressのライセンスに影響を与えるのではないかと危惧されていたが、共同創業者のMatt Mullenwegのブログ “On React and WordPress” によれば、WordPressはReactの利用をやめることになったようだ。 I’m here to say that the Gutenberg team is going to take a step back and rewrite Gutenberg using a different library. これは特許条項を問題視したものであると同時に、Webサイトの28%を占めるWordPressにこうした複雑な問題を持ち込むことをよしとしないのが決定の理由のようである。 これにより、Gutenbergは書き直しを余儀なくされるため、おそらくはリリースが来年にずれ込
Fullstack React: React Tutorial: Cloning Yelp
As we're writing the Fullstack React book, we get a lot of questions about how to build large applications with React and how to integrate external APIs. tl;dr - This post will guide you through building a full React app, even with little to no experience in the framework. We're going build a Yelp clone in React You can get the completed code here Try the demo here Download the first chapter of ou
React死亡?React終了?～Facebookの特許事項付きライセンスの問題～ - Qiita
前書き 本記事は大幅改装中です。 下記本文は現状参考までにとどめておいてください。 Facebookは2017年9月26日リリースのReact Ver16と、jest、Flow、Immutable.jsの4プロジェクトに関しBSD+PATENTを改め、MITライセンスへ移行しました。 現状はその他のプロジェクトにおいて、BSD+PATENTライセンスが有効ではありますが、おそらくはReactに関してその影響は排除されているものと推測されます。 あくまで推測なので、確実な論拠を得てからその件は記述いたします。 この件を知った発端 QiitaでECMAScriptの最新事情を眺めていたら、Reactが有名なSNS企業のFacebookがやらかしてOSSコミュニティで村八分になっているとのこと。 どういうことか 実際にgoogleで調べてみたらその関連の記事が出ること出ること。多くは英語記事であ
Facebookの特許条項付きBSDライセンスが炎上している件について｜こんぴゅ
先月あたりから、オープンソースソフトウェア（以下、OSS）のライセンスのあり方について、Facebookを火種にして侃々諤々の議論が起こっているので解説してみる。 ASFがFacebookにNOをつきつけることの始まりは、Apache Software Foundation（以下、ASF）という著名OSSプロジェクトを多数保有する非営利団体が、Facebookが自社OSSに付加している独自ライセンス Facebook BSD+Patents license を「Category-X」リスト（禁忌リスト）に追加したことだ。 ASFプロジェクトは、Category-Xに含まれるOSSに依存してはいけない決まりがあるため、Facebook製のOSSに依存しているプロジェクトは、8月31日以降はそれらの依存を取り除いてからではないと新しいリリースが出来ない。影響を受けたプロジェクトは少なくとも C
React ＆ TypeScriptを用いた業務システム開発 - Opt Technologies Magazine
先日、オプトからFeed Terminal というツールがリリースされましたので、主にフロントエンドについての大まかな全体像と技術的な拘りをご紹介しようと思います。 あいさつ Feed Terminal とは フロントエンド設計 管理画面の要件 アーキテクチャ選定 チームへの共有 実装・設計の中身の紹介 全体像（package.json） TypeScriptとの付き合い方 reduxの使い方 開発時の動作確認の仕方 テストやlintとの付き合い方 まとめ あいさつ こんにちは。uryyyyyyyです。 社内では遊撃手的ポジションにおりまして、今回のReact ＆ TypeScript案件であるFeed Terminalでは、フロントエンドの基盤設計やUIデザインなどを担当していました。 Feed Terminal とは Feed Terminalとはデータフィードマネジメントツールと呼ば
もうReactのフォームで消耗したくないので、HoCベースのフォームライブラリを作った - wadackel.me
2017 年。React のフォームに消耗しました。 いくつか良さそうなフォームライブラリはありますが、個人的に満足のいくものが無かったので、とあるプロジェクトで実装したものをベースにしてライブラリにまとめました。 作ったもの react-drip-form という、HoC ベースで React のフォームコンポーネントを構築するライブラリを作りました。元となるコードを書いている時、「さくっとフォームの実装を済ませてゆっくりコーヒーでも飲みてぇ…」という気持ちがかなり高まってたので、コーヒーを連想させる名前にしてみました。 wadackel/react-drip-form https://github.com/wadackel/react-drip-form ドキュメントのページでは、Create React App を使った Quick Start もあるので、さくっと試すことが出来ると
Reactのサーバサイドレンダリングとパフォーマンスについてのメモ - Qiita
Reactのサーバサイドレンダリングとパフォーマンスについて調べてたのでメモ 基本的なこと サーバサイドとReactのproduction build 要約: Reactをサーバサイドで使うときも、クライアントサイドのように圧縮(というよりはcode eliminate)しないと遅い Reactはdev向けのコードを大量に含んでいる。 これはprocess.env.NODE_ENV !== 'production'の時実行されるassertや警告などが主となりproductionには必要ない。 そのため、process.env.NODE_ENV = 'production'をしないとかなり不利な結果を得る。 I tend to agree that "compiling server side code with webpack to remove access to process" i
2016年、サーバーサイドエンジニアがゼロからReact/Reduxを学習したときの方法を振り返る
こんにちは。スタジオ・アルカナのサーバーサイドエンジニアなっちゃん(@natsumican63)です。 この記事はReact Advent Calendar 2016の13日目の記事です。 それは2016年も後半へ差し掛かったある日のことでした… 上司「次の案件、この辺の技術使うから軽く勉強しておいてー」 つ React.js + Redux.js + redux-saga + Cordova + ES6 + Babel + OnsenUI + Gulp + Webpack ( ﾟдﾟ) (つд⊂)ｺﾞｼｺﾞｼ (；ﾟ Дﾟ) !?!? (; ﾟдﾟ)「…わ、わかりました」 ※「何でもやります！やらせてください！」が私の口癖なので、決して無茶振りしてくる弊社ではありませんよ！ほんとだよ！！ 斯くして2016年、サーバーサイドエンジニアがはじめてフロントエンドへの門戸を開くこととなった際の学
React.jsの知っておいて損はないTips - Qiita
React.jsでの開発を始めてから微妙にハマったポイント、また「これを早めに知っておけばもっとコードを簡潔に書けたのに・・！」という点がいくつかあったので、それらのTipsを共有します。 renderで返すComponentは単一の親でなければならない まずは入門編。Reactを始めた人は一度はエラーになったことがあるかも。 renderメソッドで返すのは単一の親のComponentであり、複数の親のComponentを返すことは出来ません。 必ず一つの親になるようにWrapしてあげましょう。 // エラーになる render(){ return( <div>aaa</div> <div>bbb</div> ); } // 正常 render(){ return( <div> <div>aaa</div> <div>bbb</div> </div> ); } renderで空を返す 子コ
webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ
はじめに こんにちは、投稿開発部エンジニアの芳賀です。 既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップできていなかったのですが、それらの状況を把握しつつ試行錯誤で開発していった経験から、できるだけ「React採用してみたいけどJavaScript界隈よくわからない目線」で書いてみようと思います。 RailsでReact.jsを使ういくつかの方法 2016年時点で、RailsでReact.jsを使う方法はいくつかあって、どれを採用するかで悩みました。 vendor/assets/javascripts にreact.jsを置いて利用する react-rails gem を利用する br
React.js in patterns
Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript. Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser Long time I was searching for a good front-end framework. Framework that will help me write scalable and easy to maintain UI. Even though React is just a library for rendering it comes with so many benefits that I can easily say
ReactJS vs AngularJS
What are we going to compare? As the time goes by, the answer to this question becomes more complicated. If we look at it from the angle of two Javascript libraries, here what we will get: a relatively small ReactJS library for building user interfaces and a comprehensive AngularJS web application development framework. Well, if it was that straightforward, most likely this article wouldn’t exist.
すべてのプログラマーが知っておきたいReactの7つの強み
JavaScriptはこの６年で大きくその地位を向上させてきました。JavaScriptは有名なサーバーサイド言語になり、オフラインファーストSPAは用語として定着し、そしてJavaScriptは他の言語のための有名なコンパイル先となりました。 JavaScriptは、ElectronやReact Nativeのような技術やハイブリッドアプリを通して、ついにはデスクトップとモバイルのプラットフォームとなってきています。 この3年でもう一つ革命が起こり始めました。FacebookのプログラマーであるJordan WalkeがReact.jsを生み出しました。Reactはそれ以来、数百ないし数千ものプログラマーのJavaScriptのコードの書き方を変えてきました。 Reactの途方もない成功の裏にはそれなりの理由があります。 1. バグが出にくいよりシンプルなコードReactはユーザーインタ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitBook – Knowledge management simplified
Rails5.0 に React、Reduxを導入して、Redux本家のTodoサンプルを動かす