React チュートリアル
デモを使用して学習
「Show React」ツールを使用すると、Reactのデモを簡単に行うことができます。コードと結果の両方が表示されます。
例：
import React from 'react';
import ReactDOM from 'react-dom/client';
function Hello(props) {
return <h1>Hello World!</h1>;
}
const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<Hello />);
Reactアプリを作成する
Reactを学習してテストするには、コンピューターにReact環境をセットアップする必要があります。
このチュートリアルでは、create-react-appを使用します。
このcreate-react-appツールは、Reactアプリケーションを作成するために公式にサポートされている方法です。
create-react-appを使用するには、Node.jsが必要です。
アプリケーションを作成するディレクトリで端末を開きます。
次のコマンドを実行して、my-react-appという名前のReactアプリケーションを作成します。
npx create-react-app my-react-app
create-react-appは、Reactアプリケーションを実行するために必要なものをすべてセットアップします。
注：すでにcreate-react-appをインストールしている場合は、npxが常に最新バージョンのcreate-react-appを使用するように、パッケージをアンインストールすることを推奨します。アンインストールするには、npm uninstall -g create-react-appコマンドを実行します。
Reactアプリケーションを実行する
このコマンドを実行して、my-react-appディレクトリに移動します。
cd my-react-app
このコマンドを実行して、Reactアプリケーションのmy-react-appを実行します。
npm start
新しいブラウザウィンドウがポップアップし、新しく作成したReact Appが表示されます！表示されない場合は、ブラウザを開き、アドレスバーに localhost:3000と入力してください。
結果：
知っておくべきこと
React.JSを使い始める前に、次の中級レベルの経験が必要です。
- HTML
- CSS
- JavaScript
また、ECMAScript6(ES6)で導入された新しいJavaScript機能についてある程度の経験が必要です。これらの機能については、React ES6章で説明します。