React.js を使用した Web アプリケーションの作成に関するチュートリアル

React.jsは、インタラクティブなユーザーインターフェース（UI）を構築するために使用される人気の高いフロントエンド開発ライブラリです。Facebookによって開発されたReact.jsは、Instagram、Airbnb、WhatsAppなど、多くの大手企業で使用されています。効果的で高速かつレスポンシブなWebアプリケーションを構築したいのであれば、React.jsは最適な選択肢となるでしょう。

ペンダフルアン

始める前に、お使いのコンピューターにNode.jsとnpm（Node Package Manager）がインストールされていることを確認してください。Node.jsとnpmは、React.jsを使用してWebアプリケーションを開発するために必要な環境とツールを提供するため、不可欠です。

ステップ1：Reactプロジェクトの初期化

新しい React.js アプリケーションを作成するには、初期設定を最小限に抑えるアプリケーション作成ツールである Create React App を使用できます。ターミナルまたはコマンドプロンプトで次のコマンドを実行してください。

「「バッシュ」
npx create-react-app my-app
cd my-app
npmスタート
「 `

このコマンドを実行すると、`my-app` という名前の新しいディレクトリが作成され、必要な依存関係がすべてダウンロードおよびインストールされ、開発サーバーが起動します。これでブラウザを開き、`http://localhost:3000` にアクセスすると、デフォルトの React.js アプリケーションが表示されます。

ステップ2：フォルダ構造

Create React Appが作成したフォルダ構造を見てみましょう。

「 `
マイアプリ/
├── node_modules/
├── 公開/
│ └── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
「 `

– `node_modules/`: プロジェクトのすべての依存関係が含まれています。
– `public/`: アプリケーションのエントリポイントである`index.html`を含む静的ファイルが含まれています。
– `src/`: ほとんどの時間を費やすことになる場所です。Reactコンポーネント、CSSファイル、その他のアセットが含まれています。

ステップ3：不要なファイルの削除

まっさらな状態から始めるために、不要なファイルをいくつか削除しましょう。`src/`フォルダ内の`logo.svg`と`App.test.js`を削除してください。次に、`App.css`と`index.css`を開き、中のCSSコードをすべて削除して、まっさらなスタイルシートを作成します。

ステップ4：最初のコンポーネントを作成する

React.jsはコンポーネントベースのフレームワークです。コンポーネントはWebアプリケーションの構成要素です。それでは、`App.js`を修正して最初のコンポーネントを作成してみましょう。

`src/App.js`を開き、以下のコードに置き換えてください。

「`jsx」
'react'からReactをインポートします。
import './App.css';

関数 App() {
戻る（

);
}

デフォルトのアプリをエクスポートします。
「 `

`App.js` 内の React コードを JSX (JavaScript XML) を使用して初期化します。JSX を使用すると、JavaScript 内で HTML のような構文を記述できます。変更を保存し、ブラウザで結果を確認してください。

ステップ5：新しいコンポーネントの追加

それでは、新しいコンポーネントを追加しましょう。`src`フォルダ内に`components`という名前の新しいフォルダを作成します。次に、`components`フォルダ内に`HelloWorld.js`という名前の新しいファイルを作成します。

「`jsx」
'react'からReactをインポートします。

function HelloWorld() {
戻る（

);
}

export default HelloWorld;
「 `

`App.js`を開き、先ほど作成した`HelloWorld`コンポーネントをインポートしてください。

「`jsx」
'react'からReactをインポートします。
import './App.css';
import HelloWorld from './components/HelloWorld';

関数 App() {
戻る（

);
}

デフォルトのアプリをエクスポートします。
「 `

これで、`App.js` がメインページに `HelloWorld` コンポーネントをレンダリングするようになりました。

ステップ6：useStateによる状態管理の追加

Reactには、状態管理のための非常に強力なフックが用意されています。アプリケーションに状態を追加してみましょう。例えば、ボタンがクリックされるたびに増加するカウンターを追加してみましょう。

`HelloWorld.js`を開き、stateと`useState`フックを追加します。

「`jsx」
React をインポートし、{useState} を 'react' から取得します。

function HelloWorld() {
const [カウント, setCount] = useState(0);

const incrementCount = () => {
setCount(カウント + 1);
}

戻る（

);
}

export default HelloWorld;
「 `

`count`状態は初期値0で初期化され、ボタンがクリックされるたびに`incrementCount`関数によってこの値が増加します。

ステップ7：スタイルの追加

スタイルを追加するには、`App.css` ファイルにCSSを記述するか、styled-componentsのようなCSS-in-JSライブラリを使用できます。今回は標準のCSSを使用することにします。

`App.css`を開いて、スタイルを追加してください。

「`css」
。アプリ {
テキスト整列：センター;
}

.App-header {
背景色: 282c34;
min-height: 100vh;
ディスプレイ：フレックス;
フレックス方向：列;
align-items：中央;
justify-content：center;
フォントサイズ: calc(10px + 2vmin);
色：白;
}

ボタン {
パディング：10px 20px。
マージントップ：20px。
フォントサイズ：16px。
}
「 `

ステップ8：React Routerでルーティングを追加する

アプリケーション内の異なるページ間のナビゲーションを追加するには、React Router を使用できます。以下のコマンドを実行して React Router をインストールしてください。

「「バッシュ」
npm インストール反応ルーター dom
「 `

次に、`components`フォルダ内に`Home.js`と`About.js`という2つの新しいコンポーネントを作成します。

`Home.js`:
「`jsx」
'react'からReactをインポートします。

関数ホーム() {
戻る（

);
}

デフォルトのホームをエクスポートします。
「 `

`About.js`:
「`jsx」
'react'からReactをインポートします。

関数 About() {
戻る（

);
}

エクスポートデフォルトについて;
「 `

次に、`App.js`を開いてルーティングを設定します。

「`jsx」
'react'からReactをインポートします。
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import './App.css';
import HelloWorld from './components/HelloWorld';
'./components/Home' からホームをインポートします。
'./components/About' から About をインポートします。

関数 App() {
戻る（

);
}

デフォルトのアプリをエクスポートします。
「 `

これにより、アプリケーション内の異なるページ間の基本的なナビゲーション機能を追加しました。

閉鎖

これは、React.js を使用した Web アプリケーションの作成に関する基本的なチュートリアルです。プロジェクトのセットアップ、コンポーネントの作成、状態管理、スタイリング、ルーティングについて説明しました。React.js には、より複雑な Web アプリケーションの構築に役立つライブラリやツールが豊富に揃ったエコシステムがあります。

頑張ってください！このチュートリアルが、React.jsを使った学習の第一歩を踏み出すのに役立つことを願っています！