Remote ContainersでReactのDocker開発環境を構築 - Qiita
概要 更新内容 ※emvファイルをdocker-compose内に変更しました。 環境 React TypeScript storybook DockerImage node:13.12.0-slim 開発環境は下記のリポジトリにあるのでお好きに使って下さい。 react-docker-development-environment そのままpushをすると、私のリポジトリの内容が変更されてしまうので、pushとかは自分のリポジトリを作成して行って下さい。 使用して気に入ったのなら☆を付けてくれると励みになります。 前提 Docker いまさらだけどDockerに入門したので分かりやすくまとめてみた 自分はWSL2＋Docker for windowsで環境構築しました Windows環境のWSL2とDockerのある開発環境構築メモ2020/06 Remote Containers VS
Webpackを一歩一歩確実に理解してReact + TypeScript環境を作る (2022/10/31 追記) - Qiita
2022/10/31 追記 2022年時点ではWebpackでReactの環境を構築するより、Viteを用いて環境構築するほうがメジャーになっています。 筆者としても新規開発するならWebpackより、Viteの方で構築することをおすすめします。 ViteではReactのビルド用設定はPluginとしてパッケージされており、Webpackのように設定が必要ではありません。 下記はWebpack v4の話であり、すでに過去の物となっています。 ※自分のブログに投稿したのものと同じです。 https://mr-ozin.hatenablog.jp/entry/2020/06/20/043243 動機 毎回 npx create-react-app で React アプリを生成していて Webpack の勉強から逃げていたが、いい加減向き合いたいと思ったため。 昔 Webpack に入門しようと
iOS NativeからReact Native に乗り換えた Shopify の話聞いてきた - tomoima525's blog
"最も使われているサービスのひとつを iOS Native から React Native に作り変えた" というアナウンスメントを出し話題となった Shopify で、まさにその内容を扱った React Native の meetup があり、参加してきたので内容と所感をまとめました。 React Native is the Future of Mobile at Shopify 発表内容 検証/導入フェーズ 技術スタック React Native がもたらした効果 途中でやめたこと 追加で登壇者に聞いたこと その他の発表 React Native for Web @twitter その他もろもろ React Native is the Future of Mobile at Shopify React Native で書き換えた話はしばらく前にアナウンスしていたのですが、Shopify
ライブラリのコードを読み解くNo.1 <Redux createStore編> - Qiita
はじめに ライブラリのコードを読み解いて、より深くライブラリについて理解するという記事です。 今回は状態管理のためのライブラリであるReduxのcreateStoreについて記載します。 この記事で説明すること ReduxのcreateStoreのソースコードの説明 この記事で説明しないこと Reduxのコンセプトや概要の説明 createStoreの使用方法やサンプルコードの解説 Reduxの概要を説明した記事はいろいろあるかと思いますので、公式サイトやいろいろな解説記事を見ていただくのが良いと思います。 個人的には、Reduxのco-maintainerであるMark Erikson氏によって書かれたこちらのスライドがわかりやすかったです。 対象読者 Reduxのコンセプト説明などのページを見て概要はなんとなくはわかっている人 ReduxのAPIを使用したことがある人 ライブラリバージ
いつ ReactNative を使っても大丈夫か - mizchi's blog
AirBnb がReactNativeをやめることが話題になってますね。 medium.com RNの未熟さ、社のRNのForkのメンテナンスコスト、JavaScriptのスケールのしなさ、JavaScriptCoreの実装の違い、クラッシュレポートが信頼できない、開発者は主に片方のプラットフォームしか知らないのでOSSのライブラリはバグってる、結局ブリッジを描く人間が必要、人が雇えない、山ほど出てくる…— Hello (@rejasupotaro) 2018年6月19日 以下私見です。 RN採用可否のフローチャート 自分がRN使いたいといって相談された際にはこういう感じで返してます。基本的にはExpo 採用可能か否かで判断してます。 Expo ではじめる ReactNative 開発環境 - Qiita プラットフォームごとにUXを突き詰める必要がある => RN やめとけ Q: 社内に
React Nativeとは何か？ 基本の仕組みと使いどころを理解する
WebブラウザとAndroid、iOSが、アプリの動作環境としてそれぞれ市民権を得た現代では、サービスを1つ作るだけでも、各プラットフォームに対してアプリを提供することが当たり前のように求められます。本連載では、この問題に立ち向かうため、ReactとJavaScriptによるWebアプリケーション開発に近いお作法でAndroidやiOSのアプリ開発ができるツール「React Native」を紹介します。まずは、React Nativeというツールがどういった仕組みで動いているのか、また、どういった分野に向いているのかを解説します。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 Androidアプリ開発の経験者 iOSアプリ開発の経験者 前提環境 本記事の内容は、React Native v0.57.4の実
React Native製アプリのクオリティを上げるために工夫した事
React Native製アプリのクオリティを上げるために工夫した事InkdropというMarkdownノートアプリを一人で作っているTAKUYAです。最近、React Nativeを使って、iOS版とAndroid版の新しいバージョンをリリースしました。React Nativeは、JavaScriptとReactを使ってクロスプラットフォームなモバイルアプリが開発できるフレームワークです。 どうすればReact Nativeでハイクオリティなアプリが作れるのか、今回の開発を通して多くのことを学びました。本稿では、よりよいアプリを作るために自分が工夫したことをシェアします。既にReact Nativeでアプリを作っている方も、これから作ろうと思っている方も参考になるかと思います。 OSSライブラリは慎重に選ぶネイティブ拡張モジュールは出来るだけ使わないUIテーマの対応タブレットの対応動作を
Electron + React with Babel + Webpack でアプリ開発 〜環境構築編〜 - 適当おじさんの適当ブログ
はじめに Electron + React なデスクトップアプリケーション開発の準備時に調べたことのメモです。Yarn, Electron, React, Babel, Webpack の概要と簡単なサンプルを記載しています。これらのライブラリ・ツールの実態がつかめずに抵抗感を抱いている方向けの内容となっています。最後に簡単なサンプルを掲載していますが、実装関連の深堀りはしていません。また、動かすことが目的なので、各ツールの込み入った設定については触れていません。 それぞれのバージョンは以下の様になっています。バージョンが違う場合は適宜読み替えてもらえればと思います。 ツール・ライブラリ バージョン Yarn 1.7.0 Electron 2.0.2 React 16.4.0 Babel 6.26 Webpack 4.10.2 パッケージマネージャの導入 Electron + React
React + Redux + Firebaseで作るTodo App - Qiita
最初に 先日、フロントエンジニアが今話題のFirebaseについて語りたいという記事を投稿しました。 予想以上の方にストック頂き、とても嬉しい反面驚きがすごいです。 改めてFirebaseは注目されてるサービスで、サーバーレスアーキテクチャはフロントエンドエンジニア & アプリ開発者の夢なんだなぁと実感しました。 ポエミーで長い記事になってましたが、 設計&具体的な実装については一切触れていなかったので、その辺りを書きたいと思います。 まだまだ勉強中の身のため、ご指摘いただけると幸いです。 アプリ構成 React.js (UI) Redux (データフロー) Firease (ホスティング + データベース) でTodo Appを作りたいと思います。 キモは、 Firebaseのデプロイ データベースと連携 です。 React + Reduxで作るのはスキルセットがそうなのに加えて、Red
新QiitaでReactをやめてhyperappを採用した背景 - Qiita
12/1 に Qiita のトップページをリニューアルしました。これまで React を使っていましたが、それをやめて hyperapp を採用しました。まわりを見てもあまり採用事例が見当たらないので、この記事では一体なんで今をときめく React ではなく hyperapp を選択したのか、どういうところが魅力的なのかについて プレゼンテーション層を実装するためのツールとして 学習コスト の観点から書きたいと思います。なおこの記事に書かれていることは全て個人の感想であり、はっきりいって個人の日記レベルです。 それと hyperapp の開発者が社内にいるという事情もあるので、そこら辺さっぴいて読んでください。 TL;DR プレゼンテーション層を実装するためのツールとして React は機能過多だし、機能不足 hyperapp は過不足ない 学習コスト 仮想 DOM は学ぶ価値のある知識
2週間半のReact Nativeアプリ開発を振り返る - c-bata web
React Native+Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~ 作者: 松澤太郎出版社/メーカー: マイナビ出版発売日: 2018/08/29メディア: 単行本（ソフトカバー）この商品を含むブログを見る ここ2週間ちょっとReact NativeでiOSアプリ書いてました。 サーバサイドをメインでやってきた自分にとって面白い技術で、今後も趣味で使ってみたいなと思えているのでTipsや所感を残しておきます。 目次 選定理由 Tips エラーハンドリング・状態管理 入力欄をキーボードの出現に合わせて動かすアニメーション 今回使ったライブラリ react-native-focus-scroll react-navigation react-native-vector-icons react-native-camera react-native-vid
【2018年版】React NativeでiOSアプリを作ってストアでリリースしてみた - Qiita
はじめに [React Native](React Native | A framework for building native apps using React)での開発が全体的にどんな感じか掴みたかったので、小さなアプリを開発し、App Storeでリリースしてみました。 プロジェクト作成からストアでのリリースまでの間、開発中に出てきたテーマを振り返ってみます。（React Nativeの概要や特徴の解説については、他の方の記事をご覧ください。） 今回の一連の開発を通して、現段階ではネイティブ側（Xcode）を触らないといけない場面がちらほらあるということが分かりました。 ※記事執筆時点のReact Nativeのバージョンは0.43です ※2020年に別のアプリを作った記事を投稿しました【2020年版】 React NativeでiOSアプリを作ってストアでリリースしてみた -
たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソ API と， Redux-Saga とかいう宗教がありました という考古学です — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro To React - React Example: Todo List · Redux 「チュートリアルそれぞれ一周した！Reactは何とか理解できたが，Reduxがさっぱりわかんねぇ！」 ぐらいの人向け。自分
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigiAI-enhanced description This document summarizes a presentation about React Native given at DroidKaigi 2017. It discusses how React Native allows building native Android and iOS apps using React by rendering UI components to native platform views. It describes how React Native maps React components to native platform views, implements native modul
会社のサーバサイドエンジニアにReactとかReduxのことを説明する資料 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 筆者が、会社のサーバサイド(以下SS)エンジニア(Rails)に社内実績のあまりないReactとかReduxのことを説明する資料です。 この資料の方針 多少 嘘 を教えてでもとりあえずわかった気になってもらう 概念の解説にフォーカスする (2より) 具体的なコードを記載しない (2より) 出来るだけ図解する 主観/偏見に満ちている可能性をきにしない 書いてないこと ReactやReduxにまつわる歴史・経緯・なぜ選ぶのか virtual dom Flux 具体的なコーディング react-reduxの細かいこと/詳しいこと 真面目に勉強
2016年、サーバーサイドエンジニアがゼロからReact/Reduxを学習したときの方法を振り返る
こんにちは。スタジオ・アルカナのサーバーサイドエンジニアなっちゃん(@natsumican63)です。 この記事はReact Advent Calendar 2016の13日目の記事です。 それは2016年も後半へ差し掛かったある日のことでした… 上司「次の案件、この辺の技術使うから軽く勉強しておいてー」 つ React.js + Redux.js + redux-saga + Cordova + ES6 + Babel + OnsenUI + Gulp + Webpack ( ﾟдﾟ) (つд⊂)ｺﾞｼｺﾞｼ (；ﾟ Дﾟ) !?!? (; ﾟдﾟ)「…わ、わかりました」 ※「何でもやります！やらせてください！」が私の口癖なので、決して無茶振りしてくる弊社ではありませんよ！ほんとだよ！！ 斯くして2016年、サーバーサイドエンジニアがはじめてフロントエンドへの門戸を開くこととなった際の学
React + Redux + TypeScript でWebアプリを作った感想・勉強法と Angular との比較 - Qiita
作ったもの 成果物は Alcatraz を便利に検索する Alcatraz Search という web アプリを開発しました を参照ください。 ソースコードは starhoshi/AlcatrazSearch にあり、 GitHub Pages で公開 されています。 今回作るためにした勉強や開発の感想、 React と Angular の比較などをつらつら書いていきます。 多少なりともフロントの心得がある人向けで、あまり説明的ではない内容です。 フロントエンド開発経験 2015年7月くらいから業務で Angular, TypeScript, Browserify, gulp やらで Cordova 製のスマホアプリを開発。 半年ちょいのニワカです。 AlcatrazSearch は仕事終わりと土日に開発して 1 ヶ月かかった。 勉強のための開発なので、期間は目安といった感じ。 あと業務
React with Reduxによる大規模商用サービスの開発 / nodefest2016
東京Node学園祭2016で話したブッキングテーブルのやつ
WebエンジニアがReact Nativeでアプリをリリースしてみた
Coiney窓口をリリースしました。Coiney（スマートフォンやタブレットを使ったクレジットカード決済サービス）のサポートに特化したアプリです。 盛り過ぎ注意数年前のアプリケーション開発は、アプリのインストールというハードルによって、ブラウザで完結するWebアプリケーションが主流でした。しかし、最近はユーザーの学習によってアプリのインストールのハードルが下がりました。そこで出てきた考え方がアンバンドリングです。 １アプリに対して１機能。盛り込まないことによって、ユーザーに対して迷いのないUI、開発者に対して開発／運用のシンプルさを提供することができます。Facebookがメッセンジャーアプリを本体から切り離したのもその一例だと考えられます。 私たちはアンバンドリングの考え方に則り、既存のアプリを決済部分にフォーカスしました。申し込み／ユーザーサポートにフォーカスしたアプリがCoiney窓
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactで学ぶ！いまどきのWeb開発
