Ubuntuにreactをインストールして動作確認する
Ubuntu20.04にインストールしている
npmのインストール
sudo apt install npm
reactのインストール
sudo npm -g install create-react-app
バージョンの確認
create-react-app --version
プロジェクトを作り、開発用サーバーを起動する
create-react-app myproject
プロジェクトを作る。
cd myproject
npm start
開発用サーバーを起動すると自動的にブラウザが立ち上がる。127.0.0.1:3000が表示される。
src/App.jsを下記のように修正するとHelloWorldが表示される。
import React from 'react';
const App = () => {
return (
<div>
<h1>Hello World</h1>
</div>
);
}
export default App;
ちなみに、このHelloWorldが表示されるhtmlはpublic/index.htmlから来ている。
【補足1】Nodeが古いと言われたら？
You are running Node 10.19.0.
Create React App requires Node 14 or higher.
Please update your version of Node.
と言われた。
こういう時は、Nodeをアップデートする。
sudo npm cache clean -f
sudo npm install -g n
sudo n stable
sudo n latest
sudo apt-get install --reinstall nodejs-legacy
sudo n rm 6.0.0 #ここをバージョンを変えておく
sudo npm uninstall -g n
参照元: https://askubuntu.com/questions/426750/how-can-i-update-my-nodejs-to-the-latest-version
結論
これでインストール完了である。
本格的にReactの開発をする前に、モダンなJavaScriptの知識も確認しておきたい。
Reactに必要なJavaScript構文【ES2015(ES6)のテンプレート文字列、アロー関数、スプレッド構文、letとconstなど、脱jQueryにも有効】