【React入門②】create-react-appコマンドでローカル開発
こちらの記事は、React入門チュートリアルです。
Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。
create-react-appを使おう
さて、ここまでnpm installコマンドで基本的なreactのインストール方法を見ましたが、実は簡単にプロジェクト構成の作成が行えるパッケージをReact公式がnpmに公表しています。
そして、その雛形を作ることができるコマンドが
$ create-react-app {YOUR_PROJECT_NAME}
なのです。
フルスクラッチでReactのアプリケーションを作成するとなると、
- ソースコードのビルド作業
- 多種多様なパッケージのインストール、設定
などが必要となります。
個人開発の範囲ではただ手間がかかるだけですが、チーム開発となると統制の取れない原因となりかねません。
そのため、これからReactを構築する際にはcreate-react-appコマンドを使用していきましょう。
ユーザーディレクトリに戻り、以下のコマンドを入力します。
$ npm install -g create-react-app // create-react-appコマンドのインストール $ create-react-app my-app // my-appディレクトリの作成と雛形パッケージインストール
create-react-appコマンドが実行されれば、コマンドインストールの成功です！
依存パッケージのインストールとローカルサーバーのビルド
次に依存パッケージのインストールとローカルサーバーのビルドを行なっていきましょう。
$ cd my-app // プロジェクトのディレクトリに移動 $ npm install // npmの依存パッケージをインストール $ npm start // ローカルサーバのビルド
ローカルサーバが立ち上げると、以下のようなログがターミナルに表示されます。
Compiled successfully! You can now view my-app in the browser. Local: http://localhost:3000/ On Your Network: http://192.168.10.103:3000/ Note that the development build is not optimized. To create a production build, use npm run build.
そしてブラウザからはReactのデフォルトページが確認できるはずです！
雛形は
- node_modules
- public
- src
- その他ファイル
で構成されています。主だった2つのディレクトリの役割について見ていきましょう。
src
アプリケーションを動かすためのソースコードを格納。Reactが使用されているJavascriptファイルなどもこちらのディレクトリに入っています。
public
Reactで書かれたスクリプトの出力を行うための静的ファイルなどが格納されています。
App.jsを編集
先ほどローカルサーバに表示されていたReactのデフォルトページですが、こちらは/my-app/src/App.jsが大元となっています。
早速、App.jsを書き換えて見ましょう。
src/App.js
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>
{/* 編集 */}
Laravelとねころっけくん5.8
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
このように書き換えると…
無事に表示が切り替わりました。
