React で Hello World

最近、vue やら React を始めましたが、なぜこんなことばかりしているかというと、自分のホームページがあまりにも古臭く、また最近は新しいページも増やしていませんが、もし増やすとすれば、コピー・ペーストではあるものの何だか効率の悪い方法だなと以前から感じており、何とかならないかと感じていたからです。

それと、Laravel を導入する際に react も考えたのですが、やってみて余りにも難しくて挫折した経験があり、やはり何とかしたいと以前から感じていたためです。

最近では、React から gatsby を使ってホームページを作成するのが流行ということでやってみようと思い立ちました。

このサイトを参考させて頂きました。

環境

yarn のインストール

yarn というのは node のパッケージマネージャで、npmよりも高速で信頼度の高いものになっているとのことなので yarn をインストールします。

npm install --global yarn

以下のようなエラーが。

npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/yarn
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn'
npm ERR!  [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/yarn'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'mkdir',
npm ERR!   path: '/usr/local/lib/node_modules/yarn'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in: /home/mituo/.npm/_logs/2024-02-18T00_18_36_741Z-debug-0.log

例によって chatGPT に訊いてみると、sudo は推奨されないとのこと。

chatGPT の言われるままに、

sudo npm install --global yarn
npm config set prefix ~/.npm
npm install --global yarn

yarn --version
1.22.21

creat-react-appのインストールとプロジェクト作成

creat-react-app をインストールすれば、パッケージのインストールが簡単に素早くできるようです。

yarn global add create-react-app

プロジェクトを作成します。

yarn create react-app helloworld

~/ に 172.6 MB の大きな helloworld フォルダが作成されます。

起動します。

cd ~/helloworld
yarn start

Hello World

~/helloworld/src/App.js の編集。

import React from 'react';

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

export default App;

vue と react では vue の方が学習コストが低いとのことで vue を始めたのですが、ホームページを gatsby で作るには react が必要らしいので、react を少し勉強してみます。