FacebookのエンジニアによるReactの入門書！
ReactによるコンポーネントベースのWebフロントエンド開発の入門書。Reactでは小さくて管理が容易なコンポーネントを組み合わせて、大きくて強力なアプリケーションを作成できます。本書の前半は入門編で、簡単なサンプルを使いながらReactの基本やJSXについて学びます。後半は、実際のアプリケーション開発に必要なものや開発を助けてくれるツールについての解説です。具体的には、JavaScriptのパッケージングツール（Browserify）、ユニットテスト（Jest）、構文チェック（ESLint）、型チェック（Flow）、データフローの最適化（Flux）、イミュータブルなデータ（immutableライブラリ）などを取り上げます。対象読者は、ES2015（ES6）の基本をマスターしているフロントエンド開発者。

Reactビギナーズガイド

Reactをイチから学びたい方にオススメの1冊です！
【本書のポイント】
 UdemyのReactコースで最高評価獲得の著者がモダンJavaScriptの基礎からTypeScriptの実践的な内容までしっかり解説！
 著者が2年以上勉強会を主催し初学者と話す中で分かった、多くの人が感じるReactの挫折ポイントを解決する構成！
 現場のシチュエーションベースのストーリーで技術解説をしているので、実務で必要となる知識を意識しながら学習を進められる！

「#挫折しないReact本」で学習した感想をシェア！！

0からReactとTypeScriptを学ぶために使用した教材。ついでにJestとGraphQLも

Chapter1 React を始める前に知っておきたいモダンJavaScript の基礎
 1-1 モダンJavaScript 概説 
 1-2 DOM、仮想DOM 
 1-3 パッケージマネージャー(npm/yarn) 
 1-4 ECMAScript
 1-5 モジュールバンドラー、トランスパイラ
 1-6 SPA と従来のWeb システムの違い .. . 
 Chapter1 まとめ
 
Chapter2 モダンJavaScript の機能に触れる
 2-1 const、let での変数宣言
 2-2 テンプレート文字列
 2-3 アロー関数 ( ) => { }
 2-4 分割代入 { } [ ]  
 2-5 デフォルト値 = 
 2-6 スプレッド構文
 2-7 オブジェクトの省略記法
 2-8 map、filter
 Chapter2 まとめ
 
Chapter3 JavaScript でのDOM 操作
 3-1 JavaScript によるDOM アクセス
 3-2 DOM の作成、追加、削除
 3-3 JavaScript によるDOM 操作実践
 Chapter3 まとめ
 
Chapter4 React の基本
 4-1 React 開発の始め方
 4-2 JSX 記法
 4-3 コンポーネントの使い方
 4-4 イベントやスタイルの扱い方
 4-5 Props
 4-6 State（useState）
 4-7 再レンダリングと副作用（useEffect）
 4-8 export の種類
 Chapter4 まとめ
 
Chapter5 React とCSS
 5-1 Inline Styles
 5-2 CSS Modules
 5-3 Styled JSX
 5-4 styled components
 5-5 Emotion
 5-6 Tailwind CSS
 Chapter5 まとめ
 
Chapter6 再レンダリングの仕組みと最適化
 6-1 再レンダリングが起きる条件
 6-2 レンダリング最適化1（memo）
 6-3 レンダリング最適化2（useCallback）
 6-4 変数のmemo 化（useMemo）
 Chapter6 まとめ
 
Chapter7 グローバルなState 管理
 7-1 グローバルなState 管理が必要な理由
 7-2 Context でのState 管理
 7-3 その他のグローバルstate を扱う方法
 Chapter7 まとめ
 
Chapter8 React とTypeScript
 8-1 TypeScript の基本
 8-2 API で取得するデータへの型定義
 8-3 Props への型定義
 8-4 型定義の管理方法
 8-5 コンポーネントの型定義
 8-6 省略可能な型の定義
 8-7 オプショナルチェイニング（Optional chaining）
 8-8 ライブラリの型定義
 Chapter8 まとめ
 
Chapter9 カスタムフック
 9-1 カスタムフックとは
 9-2 カスタムフックの雛形を作成
 9-3 カスタムフックの実装
 Chapter9 まとめ
 
