Reactの続きです。前回はクラスコンポーネントの属性を設定して固有の値を設定しました。これまではCodePenで単一ページ内のコンテンツ作っていましたが、今回からはSPA(シングルページアプリケーション)を作るべく「Create React App」を使ってみます。それでは行きましょう!
【目次】
- Create React Appとは
- Reactプロジェクトのインストール
- インストール成功後のターミナルの表記
- プロジェクトを実行してみる
- エラー発生!(babel-jestのバージョン違い)
- エラーコードにある手順を試す
- ユーザ直下のbabel-jestフォルダを削除!
- jestもバージョン違いだってよ!
- プロジェクト起動成功!
- 最後に
※参考:【React】クラスコンポーネントで属性を設定する - クモのようにコツコツと
※Reactでやってみたことまとめ
qiita.com
Create React Appとは
今回も掌田さんの「React.js & Next.js入門」を参考に進める。
- 作者:掌田津耶乃
- 発売日: 2019/08/30
- メディア: Kindle版
まず、Create React Appってなんなのか。
React公式サイトの「ツールチェーン」紹介ページ
Create React App
Create React App は React を学習するのに快適な環境であり、React で新しいシングルページアプリケーションを作成するのに最も良い方法です。
ツールチェーンってなんぞ?
ソフトウェア分野におけるツールチェーン(英: toolchain)は、製品(典型的には他のコンピュータ用のプログラム、またはシステムプログラム)を製作するのに使われるプログラム(ツール)の集合体である。一つのツールの出力が他のツールの入力となり、連鎖的に使われることからツールチェーンと呼ばれる。
Create React Appの公式サイト
※参考:Create React App · Set up a modern web app by running one command.
Reactプロジェクトのインストール
「react_test」というフォルダを作り、ターミナルのcd
コマンドでフォルダに移動する。
cd /(フォルダ)/react_test
npx
コマンドでプロジェクトを作成する。
npx create-react-app プロジェクト名
プロジェクト名が「react_app」の場合、下記になる。
npx create-react-app react_app
しばらくインストール中の表示…
成功すると「react_app」フォルダが作られ、中にファイルやフォルダがインストールされている。
package.jsonを見ると下記がインストールされている。
"dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1" },
インストール成功後のターミナルの表記
インストール成功後のターミナルには下記の表記が出る。
Success! Created react_app at /(フォルダ)/react_test/react_app Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run 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 react_app npm start Happy hacking!
最後に「ハッピーハッキング!」てw
ここにはプロジェクトで使用するコマンドが書かれている。
npm start
はプロジェクトの実行npm run build
はプロジェクトのビルドnpm test
はプロジェクトのテストnpm run eject
はプロジェクトのイジェクト
npmでよく見る一般的なコマンド名だが
※参考:フロントエンド開発の3ステップ(npmことはじめ) - Qiita
最後のnom run eject
はあまり聞かない。アプリの長寿を保証する?
npm run eject で create-react-app はアプリケーションの長寿を保証する - valid,invalid
プロジェクトを実行してみる
まずはプロジェクトを実行してみる。
cd
コマンドで「react_app」フォルダに移動する。
cd react_app
プロジェクト実行は下記のコマンド
npm start
エラー発生!(babel-jestのバージョン違い)
お、なんかエラーになった。
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-jest": "^24.9.0" Don't try to install it manually: your package manager does it automatically. However, a different version of babel-jest was detected higher up in the tree: /Users/(ユーザ名)/node_modules/babel-jest (version: 25.1.0)
babel-jest
のバージョンに問題があると。ユーザ直下のフォルダとプロジェクトフォルダのバージョンが違う、みたいな感じかな。ユーザ直下の方が新しいバージョンになっている。
エラーコードにある手順を試す
エラーコードの中でこの手順を試してくれとあった。
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder. 2. Delete node_modules in your project folder. 3. Remove "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder. 4. Run npm install or yarn, depending on the package manager you use.
(翻訳)
1.プロジェクトフォルダー内のpackage-lock.json(package.json!ではありません)および/またはyarn.lockを削除します。 2.プロジェクトフォルダのnode_modulesを削除します。 3.プロジェクトフォルダーのpackage.jsonファイルの依存関係やdevDependenciesから「babel-jest」を削除します。 4.使用するパッケージマネージャーに応じて、npm installまたはyarnを実行します。
3のpackage.json
の中にdevDependencies
もbabel-jest
も見当たらないなぁ。。
試しにdependencies
のjest-dom
の行を削除してみた。それ以外もそれぞれ実行してみる。
どうだ!?
npm start
結果は変わらず。。
ユーザ直下のbabel-jest
フォルダを削除!
さらに調べるとこちらの記事が同じような症状だった。
※参考:React Hooksを学ぼうとしたらReactアプリをyarn startで起動できなかった - kdnakt blog
rm
コマンドは「remove(削除)」の略だな。
-r
オプションは下記の意味のオプションだった。
-r 指定したディレクトリ以下すべてのファイル・サブディレクトリを再帰的に削除します。
※参考:rm - UNIX/Linuxコマンド - IT専科
rm
コマンドでユーザ直下の方のbabel-jest
を削除してみる。
rm -r /Users/(ユーザ名)/node_modules/babel-jest
エラーなどの問題はなく削除完了した。
jestもバージョン違いだってよ!
よし、プロジェクト再実行!
npm start
すると先程のbabel-jest
と同じような内容で今度はjest
のバージョン違いを指摘している。またユーザ直下の方がバージョンが新しいようだ。
jest
もユーザ直下の方のフォルダを削除しちゃおう!
rm -r /Users/(ユーザ名)/node_modules/jest
プロジェクト起動成功!
プロジェクト再々実行!
npm start
おおお!ブラウザが立ち上がったあ〜〜〜! なんか、Reactのアイコンがクルクルと回っているう〜〜
URLはローカルホストでポート番号は3000番だ。
http://localhost:3000/
最後に
ということでCreate React Appのプロジェクトを作成し、実行してみました。
現時点では最初から用意されたReactアイコンがクルクル回っているだけですが、次回から内容を編集してコンポーネント開発をしてみたく思います。それではまた!
※Reactでやってみたことまとめ
qiita.com