![見出し画像](https://assets.st-note.com/production/uploads/images/109465832/rectangle_large_type_2_6900b1b791f6d1eb539e273a9e01842e.png?width=1200)
React!
参考サイトも見ながらJavaScriptのフレームワークReactを使ってTodoアプリを作ってみます。
環境構築ですが、できるだけ簡単にWebでできる開発環境を使います。PaizaCloudを最初に試しましたがエラーが出てしまったので、Replitを使って実行していきます。
Replitにログインして
![](https://assets.st-note.com/img/1688035757753-OfysCueG5K.png?width=1200)
Create Replを選択して、Templeteで"node.js"を選んで新規でコードエディタを立ち上げます。
![](https://assets.st-note.com/img/1688036048806-04r1RiIgZC.png?width=1200)
"Shell"を選んでReactのプロジェクトを作っていきます。
npx create-react-app firstApp
"fiestApp"がアプリ名になります。
これを実行すると
![](https://assets.st-note.com/img/1688036237287-UduycfvygY.png?width=1200)
と出てくるので"y"と打ち込んで"return"するとエラーが出ます。
アプリ名が使ってはいけない単語が入っているようなので
アプリ名を"my-app"にして再実行。
npx create-react-app my-app
RepltのCPUとRAMの制限がかかりそうでなんとかすすんでいきます。
![](https://assets.st-note.com/img/1688036806303-yybijAvvPn.png?width=1200)
左側に"my-app"とプロジェクトができています。そして右下のShellにはHappy hacking!と出て成功したことがわかります。その上に書いてあるコマンド
cd my-app
npm start
と実行すると、Webviewが立ち上がりReactでできたホームページが表示されます。あとは自分のやりたいようにカスタマイズするだけです。
![](https://assets.st-note.com/img/1688037032751-bstGKLoFNu.png?width=1200)
ここからが本番ということですね。
この記事が気に入ったらサポートをしてみませんか?