React環境設定をしてHelloWorldを表示しよう

面倒な環境設定。

既にインストール済みの場合もあると思います。
バージョンの確認をしてインストール済みかどうかを確認してください。

Node.jsのインストール

下記のURLをクリックします。
https://nodejs.org/ja/
LTS版をダウンロード

インストールが完了したら、ターミナルにコマンドを入力して、
無事にインストールをしているかを確認します。

$ node -v
v12.17.0

無事バージョンが表示されていればOKです。

yarnをインストール

$ npm install --global yarn

yarnのインストールが始まります。
無事に終わったら、バージョンを表示させて
インストールがされているかの確認をしましょう。

$ yarn --version
1.22.4

上手くインストールされたら次の3にいきましょう。
私は上手くいかず、エラーが起きました。
エラーのいち部分載せておきます。

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules

こちらで解決ができました。
https://qiita.com/NaokiIshimura/items/cc07441939b226e779c6

create-react-appのインストール

$ yarn global add create-react-app

create-react-appを使うことで、
簡単にreactを使うためのパッケージがインストールできるようになります。

reactの起動を確認

実際にアプリケーションを作ってみたいと思います。

create-react-app hogehoge
は、実行したコマンド以下にファイルを作ってしまうので必要な場合は、
ファイルの作成や移動をお願いします。私の場合のも載せておきます。

$ mkdir react-workspace
$ cd !$

アプリケーションの作成をします。

$ create-react-app helloworld

Success!メッセージが表示されていればOKです。

Success! Created helloworld at /Users/user/react-workspace/helloworld

作成したファイルに移動します。

$ cd !$

アプリケーションを実行します。

$ yarn start

上手くいけばlocalhost:3000が起動してブラウザが表示されると思います。

HelloWorldを表示

ファイルのhelloworld/src下にあるApp.jsを開きます。
内容を以下のように書き変えましょう。

import React from 'react';

class App extends React.Component{
  render()
  {
    return (
    <div>
      <h1>HelloWorld</h1>
    </div>
    );
  }
}

export default App;

App.jsを書き変えて保存したら、ブラウザを確認してみましょう。
「HelloWorld」が表示されたら成功です。

これで環境設定は以上になります。
reactの起動を止めるのはコマンド上で「control+c」です。

以上、reactの環境設定編でした。

お疲れさまでした！