Help us understand the problem. What is going on with this article?

create-react-appを使用したReactの環境構築(TypeScriptも)

はじめに

久々、環境構築をしたのでまとめました。
今回はcreate-react-appを使用してreactの環境構築をしていきます
どなたかの参考になれば。

環境

まずは作業を始める段階でのバージョンです。
homebrewは入っている前提で作業を進めていきます。

名前 version 補足
MacOS 10.15 Catalina
homebrew 2.5
node.js 12.9
yarn 1.22 stable
create-react-app 3.4

以下、今回インストールする物のバージョンです。

名前 version 補足
nodebrew 1.0
node.js 14.10 stable 更新します
yarn 1.22 stable
create-react-app 3.4

nodebrewのインストール

まずhomebrewを使用して、nodebrewをインストールしていきます。
既にnode.jsが入っているので必要ないといえばないのですが、後々のことを考えてnodebrewを使用することにしました。
まずはインストール。

$ brew install nodebrew

私の場合、エラーが出ました。出なかった人はスルーしてください。
gccをインストールしないとビルド出来ないよとの事なのでインストールします。
終わったら再度nodebrewをインストールします。

Error: An exception occurred within a child process:
  CompilerSelectionError: nodebrew cannot be built with any available compilers.
Install GNU's GCC:
  brew install gcc

インストールが終了したら確認
バージョンが表示されたら成功です。

$ nodebrew --version

nodebrewがインストールされたらpathを通します。
私はCatalinaなのでzshですがbashの人は.bashrcで入力してください。
もちろんvimで直接入力しても問題ありません。

$ nodebrew setup

export...とパスが表示されるのでそれをコピーして↓のコマンドを入力
$ echo '{コピペしたやつ}' >> ~/.zshrc

次にnode.jsの安定版をインストールします。
バージョンを指定したい場合はstableの部分を指定のバージョンを書き入れましょう。
迷ったらとりあえず安定版。

$ nodebrew install-binary stable

インストールされていたら確認と指定をしていきます。

インストール出来ているか確認します
$ nodebrew list

今回はv14.10.1がインストールされていたのでこちらを使用します。
$ nodebrew use 14.10.1

nodeのバージョンを確認。14.10.1になっていればOKです
$ node -v

以上で、nodebrewとnode.jsのインストールは終了です。

react.jsの環境構築

yarnのインストール

node.jsのパッケージマネージャーであるyarnをインストールします。
こちらもhomebrewから。

$ brew install yarn

終わったら確認

$ yarn --version

react-create-app

reactはreact-create-appを使用するのが一番楽なのでyarnからこちらをインストールします。

$ yarn global add create-react-app

インストールされたら使用可能です!

$ create-react-app {名前}

まとめ

最近、自分のPCで開発をしていなかったので、なかなか長い道のりになりました。
作業を進めながら書いたので抜けはないかと思いますが、何かありましたらコメントお願いいたします!
近々react+typescriptの環境構築もするので、そちらもまとめますー!

追記

TypeScriptの設定を調べたのですが、どうやらcreate-react-appで簡単に設定出来るようです...!

$ create-react-app {アプリ名} --typescript

オプションを指定するだけで行けるらしいです...!簡単!!

fukaya_path
主に自分のメモとして使っています。 2019年6月から学習し始めました。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした