内容紹介

【Reactを『なんとなく』は使える人が、2日で自信を持ってReactを書ける本】

- 2日間で終わる分量。JavaScriptとReactの理解をプロレベルまで引き上げ、Reactコードを自信をもって書けるようになります。

- JavaScriptの基礎の基礎、Reactの基本コンセプト、そして発展的内容まで、Reactの全範囲をカバー。

- この本だけで、2024年のフロントエンド開発で必要となる最新のReactの知識をすべて習得できます。

- 既刊書で好評のハンズオン形式（作りながら学ぶスタイル）。

自分でコードを書きながら進むので飽きづらく、さらにはアプリを作り上げていく楽しさと充実感も味わえます。

- 最新のReact開発環境構築ツールReact + Viteをベースに、2024年に必要な最新知識を伝授。

- HTMLとCSSの知識だけで始められる優しい入門書。JavaScriptの基礎の基礎もカバーしています。

- Reactのベーシックから発展的内容まで学ぶので、これまでReactを「なんとなく」書いてきた中級者にも学びが多い内容です。

「なぜReactにはfunctionを使うものと使わないものがあるの？」

「なぜイベントの書き方には種類があるの？」

「レンダリングってなに？」

「レンダリングがなぜ重要なの？」

「ダークモードってどうやって作るの？」

・・・・・といった多くのReactビギナー 〜 中級者が抱く疑問にすべて答えます。

【対象読者】

◆ HTML／CSSの学習を終えた人（JavaScriptの知識不要）

◆ 理論や説明を読むのではなく、自分の手を動かしながら学んでいきたい人

◆ 2024年最新のReact開発環境（React + Vite）で学びたい人

◆ 他のReact入門書で挫折した人

◆ Reactを使って何個もアプリを作ったことはあるけど、いまいち自信をもってコードが書けないReact中級者

◆ React公式ドキュメントを難しいと思った人

◆ VueからReactに切り替えたい人

【発売日】

2024年3月18日

【文字数と分量】

本書は既刊書「はじめてつくるReactアプリ with TypeScript」の約2.5倍の分量です。

◆ 「Reactマスター（本書）」の文字数：240,360

◆ 「はじめてつくるReactアプリ with TypeScript」の文字数：97,919

*本書ではMacを使用しています。Windowsの方は一部表示が異なることに注意してください。

【著者について】

Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。

自身のJavaScript挫折経験をもとに、HTMLとCSSの知識だけで本格的なアプリ開発を始められる入門書を多数執筆中。合計著作は22冊を超える。

専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。

【くわしい収録内容】

● アプリケーションの仕組み／フロントエンドの役割／バックエンドの役割／CRUD操作／ターミナルの使い方／Node.js／VS Codeのインストール／npmパッケージのバージョンの確認方法／エラーが起きた時の対処方法

● Reactの概要／Reactが使われる理由／コンポーネント／仮想DOM／レンダリングの種類／レンダリングのステップ／初回レンダリング／再レンダリング

● JavaScriptの歴史／オブジェクトと配列／データの種類／定数宣言／組み込みfunction／function／console.log()／map()／slice()／switch／演算子／分割代入／スプレッドオペレーター

● React + Vite／フォルダ構成の考え方／Reactコード（コンポーネント）の構造／Reactアプリの構造／SPA／CSSの適用方法／fetch()／Promise／非同期処理（async／await）／state／state更新の方法（useState）／テンプレートリテラル／イベントの種類／イベントの書き方のバリエーション／単方向データフロー／ページの設定方法（react-router-dom）／ページの移動／Layoutコンポーネント／ページタイトルの設定

● stateの整理／useContext／ローディング／エラー処理／try／catch／ダークモードの仕組みと実装／CSS変数／localStorage／useEffectのレンダリング制御方法／デフォルトimportと名前付きインポート／配列の扱い方／カスタムHook／条件付きレンダリング／オンラインで公開する方法（Netlify Drop）

● 分割代入と省略記法／functionの書き方のバリエーション／useStateの書き方／useEffect／useLayoutEffect／useContext／useReducer／useRef／memo／useMemo／useCallback／useTransition／Suspense／Lazy／Redux／テスト（vitest）／サーバーコンポネント（Next.js）

【目次】

はじめに

◆ 第1章 アプリケーションの仕組みを知ろう + 開発の準備

この章で学ぶこと

JSONデータの整形

ウェブサイトとウェブアプリケーションの違い

フロントエンドとバックエンド

CRUD操作

ターミナルの使い方

Node.js

npm

VS Code

エラーが発生した場合の対処方法

◆ 第2章 Reactについて知ろう

この章で学ぶこと

Reactの概要

Reactが使われる理由

コンポーネント

仮想DOM

JSX

レンダリング

Reactのレンダリングと、ブラウザのレンダリング

トリガーリング

レンダリング

コミッティング

◆ 第3章 JavaScriptを知ろう

この章で学ぶこと

JavaScriptの簡単な歴史

「データ」について

データの種類

データの形（オブジェクトと配列）

データに名前をつける（定数宣言）

データを操作する手段（2種類）

デフォルトの操作手段（組み込みfunction）

オリジナルの操作手段（function）

組み込みfunction

console.log()

map()

slice()

function

switch

その他の文法

論理演算子（&&）と三項演算子（?）

分割代入

スプレッドオペレーター

◆ 第4章 Reactの基礎を学ぼう

この章で学ぶこと

アプリの構成の確認

React開発ツールのインストール

create-react-app

React + Vite

Next.js

フォルダ構成の方法

フォルダ構成例 1（ページベース）

フォルダ構成例 2（機能ベース）

Reactコードの構造

共通コンポーネントの準備

Formコンポーネント開発 1（データを取得する）

Formコンポーネント開発 2（データの管理／stateとイベント）

Formコンポーネント開発 3（取得データの整理）

Recipeコンポーネント開発 1（Reactのデータフロー）

Recipeコンポーネント開発 2（取得データを表示）

Recipeコンポーネント開発 3（ページの設定）

Layoutコンポーネント作成

画像とCSS

◆ 第5章 Reactをもっと使ってみよう

この章で学ぶこと

stateの整理（useContext）

ローディングの設定

エラー処理（try／catch）

ダークモード開発 1（ダークモードの仕組み／CSS変数）

ダークモード開発 2（ダークモードの実装）

ダークモード開発 3（カスタムHookの作成）

検索履歴の開発（概要）

検索履歴の開発 1（検索履歴が表示・削除される仕組み）

検索履歴の開発 2（配列へのデータ保存方法）

検索履歴の開発 3（useEffectの使い方）

検索履歴の開発 4（履歴を削除する方法）

検索履歴の開発 5（条件付きレンダリング）

アプリをオンラインで公開する（デプロイ）

◆ 第6章 さらに深くReactを知ろう

この章で学ぶこと

分割代入と省略記法

functionの書き方のバリエーション

関心の分離（ロジックと表示）

React Hooksの種類と分類

useStateの記法

useLayoutEffect

useReducer

useRef

useMemo／useCallback／memo

useTransition

SuspenseとLazy

Redux

テスト（function）

サーバーコンポーネント（Next.js）

今後の勉強の進め方

あとがき

関連書籍

著者について