「基礎からはじめるReact Native入門」連載一覧
-
2020/03/19UIライブラリで美しいデザインを手軽に利用する
前回はスタイルでコンポーネントを装飾する方法を学びましたが、見栄えするデザインのコンポーネントを自分で作るのは大変です。今回は、サードパーティ製のコンポーネントセットとして、React Native Paperというライブラリを紹介します。React Native Paperはモバイルアプリ開発に役立つ、ヘッダーやフッター、フォームといったUIを提供しています。また、AndroidとiOSによって自動で見た目が変わる機能もあり、各プラットフォームらしい見た目を作ることもできます。品質の高いアプ...
-
2020/02/17React Nativeでアプリの見た目を整えよう～スタイルでコンポーネントをレイアウトする
前回に続いて、React Nativeにおけるスタイルの使い方として、コンポーネントをレイアウト（配置）する方法を解説します。装飾と同じく、レイアウトについてもCSSの機能を踏襲しており、ブラウザの世界でたたき上げられてきた方法で柔軟にレイアウトを組めます。
-
2019/12/17React Nativeでアプリの見た目を整えよう～スタイルでコンポーネントを装飾する
React Nativeにおけるスタイルの使い方として、コンポーネントを装飾する方法を解説します。React Nativeで使用できるスタイルは、CSSをベースにしているので、CSSに関する知識があれば比較的容易に習得することができます。ただ、WebブラウザのReactにおけるスタイルよりも書き方の選択肢が狭まっている部分もあるので、React Nativeらしい書き方を学んでいきましょう。
-
2019/10/24React Hooksの使い方を学ぼう～関数コンポーネントの状態管理を行う
前回は、クラスコンポーネントで状態管理やライフサイクルを利用する方法について解説しましたが、関数コンポーネントでも同様の機能を実現することができます。今回は、Reactのバージョン16.8から導入された、関数コンポーネントを拡張するための機能群であるReact Hooksについて、基礎的な使い方を解説します。
-
2019/10/15Reactの基本を学ぼう～コンポーネントで動的な状態管理
前回は、Reactコンポーネントの構成要素であるJSXやpropsについて解説しました。今回は、それらを動的な状態管理によって更新する方法について解説していきます。状態の更新は、コンポーネントのライフサイクルや、ユーザー操作のイベントを起点として行われるので、これらを交えた具体例についても解説します。
-
2019/08/23Reactの基本を学ぼう～コンポーネントの仕組みと作り方
React Nativeでは、ReactというJavaScript向けのUI状態管理ライブラリを使用します。Reactを用いることで、ブラウザ向けのアプリもモバイル向けのアプリも作ることができますが、その使い方はほとんど同じです。今回は、一度使い方を覚えてしまえばさまざまなプラットフォームに向けてUIを書くことができる、Reactの基本について学んでいきましょう。
-
2019/02/27ExpoではじめるReact Native開発環境の構築
今回はReact Nativeを使ったアプリの作成と実行までの流れを解説します。React Nativeの仕組みはよくできたものですが、そのまま扱おうとすると必要な知識が多岐にわたってしまい大変です。本記事では、React Nativeを簡単に扱えるように抽象化されたツール「Expo」を使います。ReactやJavaScriptによるWebアプリ開発では、よくある形でのセットアップになります。
-
2018/12/26React Nativeとは何か？ 基本の仕組みと使いどころを理解する
WebブラウザとAndroid、iOSが、アプリの動作環境としてそれぞれ市民権を得た現代では、サービスを1つ作るだけでも、各プラットフォームに対してアプリを提供することが当たり前のように求められます。本連載では、この問題に立ち向かうため、ReactとJavaScriptによるWebアプリケーション開発に近いお作法でAndroidやiOSのアプリ開発ができるツール「React Native」を紹介します。まずは、React Nativeというツールがどういった仕組みで動いているのか、また、どうい...