付録 React × TypeScript 実践演習

モダンJavaScriptの基本から始める　React実践の教科書

【初級】ウェブサイト制作を彩るJavaScript「React」とは？フロントエンド開発でのメリット解説＆実技付き（UI・プログラミング・アプリ開発）【たった1動画で全てが分かるReactの教科書】

「iOS/Androidの2つのアプリをもっと効率良く開発したい」
「ハイブリッドアプリだと、速度やUIがネイティブより劣ってしまいがち」

　こんな課題は、React Nativeを使えば解決できます。
　React Nativeは、iOS/Androidの両方のアプリをたった1つのスキルセットで開発できるJavaScriptライブラリです。本書は、ReactやReact Nativeが生まれた背景を見直しながら、React Nativeの基本はもちろん、ReactやTypeScript、アプリ設計・開発、テスト、リリースまで、React Nativeによるアプリ開発のすべてを解説。日本でまだ無名だった頃からReact Nativeを追い続けた著者陣が、現場実践をふまえて開発手法を伝授します。
　フロントエンドの方はもちろん、アプリ開発の技術選択を広げたいすべてのエンジニアにおすすめの1冊です。

●はじめに

■■■第1章　React / React Nativeの概要とその背景
■■1-1　Reactとは
■特徴1. Declarative
■特徴2. Component-Based
■コラム　コンポーネントベースを採用しているその他の標準化仕様・フレームワーク
■特徴3. Learn Once, Write Anywhere
■■1-2　Reactが必要とされた背景
■React isn't an MVC framework
■React doesn't use templates
■Reactive updates are dead simple
■コラム　表示速度と仮想DOM
■■1-3　React Nativeが必要とされた背景
■1.Native Experience
■コラム　ネイティブUIとブリッジ
■2.Learn Once, Write Anywhere
■3.Keeping Development Velocity

■■■第2章　TypeScriptとECMAScript 2015の基本を押さえる
■■2-1　TypeScriptとは
■型があることによる2つのメリット
■■2-2　TypeScriptの構文
■明示的な型付け
■暗黙的な型付け
■基礎的な型
■新たな型を作成する
■noUnusedParametersオプションとアンダーバー
■Optional Chaining
■Assertion Functions
■コラム　効率的な型付け
■■2-3　ECMAScript 2015の新記法
■letとconstによる変数定義
■Arrow Functions
■Default Parameter Values
■Template Literals
■Property Shorthand
■Computed Property Names
■Destructuring
■SpreadOperator
■classキーワード
■非同期処理
■ES Modules

■■■第3章　開発環境の構築
■■3-1　IDEの導入
■コード編集ツールが満たすべき機能
■■3-2　Visual Studio Codeのインストールと設定
■Visual Studio Codeをインストールする
■TypeScriptの設定
■コラム　Visual Studio Codeの設定とその対象
■■3-3　React Nativeプロジェクトのセットアップ
■HomeBrewのセットアップ
■Node.jsのセットアップ
■yarnのインストール
■watchmanのインストール
■Xcodeのインストール
■CocoaPodsのインストール
■Java8のインストール
■Android Studioのインストール
■古いコマンドラインツールのアンインストール
■React Nativeプロジェクトの生成
■環境診断
■Android用の設定
■■3-4　開発効率を向上させるプロジェクト設定
■依存パッケージのバージョンを固定する
■コラム　セマンティックバージョニングとpackage.json
■Prettierの設定
■ESLintの設定
■EditorConfigの設定
■■3-5　GitHubのセットアップ
■GitHubを用いた開発の流れ
■レビューを推奨する設定

