React インストール(NPM)

始める前に、Node.js と npm がインストールされていることを確認してください。以下のコマンドでインストールされているかどうかを確認できます：

node -v
npm -v

システムがまだ Node.js と NPM をサポートしていない場合は、以下を参照してください。Node.js チュートリアル。

React では、browserify や webpack などの CommonJS モジュールシステムを使用することをお勧めします。このチュートリアルでは webpack を使用します。

国内では npm の速度が非常に遅いため、淘宝（タオバオ）カスタムの cnpm（gzip 圧縮サポート）コマンドラインツールをデフォルトの npm の代わりに使用できます：

$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ npm config set registry https://registry.npmmirror.com

これで cnpm コマンドを使用してモジュールをインストールできます：

$ cnpm install [name]

詳細については、以下を参照してください：http://npm.taobao.org/。

create-react-app を使用して React 開発環境をすばやく構築する

React には、React プロジェクトをすばやく構築するための公式ツール Create React App が用意されています。

create-react-app は Facebook 製です。このコマンドを使うと、設定なしで React 開発環境をすばやく構築できます。

create-react-app が自動生成するプロジェクトは、Webpack + ES6 に基づいています。

以下のコマンドを実行してプロジェクトを作成します：

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

次を使用することもできますnpxコマンドで作成することもできます。npx は npm 5.2.0 以降に含まれるツールで、ローカルまたはリモートの npm パッケージを実行するために使用されます：

npx create-react-app my-app

ブラウザで開くとhttp://localhost:3000/、結果は次の図のようになります：

プロジェクトのディレクトリ構造は次のとおりです：

my-first-react-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock (或 package-lock.json)

ディレクトリとファイルの説明

node_modules/

すべてのプロジェクトの依存パッケージを格納します。このディレクトリは npm または yarn によって自動生成され、プロジェクトの実行に必要なすべてのサードパーティライブラリとモジュールが含まれます。

public/

静的ファイルを格納します。Webpack はこのディレクトリ内のファイルを処理しません。publicディレクトリ内のファイルは、ビルドディレクトリに直接コピーされます。

  • favicon.ico：ブラウザのタブに表示される小さなアイコン。
  • index.html：HTML テンプレートファイル。React コンポーネントはこのファイル内のdiv要素にマウントされます。
  • logo192.pngとlogo512.png：さまざまなサイズの React ロゴアイコン。
  • manifest.json：Web アプリのマニフェストファイル。アプリの名前、アイコンなどのメタデータを定義するために使用されます。
  • robots.txt：検索エンジンにどのページをクロールできるかを伝えるために使用されます。

src/

アプリケーションのソースコードを格納します。ここが主に開発を行う場所です。

  • App.css：Appコンポーネントのスタイルファイル。
  • App.js：メインコンポーネントファイル。基本的な React コンポーネントを定義します。
  • App.test.js：Appコンポーネントのテストファイル。
  • index.css：グローバルスタイルファイル。
  • index.js：アプリケーションのエントリファイル。React コンポーネントを DOM にレンダリングする役割を担います。
  • logo.svg：React ロゴの SVG ファイル。
  • reportWebVitals.js：パフォーマンス監視用のファイル。アプリケーションのパフォーマンスを理解・分析するのに役立ちます。
  • setupTests.js：テスト環境を設定するためのファイル。

.gitignore

Git が無視すべきファイルとディレクトリを一覧表示します。例：node_modules/やビルド出力ディレクトリなど。

package.json

プロジェクトの設定ファイル。プロジェクト情報、スクリプト、依存関係などが含まれます。

README.md

プロジェクトの README ファイル。プロジェクトの基本情報と使用説明が含まれます。

yarn.lock 或 package-lock.json

ロックファイル。正確な依存バージョンを記録し、異なる環境でインストールされる依存関係が一致することを保証します。

src/App.js ファイルのコードを変更してみましょう：

src/App.js

import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>サンプルへようこそ</h2> </div> <p className="App-intro"> あなたは <code>src/App.js</code> ファイル内で変更します。 </p> </div> ); } } export default App;

変更後、http://localhost:3000/ を開くと（通常は自動更新されます）、出力結果は次のようになります：

src/index.js はエントリファイルです。src/index.js ファイルのコードを直接変更してみましょう：

注意：React 18 では、ReactDOM.render は非推奨になりました。

例

import React from 'react';
import ReactDOM from 'react-dom';

function Hello(props) {
  return <h1>Hello {props.name}!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
// Hello コンポーネントをレンダリングし、name プロパティを渡します
root.render(<Hello name="World" />);

このときブラウザで開くとhttp://localhost:3000/次のように出力されます：

Hello World!

最初のコンポーネントを作成する

あなたはApp.jsファイルを編集して、自分の最初のコンポーネントを作成できます。以下は簡単な例で、Appコンポーネントを "Hello, React!" を表示するように変更します：

例

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello, React!</h1>
      </header>
    </div>
  );
}

export default App;

ファイルを保存するとブラウザは自動更新され、ページに "Hello, React!" と表示されるはずです。

あなたはsrcディレクトリ内にさらに多くのコンポーネントファイルを作成できます。例えば、Hello.jsファイル：

Hello.js ファイルコード：

import React from 'react';

function Hello() {
  return <h1>Hello from a new component!</h1>;
}

export default Hello;

次にApp.jsでこの新しいコンポーネントをインポートして使用します：

例

import React from 'react';
import './App.css';
import Hello from './Hello';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Hello />
      </header>
    </div>
  );
}

export default App;

ファイルを保存するとブラウザは自動更新され、新しいコンポーネントの内容が表示されます。

その他の拡張