Reactはじめに

❮ 前次 ❯

本番環境でReactを使用するには、 Node.jsに含まれているnpmが必要です。

Reactとは何かの概要を知るために、HTMLで直接Reactコードを書くことができます。

ただし、本番環境でReactを使用するには、npmとNode.jsがインストールされている必要があります。

HTMLで直接反応する

Reactの学習を開始する最も簡単な方法は、HTMLファイルに直接Reactを書き込むことです。

W3Schoolsスペース

HTMLファイルの作成を開始する最も簡単な方法は、W3SchoolsSpacesです。

作品を作成、編集、他の人と共有するのに最適な場所です。

無料で始めましょう❯

最初に3つのスクリプトを含めることから始めます。最初の2つはJavaScriptでReactコードを記述し、3つ目のBabelは古いブラウザーでJSX構文とES6を記述します。

JSXの詳細については、 ReactJSXの章をご覧ください。

例

HTMLファイルに3つのCDNを含めます。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>

    <div id="mydiv"></div>

    <script type="text/babel">
      function Hello() {
        return <h1>Hello World!</h1>;
      }

      ReactDOM.render(<Hello />, document.getElementById('mydiv'))
    </script>

  </body>
</html>

このReactの使用方法は、テスト目的では問題ありませんが、本番環境ではReact環境をセットアップする必要があります。

認定を受けましょう！

Reactモジュールを完了し、演習を行い、試験を受けて、w3schools認定を取得してください!!

95ドル登録

React環境のセットアップ

npxとNode.jsがインストールされている場合は、を使用してReactアプリケーションを作成できますcreate-react-app。

以前create-react-appにグローバルにインストールしたことがある場合は、パッケージをアンインストールして、npxが常に最新バージョンのを使用するようにすることをお勧めしますcreate-react-app。

アンインストールするには、次のコマンドを実行しますnpm uninstall -g create-react-app。

このコマンドを実行して、次の名前のReactアプリケーションを作成します my-react-app。

npx create-react-app my-react-app

はcreate-react-app、Reactアプリケーションを実行するために必要なすべてをセットアップします。

Reactアプリケーションを実行する

これで、最初の実際のReactアプリケーションを実行する準備が整いました。

次のコマンドを実行して、my-react-appディレクトリに移動します。

cd my-react-app

次のコマンドを実行して、Reactアプリケーションを実行しますmy-react-app。

npm start

新しく作成したReactアプリを含む新しいブラウザウィンドウがポップアップ表示されます。そうでない場合は、ブラウザを開いて localhost:3000アドレスバーに入力します。

結果：

Reactアプリケーションを変更する

これまでのところ良いですが、どうすればコンテンツを変更できますか？

my-react-appディレクトリを見ると、srcフォルダが見つかります。フォルダ内に、srcというファイルがあり、 App.jsそれを開くと次のようになります。

/myReactApp/src/App.js：

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

HTMLコンテンツを変更して、ファイルを保存してみてください。

ファイルを保存した直後に変更が表示されることに注意してください。ブラウザをリロードする必要はありません。

例

<div className="App">内のすべてのコンテンツを <h1>要素に置き換えます。

[保存]をクリックすると、ブラウザで変更が表示されます。

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

export default App;

不要なインポート（logo.svgおよびApp.css）を削除したことに注意してください。

結果：

次は何ですか？

これで、コンピューターにReact環境ができ、Reactについてさらに学ぶ準備が整いました。

このチュートリアルの残りの部分では、「Show React」ツールを使用して、Reactのさまざまな側面と、それらがブラウザーにどのように表示されるかを説明します。

コンピューターで同じ手順を実行する場合は、srcフォルダーを削除して1つのファイルのみを含めることから始めますindex.js。また、ファイル内の不要なコード行を削除index.js して、以下の「ShowReact」ツールの例のようにする必要があります。

例

[例の実行]ボタンをクリックして、結果を確認します。

index.js：

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

const myfirstelement = <h1>Hello React!</h1>

ReactDOM.render(myfirstelement, document.getElementById('root'));

❮ 前次 ❯

Reactチュートリアル

Reactフック

React演習