はじめに
お疲れさまです。急に寒い日々が続いていますが、皆様はいかがお過ごしでしょうか？
半年間、業務量が倍になり、なかなか技術本を読む時間が取れなかったです。。
しかし、最近は落ち着いたので、本を読む時間が取れそうです。。！（あとゲームも）
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 コマンドを実行する
下のように、表示されると、環境構築成功です。
# 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に入門してみました。
ここまで読んで頂いた方、ありがとうございました。
次の投稿は。。来年かな？