React動かしてみる





create-react-appをインストールする

Node.jsがインストールされている環境で以下のコマンドを実行

1
npx create-react-app my-app

新しいプロジェクトが作成される

1
cd my-app

プロジェクトへ移動する

1
npm start

もしくは

1
yarn start

サーバーを起動
http://localhost:3000で表示されれば成功

npxとは

ローカルのnpmパッケージを使用するには

  • ./node_modules/.bin/(パッケージ名)
  • $(npm bin)/(パッケージ名)
  • npm run タスク名 // package.json内のnpm-scriptsで記述したタスク必要
    npxは以下のように実行できる
    1
    npx (モジュール名)

まとめると

  • Node.jsをインストールすると一緒にインストールされている
  • ローカルに存在しないパッケージでも実行可能
  • プロジェクト内の’node_modules/.bin’内のアプリを直接実行する事ができます
  • Yarnでは、runコマンドでローカルのパッケージを実行できる
  • プロジェクトによっては普通にローカルインストールするべき
  • グローバルだと,Linuxなどでは、root権限が必要な領域に書き込んでしまい、権限が必要だったり、環境汚染してしまう

npm startでエラー

1
2
3
4
5
6
7
8
9
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "babel-eslint": "10.0.1"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-eslint was detected higher up in the tree:

下記のサイトを参考にして進めたらエラーがなくなりました
npm startで怒られたときの話｜はじめ＠休学ラボ｜note