react

環境構築

anyenvのインストール

git clone https://github.com/anyenv/anyenv ~/.anyenv
echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(anyenv init -)"' >> ~/.bash_profile
exec $SHELL -l

nodenvをインストール

anyenv install nodenv

nodenvでnodeをインストール

nodenv install 12.10.0

以下のエラー出現

yuki@yuki:~$ nodenv install 12.10.0
nodenv: /home/yuki/.anyenv/envs/nodenv/versions/12.10.0 already exists
continue with installation? (y/N) y
Downloading node-v12.10.0-linux-x64.tar.gz...
-> https://nodejs.org/dist/v12.10.0/node-v12.10.0-linux-x64.tar.gz
Installing node-v12.10.0-linux-x64...
Installed node-v12.10.0-linux-x64 to /home/yuki/.anyenv/envs/nodenv/versions/12.10.0

nodenv: default-packages file not found

以下で解決

mkdir -p "$(nodenv root)/plugins"
touch $(nodenv root)/default-packages

yarnのインストール

npm install -g yarn

ReactのHello world

npx create-react-app hellow-world --typescript

hellow-worldというディレクトリが生成される。

そこで下記コマンド実行

yarn start

Reactアプリケーション作成手順

1. Node.jsインストール
2. プロジェクトのフォルダ名はreact_appとした

npx create-react-app <フォルダ名>

すると以下のようなコマンドが表示される。

cd react_app
yarn start

yarn startを実行するとブラウザで

ReactでTypescript

create-react-appはインストール済みとする。 ただしcreate-react-appはグローバルでインストールされてないといけない。

yarn global add create-react-app

で、これだけだとPATHが通ってないので、.bash_profileなどに以下を追記。

export PATH="$PATH:`yarn global bin`"

これで以下を実行。

create-react-app ts_react --typescript

するとtsconfig.jsonなどがある状態でプロジェクトが作成される。