仕事でReact開発を行うことになったので、基礎の基礎であるReactプロジェクト作成と初期画面の表示まで行ってみます。
環境は以下のとおりです
・Intel Mac MacOS12 Monterey
・npm 8.12.2
Reactプロジェクトの作成
Reactプロジェクトの作成から、サンプルページの実行までは以下の3行を実行すればよいだけです
npx create-react-app hello-world
cd hello-world
npm start※npxはスペルミスではなく、npm5.2から同梱されているコマンドです。こちらの記事が参考になりました
上記のコマンドを実行するとブラウザが勝手に起動し、「http://localhost:3000」にアクセスし、以下の画面が表示されると思います。
これでReactプロジェクトの作成は完了です。結構簡単に作成出来ますね！
ちょっといじってみる
画面に表示されている通り、プロジェクト内のApp.jsを編集して保存すると、自動でリロードされて変更が反映されます。
少しいじってみます。
プロジェクトの構成は以下のようになっています。
Learn Reactと記載されている部分をハローワールドに書き換えてみました
ご覧の通り、メッセージが切り替わりました。保存したタイミングで自動でリロードが走るので、手動リロードも必要ありません
ちょっとだけJSXに触れてみる
JSXはjavaScript構文を拡張したものです。Reactコンポーネントを記述する際に用いられています。
公式の説明はこちらからどうぞ！
以下のようにプログラムを書き換えてみました
ご覧の通り、H1タグを変数に大入し、その変数を{}を利用して参照しています。
JSX構文ではこの通り、変数にタグ情報を設定できたり、その内容を{}を利用して参照したり出来ます。
上記の改修を行うと、以下のような画面になります。
変数に代入したH1タグが展開されて、画面に表示されました
HTMLタグが変数に代入できるという感覚はなんとも不思議な漢字ですが、JSX構文では有効な記述となっています
以上
とりあえずReactのプロジェクトを作成し、少し改造するところまで記事にしました。
ちょっとだけ触った漢字だと、Vueよりも扱いやすい印象を受けたので、今後は趣味開発でもReactを採用していきたいと思いました。
