Reactでタブ機能を実装 - 珈琲駆動開発
以下を参考にしてReactでタブを実装します。 https://toddmotto.com/creating-a-tabs-component-with-react/ Componentのデザイン 以下のようなComponentを作成することを目指します。 <Tabs> <Pane label="Tab 1"> <div>This is my tab 1 contents!</div> </Pane> <Pane label="Tab 2"> <div>This is my tab 2 contents!</div> </Pane> <Pane label="Tab 3"> <div>This is my tab 3 contents!</div> </Pane> </Tabs> 実装 タブ タブの部分のComponentを作成します。 const Tabs = React.createC
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.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で空を返す 子コ
ReactとAngular2の選択で迷ったときに考えたいこと - Qiita
まえがき 最近社内でLT大会がありまして、Angular2について発表したのですが（正式リリース直前でしたが）、結構内容的には、React vs Angular2みたいな内容になってたので、『（私が）ReactとAngular2の選択で迷ったときに考えたいこと』としてちょっと記事にしてみました。 ※1 この記事はあくまで両者を触ってみた『個人的な感想』になりますのであしからず。 ※2 そして、この記事は2016-09-18の時点での内容になります。 Reactはライブラリ、Angularはフレームワーク Reactが出始めた頃にはよく比較されることの多かったAngularですが、それは両者が似たような時期に盛り上がってきており、それでいてDOM周りの問題解決で謳っている機能がそれぞれちょっとずつちがっていたからかなと思っています。（それぞれDOMの構築とデータバインディングについての機能を
ReactとD3.jsの組み合わせで変わる！JavaScriptアニメーション開発
人気のデータビジュアライゼーションライブラリー「D3.js」をもっと使いやすく、便利にするために。Reactを使ったコンポーネント化に取り組み、リアルタイムで描画されるアニメーションを作ります。 D3は最高です。Webのデータビジュアライゼーション分野におけるjQueryのように、考えられるあらゆることが実現できます。 オンラインで見られる最良のWebのデータビジュアライゼーションの多くがD3を使用しています。D3は素晴らしいライブラリーですが、最近のv4のアップデートで従来よりさらに安定性が増しました。 Reactと一緒に使えば、D3はさらに便利になります。 ちょうどjQueryのように、D3は高性能ですが課題もあります。データビジュアライゼーションが大規模になればなるほど、用いるコードは複雑になり、バグを修正したりアイデアを絞り出したりするのにさらに時間がかかるようになります。 しかし
クラウドワークスで寿司を食べさせてもらうついでに、React+Reduxの導入状況について聞いてきた
クラウドワークスが、 社外のエンジニアに寿司をおごる企画をやっている というのを見かけて、寿司がタダで食べられるなら良いなと思い、なにも考えずに申し込んでみました。 1 選べる!寿司ランチ この企画は、寿司を食べながら対話するエンジニアを指名できるシステムになっています。筆者は、最近案件で使ったReact+Reduxや、RailsとReactを組み合わせて使うことに興味があったため、また、最近子供が生まれてリモートワーク制度を活用していたということで、そのあたりにも興味があり、 suzan2go さんを指名しました。suzna2goさんは、クラウドワークスの中でも、 Reactの普及にとくに熱心 なエンジニアだそうです。 寿司 こちらがクラウドワークスで提供していただいた寿司になります。 筆者もたまに出前する銀のさらの寿司 ごちそうさまでした。なお、お茶は出なかったので、ハックルベリーさん
全力で大きくなるReactのコードをスタイルガイドに沿って見直したら、大変勉強になりました | Wantedly Engineer Blog
Wantedlyでは今年に入って、Reactの導入や、webpackの導入によるビルドプロセスの変更、CoffeeScriptからJavaScriptへの変更など、フロントエンドの開発環境が大幅に変更されました。このあたりの話は高松の記事に詳しく書かれていますが、よりリッチなUIを効率的にチーム開発できるようになり、とてもいい変化でした。 コードの質にばらつきがReact導入時は、一つのチームだけReactの開発を行っていたのですが、複数チームが独立して開発するようになると、同じReactのコードでもチームごとに雰囲気の違うコードが出来上がっていました。 ここは括弧を付けるべきなのか、このインデントは好ましいのか、ここはSyntac Sugerを使ったほうがいいんじゃないかなど、疑問点がある度にチーム間で確認をとるのは大きなコストになるため、どこまで指摘するかはチームのレビュアーに依存して
今からでも読んでおきたいReact.js入門資料12選
Facebookが提供しているJavaScriptライブラリ・React.jsは「Yahoo!」「Airbnb」「Reddit」「Netflix」などで採用されています。 日本でも注目され始めているので、React.jsを使ってみたい方は多いのではないでしょうか。 これからReact.jsを学ぶ方の参考になるReact.jsの入門資料（サイト・記事・スライド）を12個ご紹介します。 他のJavaScriptフレームワークからReact.jsに乗り換えようか迷っている方の参考になる資料も紹介しています。 React.jsの学習の参考になるサイト・記事 今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference / HTML5 Expert.jp https://html5experts.j
いまさら聞けないReact、Virtual DOM、JSX超入門
Reactとは――その3つの特徴 「React」はFacebookが公開している、ユーザーインタフェース（以下、UI）を効率的に構築することを目的としたWebフロントエンドフレームワーク（JavaScriptライブラリ）です。 Reactには、次のような特徴があります。 シンプル Reactを使ってUIを実装すると、「アプリケーションがどのように見えるか」を単純に表現できます。 叙述的 コンポーネントの状態がReactによって管理され、データに変更があるときには更新の必要があるコンポーネントだけ更新されるようになります。そのため、効率的にレンダリングさせることができます。 コンポーネントベース 「状態」の管理がカプセル化されたコンポーネントを使って、複雑なUIを構築することができます。コンポーネントの組み合わせでアプリケーションを構築することにより、コードの再利用やテストなどを実施しやすく
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - brillout/awesome-react-components: Curated List of React Components & Libraries.
Reactで「Hello world」 – React入門 - to-R Media