2019年3月22日スポンサーリンク今回業務で開発しているプロジェクトにReactを入れてみることになりました。それにあたって、学習のためにReactのサンプルプログラムを作成しようと思い、そのための環境構築をしたのでその手順をまとめていきます。スポンサーリンクContentscreate-react-appについて手順npmをインストールするcreate-react-appをインストール今後の展望create-react-appについてReactで書かれたプロジェクトはビルドする必要があるので、WebPackなどのツールをいれていろいろ設定しないといけません。Reactの開発元であるFacebookが、素早くプロジェクトを作成して開発することができるコマンドラインツール、create-react-appを公開していまして、これを使用するとものすごく簡単に環境構築をすることができます。初心者だとつまづきがちな環境構築を簡単にすることができるのはありがたいです。手順ここから具体的な手順を説明していきます。npmをインストールするnpmが使える必要があるので入っていない場合はインストールしていきます。npmはNode.jsのパッケージ管理ツールです。npmのインストールの手順に関してはこちらの記事にまとめてあるのでインストールしてない方は、こちらを参考にしてください。【Mac】HomebrewでNode.jsとnpmをインストールするこの記事ではNode.jsとnpmをHomebrewとnodebrewを使ってインストールする手順を説明していきます。...create-react-appをインストールcreate-react-appをインストールします。create-react-appこれで環境構築は終了です。次にプロジェクトを作成します。作成したいディレクトリに移動して、以下のコマンドを叩きます。(project_name)今回はreact-sample-appというプロジェクト名にしましたので、以下のようにしました。react-sample-app実行するとこのようになります。startというのを実行すると、開発用のサーバーが起動するとのことです。作成されたディレクトリ内に移動して実行します。僕の場合はyarnでしたが環境によってnpmだったり違うので、表示されたとおりにやれば問題ないと思います。こんなかんじで自動でブラウザが開いて起動されます。プロジェクト内のコードをいじった際にはすぐ勝手にビルドして反映してくれるので開発もすごくしやすいです。今後の展望さて、Reactを開発していく環境が整いましたので、今後はReactのチュートリアルを手順通りに作成してみて学習していこうと思っています。実際にやってみたのをこちらの記事にまとめたのでよかったらどうぞ!【入門】Reactチュートリアルをやりながら実践入門業務で開発しているプロジェクトでReactを入れることになりまして、そのためのインプットとしてReactの公式チュートリアルを行いました。Reactには入門として公式のチュートリアルがあります。英語で書かれていますが、この記事では日本語で解説していきます。初心者の方でもわかってもらえるように、押さえておくべき部分が出てきた時にその都度解説を挟むようにしています。当サイトはエックスサーバーで運営しています。方はこちらの記事を参考にしてください。仮想通貨1【windows】FFmpegをインストールする手順2FFmpegで動画変換!各OSごとのインストール方法と使い方まとめ3【簡単】MacにHomebrewをインストールする方法と基本的な使い方4macOSにXcodeをインストールしよう5HomebrewでMacにFFmpegをインストールする方法と使い方6BootCampでMacにWindows10をインストールする7〜初心者でもわかるswift入門〜基本文法からiOSアプリを開発するまで8【swift入門】apiを叩いてTableViewに表示させる9【Xcode】ファイル追加削除するときの注意10【入門】Reactチュートリアルをやりながら実践入門お問い合わせこちらからお願いいたします。