Popular React Folder Structures and Screaming Architecture
Screaming ArchitectureEvolution of a React folder structure and why to group by features right away React folder structures have been debated for years due to React's unopinionated approach, leading developers to ask, "Where should I put my files? How should I organize my code?" I've researched the most popular approaches to organizing React projects: Grouping by file type like components, context
React今昔物語 - ICS MEDIA
機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜 ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜 クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん
TypeScriptの型におけるJSXサポートが100%分かる記事 - Qiita
TypeScriptはJavaScriptに静的型を付けることができるAltJSです。2015年9月に登場したTypeScript 1.6ではJSXのサポートが搭載され、.tsxという拡張子を用いることでJSXを含むコードを書いたり型チェックしたりすることができます。 JSXはJavaScriptに対してHTML（あるいはXML）のタグのような構文を導入する拡張記法です。以下の例のようにJavaScriptプログラム中に式としてタグを書くことができます（https://facebook.github.io/jsx/ から引用）： // Using JSX to express UI components. var dropdown = <Dropdown> A dropdown list <Menu> <MenuItem>Do Something</MenuItem> <MenuItem>
社内エンジニアが「デザイナーのためのReact勉強会」を開催！第1回目レポート
こんにちは！AbemaTVで開発デザインチームに所属しています、芳賀です。 プロトタイピングツールが多様化する昨今、 最近FramerがFramer Xにバージョンアップし、話題になりましたね。 Reactを使ったコードベースのプロトタイプが作れるとのこと。 先日、弊社のslackチャンネル「UI広場（UIについての雑談などを話すチャンネル）」にてエンジニアさんが一言（いや、二言） この問いかけに対して、複数のデザイナーから開催要望が上がりました。 そんなやり取りをきっかけに、「デザイナーのためのReact勉強会 #1」が開催されることに。 第1回目の今回は「React基本のキ！」 勉強会の様子、当日の流れなどを簡単にレポートします。 エンジニアさんの好意により開催されることになった社内React勉強会。 コードに苦手意識のあるわたしは 「React…？（ぶるぶる」 という心境でしたが、少
Rails+ReactなSPAサイトでSEOをしようとしてぶつかった壁 - オウチーノ開発者ブログ
Rejectcon 2018 レポート記事 こんにちは。オウチーノ吉川です。 去る9/29にRejectconで「Rails+ReactなSPAサイトでのSEO」について登壇してきました。 SPAサイトでSEOを行う際にぶつかった壁と、それをどのように乗り越えていったかの経緯をご紹介しました。 ちょっと内容詰め込みすぎて途中途中端折ってしまったのと、発表後にもいろいろ質問などをいただいていたのであわせて補足しながらご紹介します。 発表資料はこちらです。 なぜ経緯を紹介したのか？ 昨今のフロントエンド技術の進化速度は非常に速く、どんどん新しい技術が登場しています。 記事などでどういった技術が登場しているのかは抑えているが、実際に全てちゃんと触ってはいないという方も多いのではないでしょうか。 SSRをするためにはreact-railsやhypernovaがある、ということを知っているだけでは、
Redux vs. The React Context API
👋 Hey! If you have a subscription to egghead.io you might enjoy my course on the Context API over there. It's only about 35 minutes long and covers a lot of ground: how to manage state with Context (without Redux), patterns for structuring your code, how to display notifications, testing, performance. All in real-world scenarios. React Context for State Management React 16.3 added a new Context A
ゼロから始める TypeScript対応 Reactボイラープレート入門（前編） – FiNC Tech Blog – Medium
はじめまして。7月から業務委託として、FiNCのサーバーサイドエンジニアを担当している@yhirano55です。最近、来年3月に開催予定のRails Developers Meetup 2019の準備を始めました（次回は3トラック同時で進行する予定です）。 本記事では、Railsエンジニア向けに npm initから始める、TypeScript対応の Reactボイラープレートの作り方を紹介します。チームや組織で共通するボイラープレートがあると、SPA（Single Page Application）を量産する際に生産性が爆速になるのですが、ちょうど最近、Reactボイラープレートを作る機会を得まして、その過程で得られた試行錯誤を記事としてまとめてみました。 モチベーション Ruby on Railsを通してフロントエンドの実装をしていると、各種設定は、webpackerを使って簡単（暗黙
Reduxが分からない人のためにReduxを概念から説明してみる - Qiita
TL;DR 要点だけ知りたい方は、最後の方だけ読めば大丈夫です。 背景:Reduxが全然わからないのでちゃんと勉強した 開発現場にReduxを導入しておきながら、チーム全員が「全然分からない。俺達は雰囲気でReduxをやっている」状態だったので、本腰入れてドキュメント読みました。基本を押さえたら一気に見通しが良くなったので、説明します。色々なサイトやドキュメントは明らかに冗長な説明多いので、極限までエッセンシャルを絞って説明することで、ゼロ知識からでもある程度、理解できるレベルの説明に落とし込むことに挑戦しました。うちの開発チームで知見として残すために作成したものですが、需要がありそうかなと思ったので、公開します。需要がなければすみませんでした。おかしな点があれば、まさかりお待ちしております。 今回は、公式ドキュメントのBasics辺りの話まで。 Reduxの主な登場人物 Reducer
Reconciliation – 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 and include live examples: Preserving and Resetting State React provides a declarative API so that you don’t have to worry about exactly what changes on every update. This makes writing applications a lot easier, but it might not be obvious how this is implemented withi
ReactNativeでイラストアプリを作った時の感想まとめ - Qiita
概要 前々からReactNativeに興味があり、いつか気合入れたアプリ1つ作って感触を確かめてみようと思っていた。 今回ようやく1つアプリを作ることができたので、色々良い点、つらい点をまとめていこうと思う。 成果物 イラスト閲覧アプリ 最初にまとめ 良い点はもう色々な人が大体まとめて新鮮味が無いと思うので、さらっと書く 想像していたよりも要求通りの機能が実装できた コード変更後の更新が早いし楽 開発ツールが充実している Command + Rキー押すだけで即時反映できるのすごい Reactで組める データバインディングのフレームワークが標準で用意されてるような環境 Androidはデータバインディングライブラリが用意されてるが、iOSには無いのでこの環境は嬉しい CSSの知識で組めるレイアウトが便利！ ボーダーや角丸表現は圧倒的にやりやすい flexは慣れるとスムーズに組める リスト表示
React v16 changes
Reactのv16がリリースされたので、変更点などを整理したいと思います。 https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html https://code.facebook.com/posts/1716776591680069/react-16-a-look-inside-an-api-compatible-rewrite-of-our-frontend-ui-library/ React v16やReact Fiberについては、下記で書いたりもしているのでそちらも参考にしてみてください。 React Fiber現状確認 Capability of React Fiber React v16 and beyond React Fiber ReactはなぜFiberで書き直されたのか？Reactの課題と将来像を探
新規Railsアプリに小さく導入するReact - Speaker Deck
dotsで開催されたReactの導入を検討されてる方向けの勉強会でお話しました https://eventdots.jp/event/597088
あのライブラリは何故誕生したの?のまとめ - Qiita
はじめに 最近、フロントエンドのライブラリ乱立問題について盛り上がってました。 自分はnobkzさんの以下の文に全てがまとまっていると思います。 僕の最初の違和感は、「技術的な流行り」に乗ることに何の価値があるのだろうか?ということである。もちろん、最新のツールやフレームワークはより何かが良くなってるかもしれない。しかし、 それをあなたのプロジェクトで採用するには何の価値があるだろうか? 「最近のフロントエンドへの違和感 - nobkzのブログ」より 裏を返せば、新しいライブラリの内容、特に「どのような問題を解決するためにこのライブラリが生まれたのか」という思想を把握しておくことは重要だと言えます。 つまりは、 "How?(ライブラリの使い方)" よりも "Why?(なぜそのライブラリが必要なのか)" を学んでおこう ということです。この記事では どのような既存の問題・要求を どう解決して
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を書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webpack4 + React スタートアップ（create-react-app を使いたくない） - Qiita
React Studio