# ReactJSの始め方 ###### tags: `react` `Mac` ## ReactJSの始め方 ### 種類 - CDN 経由で読み込んでアプリを作成していく。 - これもいいけど、コマンドで必要ファイルとかを作ってくれる方が楽でいいので、これはパス。 - Macのbrewを利用して環境構築をする。 - create-react-appなるコマンドが少し重いみたいだが、一番最初しか使わないし、こっちで環境を構築する。★ ← 今回はこっちを選択します。 ## ReactJSとは？ 上で始め方と銘打ってあたかも知っている前提なのかって感じですが、まだまだほんのかじった程度。 **すごくざっくりいうとJSでHTML書いちゃうし、なんならAPIからGETとかPOSTしてMVCなことも出来ちゃう**フロントエンドのライブラリ。 またJavaScriptがベースなので、基本ページの再読み込みとか走る感じではなく、差分のあるDOMを変更していく感じ。 まあとにかく流行っているし、求人とかも多いので、ある程度触れる用になっておくといいかと思いますので、構築の仕方参考にしてみてください！ ## brew で必要なものをインストールする。 ### まずは brew 自体の更新など。 ```bash= brew update # 時間がかかります。おとなしく待ちましょう。 # もしbrew update後 warning で upgrade してと出たらおとなしく従いましょう。 # もし出たら brew upgrade # 超時間かかります。おとなしく待ちましょう。 brew -v # バージョンが正しく出てくればOKです。 # あまり経験ありませんが、変なメッセージ出てきたらコメントください。 ``` ### npm コマンドを使えるようにするためにnodejsを入れる。 ```bash= brew install nodejs node -v npm -v # バージョンが出てくればインストール成功です。 ``` ## reactのプロジェクト作成コマンドをインストール reactJSの環境構築はざっくりいうとここインストールすれば終わりです。 プロジェクト出来てから入れるコマンドありますが、これさえ終わってしまえば、8割型完成です。 ```bash= npm install -g create-react-app ``` 終わりです。 試しに下記でプロジェクトを作成してサーバーを立ち上げてみましょう。 ## reactでプロジェクト作ってサーバー立ち上げ ```bash= create-react-app test_app # cd test_app/ npm start ``` 終わりです。 勝手にlocalhost:3000のブラウザが立ち上がって「歓迎」画面が出てきます。 あとは出来たプロジェクトファイルを色々と弄ってアプリを作っていきましょう！ アプリの作り方に関しては乞うご期待！