一緒にReactベータ版でHello Worldしよ！
初心者がHello Worldしてみたという記事はたくさんありますので、一緒に頑張ろう‼というスタンスで進めていきたいと思います。
React beta版のinstallationを順番通りやっていきます。
アプリ開発の最初の壁は、環境構築ですよね。
例えば、Node.jsの場合npm initしてアプリの土台を作っていくことは大変なことでした。
Reactに初めて触ったとき、なんて至れり尽くせりなんだ！と感動しました。
今回参考にしたサイトはこちらです。
ではご一緒に、まずはmy-appというプロジェクトを作成していきましょう。
ターミナルで下記コードを実行します。
npx create-react-app my-app
するといろいろとインストールしてくれるみたいです。
Creating a new React app in C:\Users\hogehoge\source\repose\beta-react\my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
略
Created git commit.
略
We suggest that you begin by typing:
cd my-app
npm start
Compiled successfully!
という感じであれよあれよという間にmy-appができました。
途中でCreated git commit.とあります。ほぉぉぉ、gitまでつくってくれるんか。
my-appのフォルダを見に行くと、
.git、node_modulesなどなどできていますね。
なんて至れり尽くせりなんだ。。。
では、installationの続きをやっていきましょう。
cd my-app
npm start
せよと。
You can now view my-app in the browser.
Local: http://localhost:3000
On Your Network: http://172.21.160.1:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
サーバーが立ち上がり、ブラウザでもhttp://localhost:3000 が開いてReactのマークがくるくるしています。
とりあえず今回はここまで！
でも、Hello World!すると宣言したので、「Hello World!」を追加してみましょう。
/my-app/scr/App.jsを開き、<h1>Hello World!</h1>を追加します。
略
<img src={logo} className="App-logo" alt="logo" />
<h1>
Hello World!
</h1>
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
略
コードを変更すると自動でコンパイルされ、「Hello World!」が表示されました。
installationはまだまだ続きます。今後も続きをアップしていきます。
では、最後に地図パズル製作所の宣伝をします。地図パズル製作所は大人も子供も楽しめる地図パズルです。ぜひ遊んでみてください！
Discussion