はじめに

お疲れさまです。急に寒い日々が続いていますが、皆様はいかがお過ごしでしょうか？

半年間、業務量が倍になり、なかなか技術本を読む時間が取れなかったです。。

しかし、最近は落ち着いたので、本を読む時間が取れそうです。。！（あとゲームも）

Reactを勉強することにしました。

素のJavaScript（かろうじて、ES2015の記法を習得）に書き慣れているのですが、
本腰を入れて有名なフレームワーク Reactを勉強してみることにしました。
今回は環境構築を中心に備忘録として投稿します。

Windows11
Visual Studio Code
Node.js

Reactの開発環境を整える。

vscodeを開き、新しいフォルダーを作成します。
cmdを起動し、以下のコマンドを入力します。(sampleは任意のフォルダ名になります。）

npx react-create-app sample
~~~

1. ローカル環境でReactを起動してみます。

cd sample #プロジェクトに移動
npm start #start コマンドを実行する

下のように、表示されると、環境構築成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1501045/050efc1f-bfe3-ea6c-67eb-ceca49cae80f.png)

# Hello World!を表示してみる。
せっかくなんで、Hello world!をしてみましょう。

現在のフォルダ構成は以下の状態になっていると思いますが、
srcフォルダ内のindex.js以外のファイルを削除してください。

sample
├─node_modulues
├─public
└─src


index.jsを以下のように変更しましょう

```index.jsx
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return(
    <>
      <h1>Hello World!</h1>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById('root');

下のように表示されましたでしょうか？

所感

今回は、Reactの環境構築とHello Worldの表示を行いました。
index.jsで少しだけ登場したJSX記法。。最初は、違和感ありましたが、
書いてみるとなかなか、面白いですね。
今回はh1タグ一つだけですが、これを関数コンポーネントを利用して画面の一つ一つを部品として
とらえて、描画していきます。

終わりに

1回目の投稿で、Pythonを使った自動翻訳を紹介しました。
（動かないコードを公開する大失態をしでかしてますが。。）
2回目でReactの環境構築を紹介して、何をしてるんだと思います。

。。実は、Pythonの自動翻訳ですが、結構注文が来てます。「このファイル翻訳してください」と。
需要があるなら展開しようと考えたのですが、どうせならGUIで操作できるようにしたいな～と
それなら、フロントエンドをReactで作ってみよう！と現在学習中です。

Webサーバーの環境はないので、デスクトップアプリとして展開するのですが、
Python寄りでEelを使用するか、JavaScript寄りでElectronを使用するか。ですね。

そこまで、急ぎの案件ではなく、業務改善の一環で行っていることですので、
手堅く作るならElectronでしょうか？

EelとElectronも環境構築できる程度は学習しましたので、これらも投稿できればいいかなと
思っています。

長文になりましたが、Reactに入門してみました。
ここまで読んで頂いた方、ありがとうございました。

次の投稿は。。来年かな？