■■■第4章　React Nativeの基本
■■4-1　React Nativeを使った開発
■React Nativeを起動する
■TypeScriptファイルを1つにまとめるMetro Bundler
■RedBox／YellowBox
■■4-2　React Nativeのデバッグメニュー
■Reload
■Debug
■Show Inspector
■■4-3　コンポーネントでUIを作成する
■JSX文法で開発する
■コンポーネントを定義する
■式の評価
■コラム　truthy/falsyとショートサーキット評価
■フラグメント
■style propsによる装飾
■Flexbox
■props
■state
■コラム　propsとstateの設計
■副作用を持つコンポーネント
■Context
■ref
■■4-4　React Native標準コンポーネント
■Viewコンポーネント
■Textコンポーネント
■Imageコンポーネント
■sourceプロパティによる表示画像の指定
■resizeMode propsによる拡大縮小時の挙動指定
■背景画像を指定する
■ScrollView
■FlatList/SectionList
■Touchable系コンポーネント
■Buttonコンポーネント
■TextInputコンポーネント
■コラム　React HooksとCustom Hooks
■StatusBarコンポーネント
■ActivityIndicatorコンポーネント
■Switchコンポーネント
■■4-5　React Native標準ユーティリティー
■Alert
■AppState
■BackHandler
■Clipboard
■Dimensions
■Linking
■PermissionsAndroid
■Share
■Vibration
■■4-6　コミュニティから提供されているコンポーネント
■AsyncStorageモジュール
■SafeAreaViewコンポーネント
■ProgressView／ProgressBarAndroidコンポーネント
■■4-7　コンポーネントを作成する際の注意点
■モバイルアプリの制限
■propsとstateの更新頻度を抑える
■プラットフォームに沿ったコンポーネント作成
■コラム　バンドルされたJSの取得方法
■■4-8　コンポーネントにアニメーションをつける
■アニメーションの考え方
■React Nativeにおけるアニメーション実装
■効果的なアニメーション

■■■第5章　作成するアプリケーションの仕様策定
■■5-1　リーンキャンバス
■■5-2　ユースケース
■■5-3　画面遷移を考える
■仕様書のラフ画
■Initial
■ChooseLogin
■SignIn
■SignUp
■Home画面
■Statics
■Detail
■UserInfo
■Loading
■アプリを実装する手順

■■■第6章　テストによる設計の質の向上
■■6-1　React Nativeのテストの2つの目的
■要求や仕様を満たしていることを確かめるテスト
■設計改善のためのテスト
■■6-2　Jestによるユニットテスト
■コラム　テストで用いるパッケージの選択
■最初のテスト実行
■テストの書き方
■テストを書く
■テストを書かない対象を見極める
■■6-3　CIを取り入れ安定した開発をする
■CircleCIのセットアップ

■■■第7章　Navigationの概要と実装
■■7-1　画面遷移の基本
■Webアプリケーションの画面遷移
■モバイルアプリケーションのルーティング
■Navigationとは
■react-navigationの導入
■学習環境を準備する
■構成を変更する
■■7-2　Stackを実装する
■Stackの実装
■ライブラリの読み込み
■スタイルの定義
■画面の作成
■ルーティングの実装
■NavigationContainerを使用する
■■7-3　Tabを実装する
■Tabの実装方法
■Tabの種類
■■7-4　Drawerを実装する
■■7-5　Optionsを定義する
■Optionsを定義する2つの方法
■navigationOptionsを動的に変化させる
■options、screenOptionsで受け取れる引数
■■7-6 headerModeとmode
■mode
■headerMode
■■7-7　サンプルを作りながら、ページ遷移を実装してみよう
■プロジェクトの準備
■アプリケーションの起動
■事前準備
■作るべき画面を整理する
■画面パスを管理するためのファイル作成
■定数化する理由
■画面作成の事前の準備
■各画面の作成
■画面の接続
■ルーティングの確認
■Tabを組み合わせる
■TabNavigatorとStackNavigatorを組み合わせる
■DrawerNavigatorとStackNavigatorを組み合わせる
■ドロワー遷移する遷移先でタブが表示されないようにする
■Modalを組み込む
■複数のStackNavigatorを使う

