4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

始めよう React(基礎編)! Part 3 - create-react-app

Posted at

本編では、すばやくReactの開発環境を作れるツールを紹介します。
#create-react-app とは
create-react-appはReactを創り出した、
Facebook社が作ったライブラリーにです。

create-react-appはReact開発時の配置を省略できますので、
Reactの開発ではかなり便利になります。

↓↓create-react-app公式のgitを添付します。
create-react-app
興味がある方読んでください。

#create-react-appを使う前
前章で話しましたNode.jsをインストールする必要があります。
始めよう React(基礎編)! Part 2 - 環境構築
またインストールしていない方は上記URLに参考して下さい。

#create-react-appの使い方

###:one:インストール
 前章で紹介したNPMを使ってインストールします。
 こちらの -g は「グロバール」の g になります。
 -g でインストールしたら、そのままcreate-react-appのコマンドを使用できるようになります。

$ npm install -g create-react-app

:asterisk:グロバールインストールとは
・ローカルインストール(-gなし)
 1. 生成ファイル内の./node_modules配下にインストールします
 2. importを使って使用できます。

・グロバールインストール(-gあり)
 1. /usr/local また nodeのディレクトリにインストールします。
 2. そのままターミナルでインストールされたライブラリーのコマンドを使えます。

###:two:create-react-appでreactのウェブアプリケーションを作る
下記のコマンドを使えば、素早くreact環境のウェブアプリケーションを作れます。

$ create-react-app [ファイル名]

ファイルは下記のように生成します。
:one:インストール
hello-react_00.png

:two:使い方書かれてます。
hello-react_command.png
:asterisk:yarnとは(facebookにはこちらを推奨しています)
 yarnはnpmと似てるようなパッケージマネージャーです。
 :arrow_down:興味がある方こちらをご覧ください。
 yarn参考①
 yarn参考② 
 yarn参考③

:three:このようなファイル構成になります。
hello-react_vs.png

###:three:Reactで構成したウェブアプリケーションを動いて見よう
コマンドでインストールしたファイルのディレクトリに移動し、
下記のコマンド入力します。

$ npm start

または

$ yarn start

を実行すると基本的にhttp://localhost:3000に繋がります。
hello-react_hello.png

Welcome to React表示したらReactを無事に実行しました。

#最後に
create-react-appは如何でしょうか。
かなりのスピードでreact環境を立ち上げることが出来ます。
ここまで読んで頂きまして、ありがとうございます。

次回は今回作ったファイルについて、よく使う部分を解析していきます。
興味がある方是非見てみてください!!

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?