As we enter into the new year(2017), I wanted to pause from writing posts on stuffs that excite me like developing something new like some React app or learning and trying out some super awesome library like GraphQL etc and just go few steps back and focus on unit testing and TDD. Not exactly a New Year resolution but something I am going to force myself into doing more from here on wards. Testing
ReactNativeでアプリを作る時の個人的な最小構成はいわゆる垂直分割の構造だったが、大きめの規模になることがわかっている場合は最初から水平分割の構造で作るのもよいと思う。 GitPointを参考にして考えてみた。 具体的にはこんな感じ。 index.ios.js index.android.js App.js root.reducer.js root.store.js routes.js src |__components |__api |__config |__utils |__containers |__home |__home.action.js |__home.reducer.js |__home.type.js |__screens |__index.js ページ単位でディレクトリを切って、その中にredux関連のファイルとページ関係のファイルをまとめる。 ヘッダーとかボタ
React Native is introducing a new way to manage navigation state in your application: navigation components now talk to reducers instead of storing navigation state internally. Check out examples in the RN repository to get a feel for what it’s like to use these new components. You can grab the code for this example here June 30, 2016 Update We’ve refactored reducers and actions into a separate pa
概要 Microsoftが開発したAltJS (みんな大好きVSCodeと相性がいいよ！) 静的型付けとクラスベースのオブジェクト指向 JSの大規模開発に対応するために設計 JSのスーパーセット(上位互換)で コンパイルすることでJSにトランスパイルできる 何が嬉しいのか コンパイルで事前に怒られるのでエラーが一目瞭然 (JSのエラー追うの辛い) コードの影響範囲の抽出が容易なため変更に強い 型が付くことでメソッド・変数の意図がわかりやすい 型と付くことと、自然と行儀の良いコードになることで可読性向上 エディタの補完機能が強い (VSCode) 型推論によって初期値の型を採用してくれるため慣れてなくても書きやすい 基本の型 公式：Basic Types // Boolean let isDone: boolean = false; // Number let decimal: numbe
Expoを使っていたReact NativeのアプリでNative Modulesを使うためにdetachする - ぽっちぽちにしてやんよ
こんばんは，ぽちです． Expoを使って開発をしていたら，途中でどうしてもNative Modulesを使いたいというケースが出てきます． その場合はdetachする必要が出てきます． detachした後はXCodeやAndroid Stuidoで自分で管理する必要が出てきますので，その辺りよく考えてからdetachの道へ進むことをオススメします．うちは極力detachの道へ進みたくありません． detachした後でもXDEで起動とかXDEからPublishとかは出来ます． Publishは出来ると言っても，Nativeの部分はケアされないのでその部分は動きません．（クラッシュするでしょうね） それでは，detachの流れを追いましょう． 基本的には Detaching to ExpoKit に沿ってコマンドを実行して行けばdetach出来ます． 初めに，exp コマンドが必要なので，入れ
GitHub - AlexanderZaytsev/react-native-i18n: React Native + i18n.js
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
以下のリンクは公式リファレンスです。 Gettting Started Node, Watchmanのインストール Homebrewを使用してNodeおよびWatchmanをインストールすることをお勧めします。 Homebrewをインストールした後、ターミナルで次のコマンドを実行します。 $ brew install node $ brew install watchman Nodeをインストールしている場合は、それがバージョン4以上であることを確認してください。 React NativeCLI(コマンドラインインターフェイス)のインストール Nodeにはnpmが付属しており、React NativeCLIをインストールできます。 $ npm install -g react-native-cli JDKのインストール androidアプリを動かすためにはJavaの開発環境が必要になるので
![react-native androidの開発環境構築方法 [Mac版] - Boostnote](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6eae1084cd416142f7369af9293892b782885f0/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fj%2Fjunp0819%2F20171220%2F20171220184816.png)
GitHub - deepsyx/home-automation: Raspberry Pi 3 based home automation with NodeJS and React Native.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - KodersLab/react-native-for-web: A set of classes and react components to make work your react-native app in a browser. (with some limitations obviously)
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - tiaanduplessis/awesome-react-native-talks: :sunglasses: A curated list of talks about React Native or topics related to React Native
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
React Animations in Depth
5 Options for React Web Animations, and which of these are cross-platform. In this post, we will look at the following ways to create React animations:CSS Animations based on React component stateJS Style animations based on React component stateReact Motion by Cheng LouAnimatedVelocity-ReactTo view the repo for this project, click here. Bonus: At the end, I will also show how to implement animati
GitHub - airbnb/native-navigation: Native navigation library for React Native applications
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
2024Use a framework to build React Native appsReact Native 0.74 - Yoga 3.0, Bridgeless New Architecture, and more2023React Native 0.73 - Debugging Improvements, Stable Symlink Support, and moreReact Native 0.72 - Symlink Support, Better Errors, and morePackage Exports Support in React NativeReact Native 0.71-RC0 Android outage postmortemReact Native 0.71: TypeScript by Default, Flexbox Gap, and mo
関連リンク ReactNativeプロジェクトのAndroid環境を整備する - クックパッド開発者ブログ 天才たちの日課: クリエイティブな人々の必ずしもクリエイティブでない日々 - amazon.co.jp Google、タスク管理アプリ「Google ToDo リスト」公開 - ITmedia NEWS Our Future, Wunderlist Joins Microsoft It’s almost time to say goodbye - Sunrise Spaces ソーシャル・ネットワーク 10. 『君の名は。』特典映像と、自尊心に釣り合う成果（15:52）- yome.fm @mosafmhq
この本の概要 リッチなUIを構築可能なJavaScriptフレームワークとして，React，Angular，Vue.jsや，さらにiOSやAndroid向けのネイティブアプリを作ることができるReact Nativeが幅広く利用されるようになりました。フロントエンドエンジニアやデザイナーにとって少し難しく感じられることもあるこれらは，SPA（Single Page Application）と呼ばれるリッチなWebアプリやネイティブアプリを実現可能にする技術として，欠かすことのできない存在になっています。本書では各フレームワークを入門記事とSlackライクなサンプルを作りながらの解説でわかりやすく解き明かします。 こんな方におすすめ React，Angular，Vue.jsなどのフロントエンド系JavaScriptフレームワークを使用したい，または使用しているエンジニア jQueryの経験が
If you're tired of spinning your wheels learning Swift or Android, this is the course for you. Authentication? You will learn it. Hooks? Included. Navigation? Of course! This course will get you up and running with React Native quickly, and teach you the core knowledge you need to deeply understand and build React components for mobile devices. Both OSX and Windows supported - develop iOS or And
If you are developing with ReactNative and have not tried LayoutAnimation yet, you are missing out. Coming to ReactNative as an iOS developer, I was worried about losing the convenience of CoreAnimation. UIView animations are so nice; set the desired view properties and go. ReactNative’s Animated API works similarly, but requires a state property for each desired animation. For complex views this
GitHub - atticoos/MagicMirror: :crystal_ball: ReactNative smart mirror project
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Blog · React Native
At React Conf, we updated our guidance on the best tool to get started building React Native apps: a React Native framework - a toolbox with all the necessary APIs to let you build production-ready apps. Using React Native frameworks, such as Expo, is now the recommended approach to create new apps. In this blogpost we want to walk you through what they are in detail and what they mean for you as
Redux: Using withRouter() to Inject the Params into Connected Components
非iOSエンジニアがExpoのReact Native(CRNA)で作ったアプリを初めてAppleに申請するまで - Qiita
最強のねこ21 21の数字を言ったら負けなミニゲームです。よければ遊んでみてください🙇 🍎iOS 🚩Android はじめに 対象者 React Native(CRNA)で作ったアプリをはじめてAppleに申請する人 Androidも申請しましたが、はまるところがなかったので最後にちょこっと記述しています 話さないこと React Nativeでアプリを作る方法 話すこと アプリが完成しAppleに申請するまで Expoとは ReactNative開発補助ツール https://expo.io/ CRNA(create-react-native-app) ローカルに開発環境作成 Expo Snack React NativeをWeb上で簡単に体験 Expo XDE iPhone、Androidのシミュレート 参考：ExpoでReact Nativeアプリを開発するメリット5選 ビル
React Nativeへ地図を表示する方法
概要React Nativeで地図を表示して、現在の位置情報を表示する方法について調べてみようかと思っています。React Nativeで地図をコントロールするためにはReact Nativeコミュニティーのreact-native-mapsライブラリを良く使っています。 今回のブログではreact-native-mapsを使ってReact Nativeで地図を表示して、現在の位置情報を地図の上に表示する方法について調べてみます。 このブログで紹介するソースコードはgithubで確認することができます。。 github: react-native-map-example例題ソースコードは下記の内容が適用されています。もっと詳しく知りたい方は下記のリンクを参考してください。 typescriptstyled-componentsroot-importReact Nativeで現在位置情報を取
Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it straightforward for you. Expo projects Upgrading your Expo project to a new version of React Native requires updating the react-native, react, and expo package versions in your package.json file. Expo recommends u
Image · React Native
A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll. This example shows fetching and displaying an image from local storage as well as one from network and even from data provided in the 'data:' uri scheme. Note that for network and data images, you will need to manually
以下の2つについて。 アプリ内で出す画像 App Icon XCode慣れしてないフロントエンドエンジニア向け。 アプリ内で出す画像 なんとまあ以下のコードが動く。 import Icon from './icon/foo.png'; <Image source={Icon} /> `import() | require()`で画像ファイルが読める・・！ スタイルは他と同じく当てればいいです。 ちなみにファイル名にも注意が必要。 上の例みたく`foo.png`でアクセスしつつも実体のファイルとしては、`foo@2x.png`とかできます。 解像度の調整はファイル名でやるし、`foo@20x.png`とかにすれば1/20サイズで表示できます。 App Icon プロジェクトのツリーViewにある`images.xcassets`から。 `AppIcon`ってのがあるので、必要な画像をドラッグ
はじめに ReactNative で、 npm モジュールを利用する場合、次のように react-native link コマンドを実行する必要がある場合と、ない場合があります。link は一体なにをやっているのでしょうか？ # link が不要 $react-native install hoge --save # link が必要 $react-native install hoge --save $react-native link hoge link が必要な場合 link がどんな場合に必要なのかは、 ReactNative の LinkingLibraries に記載されています。 All the libraries we ship with React Native live on the Libraries folder in the root of the reposit
Over the coming months, there will be many more components following this path to a leaner core. We're looking for help with this — head over to the lean core umbrella to pitch in. 👩🏽💻 CLI improvements React Native's command line tools are developer's entry point to the ecosystem, but they had long-standing issues and lacked official support. The CLI tools have been moved to a new repository,
引き続き@Nkznさんをゲストに迎えて、ReactNativeのリリース、ReactNativeの大規模リファクタリング、ReactNative for Webなどについて話しました。 podcast feedを購読するか、DLしてお楽しみ下さい。 Show Notes:React Nativeの光と闇について喋ってきました #上越TechMeetup - ナカザンドットネットState of React Native 2018 · React Nativenecolas/react-native-web: React Native for WebReact Native for Webをプロダクションで使ってみました - WaterCell Developer’s BlogTypeScriptAnnouncing TypeScript 3.0 RC | TypeScriptUsing T
GitHub - nitaliano/react-native-mapbox-gl: A Mapbox GL react native module for creating custom maps
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Write React Native Apps in 2017 Style With MobX | {callstack}
World-class experts who drive the React & React Native community
(本記事はReact Native Advent Calendar 2020の7日目の記事です) 国内のReact Nativeで作られてるアプリをピックアップしました。 個人的に見聞きした+会社ウェブサイトなどで調査したもので、網羅されている訳ではないのでご了承下さい。 随時更新していきたいので、「これもReact Native製だよ！」とか、情報の誤りがあればコメントいただけると嬉しいです！ ※ 以下50音順 アングラーズ 釣果の記録アプリ。 ホーム画面はタイムライン形式になっており、好きな釣りスポットや釣り人(ユーザー)をフォローしておくと釣果情報が随時流れてきます。 アプリ版とWeb版がありますが、釣果の投稿はアプリから行います。 釣果投稿時は魚の写真だけでなく、サイズ、ルアー、タックルなど釣り人が気になりそうな情報を付加できます。 タイムライン、画像投稿などSNSの基本的な機能が
React Native Boilerplate with custom components like Buttons, Dropdowns, and TextInputs
しばらく使ってないと0ベースで忘れてしますので、触りだけメモ。 環境はMac想定です。すみません。 前提知識 React NativeはReactを使ってクロスプラットフォーム(iOS, Android)開発を行うためのしくみ 開発ツールとしてはexpoか、react-native-cliのいずれかを利用するのが一般的 expoは簡単だが限られた範囲での開発となる。react-native-cliは制限は無くどんなニーズにも対応 ただ多くの場合expoの範囲で事足りることが多いのでここではexpoを利用する なお、ejectすることでexpoの制限を超えることができる（もちろん失うものもあるが） 環境構築 node.jsをインストールしておく（必須） watchmanをインストールしておく yarnをインストールしておく XcodeとAndroid Studioもインストールしておいたほう
週末に社内有志で集まって、React Native眺める会をした。 React Nativeをほとんどやったことがない人間たちが、あーでもないこーでもないと言いながら、TypeScriptを組み合わせてアプリを作ってみた。 React Nativeに興味はあったけど、1人で取り組もうというのはなかなか心理的障壁が高いので、集まってわいわいやってみる会は非常によかったし、ハマりを共有して、解決できるのもよかった。 この後にさらに面白いことをしたのだけど、そもそものTypeScript導入までで躓きがあったので、まずまとめておく。 React Nativeを導入、ビルド $ brew install node watchman yarn $ yarn global add react-native-cli $ react-native init Xxxx $ cd Xxxx $ yarn in
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
GitHub - recharts/recharts: Redefined chart library built with React and D3
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - Shopify/restyle: A type-enforced system for building UI components in React Native with TypeScript.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - akveo/kittenTricks: React Native starter kit with over 40 screens and modern Light and Dark theme for creating stunning cross-platform mobile applications.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
React Native at Airbnb(Ⅲ) ~Building a Cross-Platform Mobile Team~ - hotchemi.ja.blog
Part3を翻訳しました。 Part1: React Native at Airbnb(Ⅰ) 日本語訳 - hotchemi.ja.blog Part2: 【翻訳】React Native at Airbnb: The Technology - Studio Andy 元記事: medium.com 本記事はReact Native at Airbnbのpart3となります。数えきれない程の技術的なメリットとデメリットに加え、私達はエンジニアリング組織にとってReact Nativeが何を意味しているかという事を学びました。React Nativeを適用するという事は新しいライブラリや設計パターンを既存のプラットフォームに導入する事よりもはるかに複雑です。React Nativeの導入は沢山の組織的なチャレンジを私達にもたらしました。殆どのケースで最終的に解決されたり避ける事のできる技術的
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Testing a React-Redux app using Jest and Enzyme
ReactNativeでアプリを作る時の個人的な構成(水平分割バージョン) - Qiita
React Native Experimental Navigation with Redux
React Native Expo+TypeScript超入門 - Qiita
react-native androidの開発環境構築方法 [Mac版] - Boostnote
Introducing Hot Reloading · React Native
1. The Social Network as a BGM | mosa.fm
React，Angular，Vue.js，React Nativeを使って学ぶ はじめてのフロントエンド開発
The Complete React Native + Hooks Course
React Native’s LayoutAnimation is Awesome
Redux: Displaying Loading Indicators
Upgrading to new versions · React Native
React Nativeでアプリを作る過程で使うであろう画像について - console.lealog();
"react-native link" は何をするか - Qiita
Releasing React Native 0.59 · React Native
056: React Native for Web
http://reactnativequickly.com/
国内のReact Nativeで作られてるアプリをピックアップ - Qiita
React Native Example for Android and iOS
expoによるReact Nativeのおさらい（最低限） - Qiita
React Native + TypeScript環境を作る - がんばってなんか書く
ReactとWinUI 3を使ってWindowsネイティブアプリを開発する