■■■第8章　Atomic Designとコンポーネントの実装
■■8-1　コンポーネント設計のメリット
■1.コンポーネントの再利用によって開発効率が向上する
■2.保守面のメリット
■3.関心の分離を実現できる
■4.テスト面におけるメリット
■■8-2　ユニットテストを実装する
■ライブラリを用意する
■スナップショットテスト
■動作のテスト
■■8-3　Atomic Designを理解する
■ボタンをAtomsとして分離する
■■8-4　アプリケーションのレイアウトを整える
■アプリケーションのテーマ設定
■各画面に色を入れ込む
■StackNavigatorにテーマを適用する
■DrawerNavigatorへのデザイン適用
■TabNavigatorにデザインを適用する
■■8-5　アプリケーションの画面を作り込む
■react-native-paperをインストールする
■CHOOSE_LOGINの実装
■ChooseLoginの作成
■Signupの作成
■Signinの作成
■Initialの実装
■Homeの作成
■Todoを作成する
■Inputの作成
■Detailの作成
■UserInfoの作成
■Statisticsの作成

■■■第9章　データフローの設計および実装
■■9-1　Reduxとは
■特徴1. Single source of truth
■特徴2. State is read-only
■特徴3. Changes are made with pure functions
■どのような場合にReduxを使うのが有効か
■React Stateの限界
■■9-2　Reduxの基本
■Reducerのベース作成と初期状態の設計
■Actionの設計
■Storeの作成
■Reduxの世界とReactの世界をつなぐ
■コラム　useSelector、useDispatchとconnectの比較
■Reduxにおけるディレクトリー構造
■Ducks
■■9-3　Reduxにおける非同期処理
■ネットワーク通信の結果をActionに載せdispatchする
■Redux middleware
■middlewareを実装する
■コラム　便利なmiddleware
■ReduxにおけるStore設計
■表示用データの生成
■アプリケーションが動作する環境や状況の文脈データ
■ディレクトリー構成を整理する
■■9-4　アプリのデータフローの実装
■必要パッケージのインストール
■ドメイン層の実装
■todo管理モデル
■Ducks Moduleの定義
■Storeの実装
■Selectorの実装
■Container Componentの実装
■ルートコンポーネントの実装
■その他、画面制御に必要なデータ

■■■第10章　Firebaseを使ったバックエンド連携
■■10-1　Firebaseとは
■Firebase Authentication
■Firebase Cloud Firestore
■Firebase Analytics
■■10-2　Firebaseをアプリへ組み込む
■インストール
■認証を実装する
■データ同期を実装する
■ユーザートラッキングを実装する

■■■第11章　E2Eを実装する
■■11-1　E2Eテストとは
■E2Eテストの範囲
■E2Eテストの対象基準
■React NativeにおけるE2Eテストパッケージ
■■11-2　Detoxによる検証
■依存パッケージのインストール
■プロジェクトへDetoxのインストール
■Detoxでの検証方法
■Debug/Releaseビルド
■API
■■11-3　Detoxテストを実装する
■今回作成するテストケース
■Detoxでテストを実装する
■ChooseLoginまでのテストケース
■テスト：～Home
■画面遷移テスト：SignUpページ
■画面遷移テスト：SignInページ
■アカウント登録
■サインアウト
■サインイン
■テスト：Todo追加
■Todo完了
■Todo更新
■Todo削除
■■11-4　CIでE2Eテストをおこなう
■Bitriseの利点と欠点
■Bitriseのセットアップ
■Detoxビルドの追加
■Bitrise Workflow

■■■第12章　アプリストアへの公開
■■12-1　リリースビルド
■Firebaseの本番環境を作成する
■iOSのビルド設定
■Androidのビルド設定
■コラム　開発用とリリース用を共存させる
■■12-2　アプリをApp Storeに提出する
■アイコン設定
■App IDの登録
■アプリの登録
■アプリの送信
■アプリの登録の続き
■リリース
■■12-3　アプリをGoogle Play Consoleに提出する
■アプリの作成
■ストアの掲載情報
■アプリのリリース
■コンテンツのレーティング
■アプリのコンテンツ
■価格と配布
■公開

●さくいん

順位	8位
総合点	73点
Googleの検索結果での点数	64点
Qiitaの記事での点数	6点
Twitterでの点数	1点
Youtubeでの点数	2点

【React】モダンJavaScriptの基本から始める　React実践の教科書の評価
2022-04-17更新

React分野での評価

【React】モダンJavaScriptの基本から始める React実践の教科書の評価2022-04-17更新

React分野での評価

【React】モダンJavaScriptの基本から始める　React実践の教科書の評価
2022-04-17更新