Reactをお勉強中な私です。
公式のチュートリアルを粛々とこなし、よく分からない部分はきちっと調べながら進めていこうと思います。
環境構築は、苦しむと思いきや、秒で終わりました・・
前提
- OS: Window 10
- Node.js version: 14.16.1
作業用ディレクトリ作成
- テキトーに、React-Tutorialフォルダを作成
プロジェクト作成
- 作業用ディレクトリで、
npx create-react-app my-appを実行する
PS C:\■■■■■■■■■■\React-Tutorial> npx create-react-app my-app
(略)
Success! Created my-app at C:\■■■■■■■■■■\React-Tutorial\my-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
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd my-app
npm start
Happy hacking!
npxとは
- npm 5.2 から利用できるパッケージランナーツール
- npm パッケージをインストールせずに実行できる
create-react-appとは
- Reactで簡単にシングルページアプリケーションを作成できる方法
- ビルド設定なしでReactアプリを作成できる
- 内部的にはwebpack、Babel、ESLintなどが使われている
ディレクトリ構成
my-app
├── README.md
├── node_modules // パッケージがインストールされるディレクトリ
├── package.json // アプリが依存するパッケージに関する情報を記録するのに使用するファイル
├── .gitignore // Gitでトラッキングしないファイルを指定できるファイル
├── public // Webで公開されるファイルを格納するディレクトリ
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src // JavaScriptやReactコンポーネントを格納するディレクトリ
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
└── setupTests.js
動作確認
-
npm startでサーバを起動する
PS C:\■■■■■■■■■■\React-Tutorial> cd my-app
PS C:\■■■■■■■■■■\React-Tutorial\my-app> npm start
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000
On Your Network: http://■■■■■■■■■■:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
-
http://localhost:3000/ が自動で立ち上がり、ブラウザに画面が表示される
