React Native: Learn & Practice

簡潔な解説、実践的なコード例、そして簡単な課題を通して、React Nativeを学びましょう。10のモジュールに分かれた148のレッスンを体験し、コーディングプレイグラウンドでサンプルを開いて変更することで、インターフェースの仕組みを理解できます。

基礎から実践へ、明確な道筋

テキスト、ビュー、変数、コンポーネント、画像、スタイルから始めましょう。Flexboxレイアウト、フォーム、テキスト入力、ボタン、タッチ操作、スクロール、リストへと進みます。後半のモジュールでは、フック、再利用可能なコンポーネント、状態管理、パフォーマンスの概念、レスポンシブレイアウト、そして実践的なプロジェクトを紹介します。

編集する前に、まずは概要を確認しましょう

各レッスンには、目標、分かりやすい概要、重要な概念、コード、実践的なヒント、簡単な課題、そして自己復習のための質問がまとめられています。解説と併せてサンプルを確認し、準備ができたら編集可能なバージョンを開いて試してみましょう。初心者、中級者、上級者といったラベルは、各トピックがコースのどの段階にあるのかを理解するのに役立ちます。

自分で変更を加えてみましょう

組み込みのJavaScriptおよびJSXエディタを使用して、テキスト、値、スタイル、コンポーネントの動作を調整できます。構文ハイライトと行番号により、例題が理解しやすくなります。元に戻す/やり直し機能で変更点を確認でき、コードをリセットすると初期状態に戻ります。アプリを実行をタップするとアプリ内プレビューが開き、編集画面に戻って再度試すことができます。

便利なパターンを探求する

制御入力、フォーム検証、パスワードの表示/非表示、文字数カウンター、リストフィルタリング、選択可能な項目、空の状態について学習しましょう。カウンター、タイマー、ライブクロック、温度変換ツール、チップ計算機、カード、アコーディオン、シンプルなタブ、ミニToDoリストなどを使って練習できます。これらは、インターフェースの小さな要素がどのように組み合わさっているかを確認できる学習例です。

必要なレッスンを見つける

レッスンのタイトルで検索するか、モジュールでライブラリを絞り込むことができます。すべてのレッスン、進行中のレッスン、保存したお気に入り、完了したレッスンを切り替えることができます。前へ/次へボタンを使用するか、スワイプでレッスン間を移動できます。フィルタリングされたライブラリからレッスンを開くと、ナビゲーションはその選択内容に追従するため、選択したトピックを継続して学習できます。

学習状況を記録する

復習したいレッスンをブックマークし、準備ができたら完了としてマークできます。ホーム画面には、コースの進捗状況、完了済みおよび保存済みのレッスン数、学習連続記録が表示されます。前回のレッスンを再開するか、未完了の次のトピックに進むことができます。進捗状況とブックマークはデバイスにローカルに保存されます。

実験に戻る

サンプルを実行すると、そのレッスンのコードがローカルのドラフトとして保存されます。プレイグラウンドを再度開くとドラフトが復元され、リセットすると元のコードに戻ります。これにより、中断後に元の教材を置き換えることなく、アイデアを簡単に復習できます。

快適な表示を選択する

学習インターフェースには、ライトモード、ダークモード、またはシステムテーマを選択できます。概念を読み、コードを確認し、焦点を絞った変更を1つ加え、チャレンジでその変更を実践的に応用してみましょう。

このアプリは、学生、コーディングに興味のある初心者、モバイルインターフェースの概念を復習している開発者向けに設計されています。サンプルはWebベースのプレビューで実行されます。プラットフォーム固有のAPIと動作は、ネイティブアプリとは異なる場合があります。アプリには広告が含まれています。独立した教育アプリであり、React Nativeプロジェクトとは提携しておらず、承認も受けていません。