Bridging the Gap Between CSS and JavaScript: CSS-in-JS | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. In this article, we’re going to dig into the concept of CSS-in-JS. If you’re already acquainted with this concept, you might still enjoy a stroll through the philosophy of that approach, and you might be even more interested in the next article. Web development is very interdisciplinary. We’re used
Cycle.jsがReactよりも優れていると私が思うこれだけの理由
いま、もっとも人気のあるReactですが、私は検討の結果Cycle.jsを選びました。Cycle.jsの概要や使い方、魅力をお伝えします。 多くの開発者はアプリ開発時になんらかのフレームワークを利用しているでしょう。フレームワークは複雑なアプリ構築の手間をなくし、時間を節約します。利用者が多いからか、最高のフレームワークや、フレームワークの何を学ぶべきかなどの話題があふれています。 Reactは現在もっとも人気のあるフロントエンドフレームワークで、大きなコミュニティもあります。支持する人もいれば、言われているほどには良くないという人もいまが、私はReactでWebアプリに対する考え方や開発方法が変わりました。 Webアプリの開発方法の検討さえせずReactを使い始めましたが、じわじわと人気が出ている新しいリアクティブ・フレームワーク「Cycle.js」を試すことにしました。そこで学んだリア
アイソモーフィックJavaScript
アイソモーフィックJavaScriptは、クライアントサイド（ブラウザ）とサーバーサイドで同じコードを実行できるようにするためのフレームワークの総称。本書では、従来のアプリケーションが持つ問題点（読み込みの遅さ、SEO対策の困難さなど）を明らかにするところから始め、アイソモーフィックなアプリケーションの分類やアイソモーフィックさの度合いについて理解したうえで、アイソモーフィックなJavaScriptフレームワークを構築するための実践手法を解説し、Walmart、Airbnb、Facebook、Netflixといった大企業がアイソモーフィックJavaScriptを選んだ理由を明らかにします。読者は、なぜこのアプリケーションアーキテクチャーが、ページ読み込み速度やSEOコンパチビリティといった、ビジネス面でクリティカルな問題を解決するためのソリューションとして人気上昇中なのかを学べます。 賞賛
How React Native works - DiscoverSDK Blog
The most basic is the cross-platform <View>, a simple and flexible UI element that can be thought of as analogous to the <div>. On iOS, for instance, the <View> component renders to a UIView, while on Android it renders to a View. Other components from the table act as platform-specific components. Like for a Datepicker, <DatePickerIOS date={this.state.date} mode="date" timeZoneOffsetInMinutes={th
ずぼらによるずぼらのための React 入門 - Qiita
この記事について Node.jsもES2015も使わないReact入門 - Qiita（以下「元記事」） に感銘を受けつつ、拙作のReact用ライブラリである rx7.jsも補助的に使ってみて欲しい、という記事です。 (以前はt7.jsというライブラリを紹介していましたが rx7.js が完成したので変更しました) ですので、元記事の React.createElement() を用いた方式を理解したうえでこの記事を読むことをお勧めします。 なお、この記事内の引用部分は特に断りがない限り元記事からの引用です。 Reactって使い始めると便利なのですが、一つ大きな問題があります そう、それは導入障壁が大きすぎること Node入れて、Babel導入してJSX/ES2015でコーディングして、タスクランナー導入してビルド自動化して、Redux導入して... 巷のReact記事を読むとこんな感じの
JavaScript(React+Flux)のディレクトリ構成がガタガタになりそうだったので反省して改善する - コネヒト開発者ブログ
こんにちは。フロントエンジニアの@ry0_adachiです。 ここのところ、React + Flux Utils *1 の構成を選択することが多く、それ以外を選択することが少なくなってきました。特に大きな不満はないし、慣れてきたので良いかもな〜と思っていたのですが、開発期間が伸びてきて、アプリ自体の規模がそこそこになってくるとFacebook公式のサンプルコードのようにシンプルな構成だけではカバーしきれない状況が生まれることもあります。運用し始めてだんだんとその辺の辛さみたいなものが見えてきたのと、継ぎ接ぎな構成になるのは嫌だったので、このタイミングで1回整理して改善してみようと思いました。 Fluxについて Facebook提唱のアーキテクチャ、またはフレームワークです。データの流れを一方向にして、シンプルに状態管理が行えることがメリットとしてよく挙げられています。Fluxについてより詳
【React】Goodpatch×TeamSpirit Meetupに参加してきた - ゆとり日記
teamspirit.connpass.com ↑のイベントに参加してきました。 （通常枠で申し込んだつもりでいたが、直前になって「ブログ執筆枠」で申し込んでいた事に気づくという阿呆ぶりを発揮。） フロントエンドエンジニア3年目。 Redux + React + Node.jsのSPA開発を1年くらいやってる。 Reactに若干飽きてる。 こんな人間から見た感想を書いていきます。 各LTの感想 ※発表者の方の資料は、展開され次第追記していきます。 LT1 Reactのパフォーマンスを改善する必要が無かった話 チームスピリットさんが開発してるプロダクトがReactで開発されていて、それのパフォーマンス改善の話を聞いた。 結論はLTのタイトルにもある通りでそこまでパフォーマンスを改善する必要が無かった、とのこと。普段から設計やコードレビューに気をつけていた甲斐もあって、現状のパフォーマンスは悪
Efficient React Components: A Guide to Optimizing React Performance | Toptal®
Efficient React Components: A Guide to Optimizing React Performance Why does a React web app run slow? The answer often lies in when and how frequently your components re-render, and whether those re-renders were even necessary. React doesn’t promise magical performance gains, but it provides just the right tools and functionalities to make it easy. In this article, Toptal Freelance Software Engin
CodeIQについてのお知らせ
2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod
React-Redux を試す - Qiita
Redux 用語 Action: 状態を変えるためのコマンド (コマンドパターン) Reducer: 古い State と Action から新しい State を作る関数 Store: action を受け取り Reducer を実行して State を返す。Store は reducer から作る。 store.dispatch(action) で store に action を送る。 createStore(reducer) を使って reducer から Store を生成する。 構成 もしかして他の react-redux プロジェクトでも使われるかも知れないのでディレクトリ構成を書く。 components: 見た目だけの静的な Representational Component (カスタム HTML タグ) を置く。 Component は props を受け取りタグを返
よく使うコードをgithubからダウンロードするコマンドラインツール - Qiita
自己紹介 じゅんじゅんと言うニックネームで、関西を拠点に活動しているフロントエンドエンジニアです。 HAL大阪3回生です。（2017/05/17現在） イベントや、勉強会に参加してるので是非お会いした際はお声掛けください！ よく使うコード、毎回書くのめんどくさい... よく使うコードとは、例えばReactを開発する際のwebpack.config.jsとかgulpfile.jsとか、環境系のコードが多いかもしれません。 このファイルは、だいたい雛形が決まっているし毎回0から書くのもアホらしいし、いちいち書き方覚えていないので、毎回自分の過去のコードをみてコピペして、今のプロジェクトのパスなどを最適化したりしていました。 しかし、なんせブラウザ立ち上げて、自分のgithub開いて。。。。など手順がめんどくさくなってきました。 コマンドラインで完結してほしい... ということで、作りました。ま
react-native-dotenv で定数を環境ごとに切り替える - Qiita
開発中、環境によって API のエンドポイントの向き先や設定を変更して動作チェックしたい、ということがよくある。 しかしながら、ReactNative では、process.env に渡されるのが基本 process.env.NODE_ENV だけで、かつ内部で development か production に書き換えているため、適当な環境変数を外部から渡して挙動を変えることが、development or production しか行えない。 そのためのアプローチの一つとして react-native-config があり、それについての詳細は以下に解りやすくまとまっている。 React Native で development, staging, production など環境を切り替える ただ、react-native-config では、あくまでネイティブ側に埋め込み、JS 側
Redux Logging in Production - LogRocket Blog
LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns. One of the greatest strengths of Redux is debuggability — by logging actions and state during an app’s execution, developers can easily understand code errors, race conditions, network errors and other sources of bugs. In local development it is standard practice to use tools like redux-logge
Idiomatic Redux: The Tao of Redux, Part 2 - Practice and Philosophy
Random musings on React, Redux, and more, by Redux maintainer Mark "acemarke" Erikson This is a post in the Idiomatic Redux series. More thoughts on what Redux requires, how Redux is intended to be used, and what is possible with Redux Intro 🔗︎ I've spent a lot of time discussing Redux usage patterns online, whether it be helping answer questions from learners in the Reactiflux channels, debating
Learn Node
The best way to learn server-side JavaScript! Learn Node!A premium training course to learn to build apps with Node.js, Express, MongoDB, and friends. Start Learning Now → Learn to build applications and APIs with Node.jsNode.js, Express, MongoDB and friends are some of the most in-demand web development skills. This course is the cumulation of everything I've learned building dozens of Node.js ap
SPAにおけるCSSについて、ひとつの解（追記あり） - エンジニアをリングする
SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日 この話を簡単にまとめておこうと思います。 結論を先に書くと「今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。 悩んでいたこと コンポーネント指向でSPAを作っていく上で、CSS（というかスタイリング）はどう書いていったらいいんだろう？ということに結構悩んでいました。 HTMLとJSがコンポーネントとしてまとまっていく中でCSSだけは今まで通り別物として扱い、BEMなどでグローバルスコープと戦うのか？はたまたCSSの枠をはみ出てJSコンポーネントの粒度に合わせたコンポーネント化をするのか？ 加えて、見た目も挙動も複雑なアプリケ
ReactNativeで理解しておくと良いReduxとMiddlewareのフローを理解する - tomoima525's blog
(5/29/2017追記 ‘必要不可欠’ とタイトルに書いていたら'必要不可欠でない'と指摘を受けました。なんらかのデータフローの仕組みは必要だけどReduxである必要はないのでタイトル修正しました) 最近ReactNativeをちょこちょこ書いています。アプリ向けのReactNativeを書くにあたって理解がのぞましいのがデータフローの仕組みであるRedux、及び様々な処理を仲介するMiddlewareです。小さなアプリをつくってみて一通り把握したので、整理も兼ねて初めてReact-Reduxを触れる時にどの辺を見ればよいかまとめてみます。 作ったのはChuckNorris FactsのJokeを検索して表示するアプリです。 github.com デモ動画 昨日のReactNativeアプリ続き。Reduxにローディングのステートも追加してみた。iOSとAndroidでも想定通り動く。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reddit - Dive into anything
hatebu.me
今、Reactでリポジトリ公開するなら、これくらいは対応しておきたい - Qiita
