Reactチュートリアル#1 ~ 環境構築編 ~

この記事はReactチュートリアルを始めようとして環境構築(WELCOMEページ)で挫折した過去の私へのメモ書きです。

まずは環境構築から…! Reactの環境構築の記事はたくさんあるのですが、公式に習っていこうと思います。

あわせて読みたい
チュートリアル:React の導入 – React ユーザインターフェース構築のための JavaScript ライブラリ

リンクをみたらわかるのですが、Reactの環境構築に必要なのはたったの2ステップ!

  1. Node.jsのインストール
  2. コマンドを打って、プロジェクトファイルを生成する。

これだけ!なんで挫折したんだろう…

1. Node.jsをインストール

ターミナルで

node -v

とコマンドを打ってバージョンが表示された場合は既にインストールされています。

私は既にインストールされてて、インストールしたのが太古の昔なのでやり方を覚えてないという..
とりあえずnode.jsを使いたいだけの場合は、公式サイトからインストーラをダウンロードすればできます。

チーム開発をやることになり、個人開発で使っているものとは別のnode.jsのバージョンを使わないといけないなどになった場合は、node.jsのバージョン管理ツール(NVMが有名)を使えばよさそうです。

Node.js
Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

2. コマンドを打つ

ターミナルでプロジェクトファイルを生成したいところまで移動して、

npx create-react-app [アプリの名前]

と打つと、後はプロジェクトファイルをいい感じぬにつくってくれます!

ファイルが作れたら、ターミナルでcd [アプリの名前] で移動して、

npm start

を打つと、http://localhost:3000/ でReactのマークがくるくるしているwelcomeページをみることができます!なんて簡単なんだろう…
※もし他でポート3000番使っていたら、「別のポート番号ダウンロードする?」的な提案がでてきます。

react welcomeページ
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次
閉じる