Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

React チュートリアル

Reactは、ユーザーインターフェイスを構築するためのJavaScriptのライブラリです。

Reactは、シングルページアプリケーションの構築に使用されます。

Reactを使用すると、再利用可能なUIコンポーネントを作成できます。

今すぐ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はじめよう（開発準備中）のcreate-react-app章で説明します。


知っておくべきこと

React.JSを使い始める前に、次の中級レベルの経験が必要です。

  • HTML
  • CSS
  • JavaScript

また、ECMAScript6(ES6)で導入された新しいJavaScript機能についてある程度の経験が必要です。これらの機能については、React ES6章で説明します。


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル