🌱

React の色々なサンプルを試すためのシンプルな方法 (create-react-app)

2020/10/09に公開1件

JavaScript

書いた動機

ネット上には様々な React のサンプルコードが提示されていますが、意外と環境構築について述べられている記事が見つかりませんでした
無論公開されているサンプルコードは無料ですし、「よかれと思ってコードを提供してくれている」ので親切な解説とは限った話ではありません
React のコードを身近に感じる人が増えればいいなぁ、と思った次第です
なので、手軽に React のスニペット(コード片)を手軽に試す方法を私なりに提示してみようと思いました

本題

React について調べていると色々なサンプルに出くわすことがあります。

例えば、「React Hooks のお勉強をしたいな〜」と思った時に下記の公式サイトが引っかかると思います。

フック早わかり - React

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

これだけ提示されても「実際にどう動くのか、自分の手元で試してみたい」と思っても分からない可能性があります。(察しの良い方は別として)

Node.js が実行できる環境を用意する

まずは Node.js の環境を用意します。

基本的には Node.js バージョン管理(Node.js Version Manager)をしてくれるツールを利用することをお勧めします。代表的なものとして下記のようなツールがあります

nvm
- Linux, macOS に対応している
nodist
- Windows のみに対応

これに関しては様々なサイトで述べられていますので、導入方法は省きます。

大切なのは 「プログラミング言語のバージョンを手軽に切り替えができて、アップデートも簡単になる環境を用意できる方法を知る」 ところがポイントだと思います。

なので、どれがいい、悪いというのはその場に合わせて柔軟に選択しています。

バージョン管理ツールをインストールしたら、基本的には最新版の LTS (Long Term Support) をインストールします。

2020/10/09 現在では Node.js の公式サイトを見てみると、12.19.0 が LTS になっているので、そのバージョンをインストールします。

下記は nvm を利用した場合のコマンドサンプルです

# インストール可能なバージョン一覧を表示
nvm ls-remote

# 12.19.0 をインストール
nvm install v12.19.0

React のサンプルコードを実行できる環境を用意する

脱線しましたが、ここからメインのお話になります。

端的に答えを言ってしまえば、 「create-react-appというコマンドを使う」 という一言です。

create-react-app コマンドというものは GitHub リポジトリの About にある「Set up a modern web app by running one command.」とある通り、React でのプロジェクトセットアップをコマンド一つで用意してくれるツールです。

下記コマンドで自分用のプロジェクトを作ることができます。

npx create-react-app (自分が作成したいディレクトリ名)

(npx とはなんぞや？と思った人は自分で調べてみてください)

先述した「本題」に提示したサンプルコードを試す

では試してみましょう。

改めてコードを見てみるとカウンタのサンプルなので、プロジェクト名は counter とします

npx create-react-app counter

インストールが完了すると、下記のようなメッセージが表示されます。

Success! Created counter2 at /Users/kaishuu0123/tmp/react-practice/counter2
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd counter
  yarn start

Happy hacking!

メッセージに提示されている通り、コマンドを実行します

cd counter
yarn start

そうするとブラウザが自動的に開き、下記のような画面が表示されると思います。

ではこの状態から、src/App.js を「本題」に提示したとおり、サンプルコードを書き換えましょう

before(書き換え前) と after(書き換え後) を提示しておきます (ファイルパスは src/App.js です)

before

import React from 'react';
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;

after

import React, { useState } from 'react';

function App() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default App;

書き換えた後にブラウザを再度見てみるとコードが反映されていることが確認できます

(コードの書き換えをすると自動的にブラウザがリロードされます)

おめでとうございます 🎉 これで「フック早わかり - React」を手元の環境で試すことができるようになりましたね。

他のプロジェクトのサンプルコードを試す

サンプルとして、最近話題になっている react-hook-form の「はじめる | React Hook Form」を試すこともできます。

コマンドの羅列になりますが、下記コマンドを実行してコードを書き換えるだけでお手軽に試すことができます。

# React Hook Form の練習をするので practice-react-hook-form という名前にしている
npx create-react-app practice-react-hook-form

cd practice-react-hook-form
# react-hook-form を追加
yarn add react-hook-form

App.js を下記のように書き換えます。(Syntax Error を指摘されるため <form onSubmit ... 前のコメント行は削除しました)

import React, { useState } from 'react';
import { useForm } from "react-hook-form";


function App() {
  const { register, handleSubmit, watch, errors } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); // watch input value by passing the name of it

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
    {/* register your input into the hook by invoking the "register" function */}
      <input name="example" defaultValue="test" ref={register} />

      {/* include validation with required or other standard HTML validation rules */}
      <input name="exampleRequired" ref={register({ required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}

      <input type="submit" />
    </form>
  );
}

export default App;

上手くいくと下記のような画面が表示されます。

最後に

create-react-app で手軽にサンプルコードを試す方法を書きました
create-react-app は偉大ですね◝( ⁰▿⁰)◜ ✨
React を身近に感じる人がもっと増えれば幸いです

Discussion

のふのふ🀄

こんにちわ！
自分はCodeSandboxというwebサイト使ってサンプルコード試してます！！
ブラウザ上ですぐ試せるので、create-react-app使うより構築が早いと思いますよ👍
https://codesandbox.io/