Reactチュートリアル
Reactは、ユーザーインターフェイスを構築するためのJavaScriptライブラリです。
Reactは、シングルページアプリケーションを構築するために使用されます。
Reactを使用すると、再利用可能なUIコンポーネントを作成できます。
今すぐReactの学習を開始❯例による学習
「ShowReact」ツールを使用すると、Reactのデモを簡単に行うことができます。コードと結果の両方が表示されます。
例：
import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
return <h1>Hello World!</h1>;
}
ReactDOM.render(<Hello />, document.getElementById('root'));
演習による学習
Reactクイズ
クイズでReactスキルをテストします。
Reactアプリを作成する
Reactを学習してテストするには、コンピューターにReact環境をセットアップする必要があります。
このチュートリアルでは、を使用しcreate-react-appます。
このcreate-react-appツールは、Reactアプリケーションを作成するための公式にサポートされている方法です。
を使用するにはNode.jsが必要ですcreate-react-app。
アプリケーションを作成するディレクトリでターミナルを開きます。
このコマンドを実行して、次の名前のReactアプリケーションを作成します
my-react-app。
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アプリを含む新しいブラウザウィンドウがポップアップ表示されます。そうでない場合は、ブラウザを開いて
localhost:3000アドレスバーに入力します。
結果：
詳細についてはcreate-react-app、Reactの「はじめに」の章をご覧ください。
あなたがすでに知っておくべきこと
React.JSを始める前に、次のような中級の経験が必要です。
- HTML
- CSS
- JavaScript
また、ECMAScript 6（ES6）で導入された新しいJavaScript機能についてもある程度の経験が必要です。これらについては、ReactES6の章で学習します。