世界で一番簡単なReactの始め方

<h1>始めに</h1>

最近、巷でよく聞くようになったReact。ちょっと触ってみようかな？なんて、HPを検索するも
それっぽい情報がないし、いつになったら触れるんだよーってかた必見です。

<h1>Reactってそもそも何？</h1>
React,Reactってよく聞くけど何？みたいな方多いと思います。
聞いたことあるし、そんなこと知ってるって方は読み飛ばしてもらって構いません。
<a href="#jump">ここ</a>から飛べます

じゃあ、早速
ReactはJavaScriptのフレームワークです。
最近注目され始めています。その理由の一つに「リアクティブ」といった機能を搭載している点があげられます。
これは一体どういったことかというと、データの更新に応じて<span style="border-bottom:1px solid tomato;font-size:30px">自動的</span>に画面の表示内容を更新するという仕組みのことを言います。

何をいっているかわからない方、後ほどご紹介しますので、「ふ〜ん」程度にとどめておいてください。


<h1 id="jump">開発環境を作る</h1>
どんなフレームワークをやるにしてもまずは開発環境ですよね？
LaravelだったらHomesteadみたいな

Reactを動かすために必要なのはNode.jsと
<h2>Node.jsのインストール</h2>

<a href="https://nodejs.org/ja/"target="_brank">node.jsのインストール</a>はこのリンクからいけます。
![スクリーンショット 2019-06-13 15.25.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/51d39750-865b-ee5f-01ac-997fa14ffa3a.png)

まず見てもらうとLTS版とそうでない版があります。
ここではLTSをインストールしましょう。

10.16.0 LTSをポチッとな。。。。。。。。(ダウンロード中）

ダウンロードが終わったらダブルクリックして開きます。

するとこんなウインドウが開くので「続ける」を押しましょう
<img width="732" alt="スクリーンショット 2019-06-13 15.28.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/43a4b9bc-d4bd-0d07-ab19-8ad254de2125.png">

次は使用許諾契約画面が開きます。読みたい方は呼んでください。
僕は全部英語なので読みません😩
<img width="732" alt="スクリーンショット 2019-06-13 15.30.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/cf82559c-dbe0-274c-69d6-81057bbab93e.png">

ここで「続ける」を押すとこんな画面が出てきますが、構わず「同意する」を押しましょう<span style="color:red">⤴︎</span>

<img width="732" alt="スクリーンショット 2019-06-13 15.31.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/5c647738-c6a3-32ea-c9e4-b6476ed8a287.png">

次に待ち構えるのは、インストール先の選択ですが、この辺は構わず、続けるをぽちぽちしていきまShow⭐️
<img width="734" alt="スクリーンショット 2019-06-13 15.33.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/8ddc5aa3-aaa1-5ad6-23db-7555fa046215.png">

インストールするためにユーザー名とパスワードの入力を求められますが、入力しまShow
![スクリーンショット 2019-06-13 15.33.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/b7329ef7-a3bc-93a9-91fa-484e32ff1d9a.png)

ソフトウェアをインストールをポチッとするとインストールが始まります。（長かった〜😫）

<img width="734" alt="スクリーンショット 2019-06-13 15.33.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/9752a3b0-4261-e9d7-d45a-9d42679b4122.png">
（インストール中。。。。。。。）
<img width="734" alt="スクリーンショット 2019-06-13 15.33.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/999cdb8c-4881-e095-9018-757e96540a27.png">

インストールが終わりました。
ここで紹介したのはmacでのインストール方法でしたが、Windowsも基本的なので、Windowsのかたはここを参考にするか別記事をみてください😓

<h3>バージョンの確認</h3>

terminalもしくはコマンドプロンプトを開いて

```
$node -v
```

と打ってみてください。

```
$node -v
v10.16.0
```

と帰って来れば成功です。


<h2>早速プロジェクトを作ってみよう</h2>
Node.jsをインストールしたし、なんかページを表示してみたいな〜と思った方は多いと思います。
そんな方に向けて、一番簡単なプロジェクトの作成方法を教えます。

```
$npx create-react-app react_app
```

と、terminalもしくはコマンドプロンプトに打って<span style="border:1px solid black;padding:3px;">Enter</span>を押してください。
すると

```
$ npx create-react-app react_app

Creating a new React app in /Users/tnatsume/react/react_app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

yarn add v1.16.0
[1/4] 🔍  Resolving packages...
warning react-scripts > fsevents@2.0.6: Please update: there are crash fixes
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin@1.6.0" has unmet peer dependency "typescript@*".
warning "react-scripts > @typescript-eslint/parser@1.6.0" has unmet peer dependency "typescript@*".
warning "react-scripts > @typescript-eslint/eslint-plugin > @typescript-eslint/typescript-estree@1.6.0" has unmet peer dependency "typescript@*".
warning "react-scripts > @typescript-eslint/eslint-plugin > tsutils@3.10.0" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 11 new dependencies.
info Direct dependencies
├─ react-dom@16.8.6
├─ react-scripts@3.0.1
└─ react@16.8.6
info All dependencies
├─ babel-preset-react-app@9.0.0
├─ eslint-config-react-app@4.0.1
├─ fork-ts-checker-webpack-plugin@1.1.1
├─ microevent.ts@0.1.1
├─ react-app-polyfill@1.0.1
├─ react-dev-utils@9.0.1
├─ react-dom@16.8.6
├─ react-error-overlay@5.1.6
├─ react-scripts@3.0.1
├─ react@16.8.6
└─ worker-rpc@0.1.1
✨  Done in 12.02s.

Initialized a git repository.

Success! Created react_app at /Users/tnatsume/react/react_app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react_app
  yarn start

Happy hacking!
```

と出てきて、プロジェクトが作成されます。

<h2>プロジェクトを実行してみよう</h2>
terminalもしくはコマンドプロンプトで今作ったフォルダに移動して、<span style="background-color:#dca;">npm start</span>と打って<span style="border:1px solid black;padding:3px;">Enter</span>を押しましょう。

```
$ cd react_app/
:react-app$npm start
```

すると画面上に

```
Compiled successfully!

You can now view react_app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.1.20:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.
```

というテキストが表示され、自動的に
<a href="localhost:3000"target="_brank">localhost:3000</a>が自動的にブラウザーで表示されました。
![スクリーンショット 2019-06-13 16.00.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343721/35a1b884-97c5-e6d0-ff69-45c3beafdb46.png)

上のログがグルングルン回っていますが、これはcssで設定されていますね。その辺も後でみていきましょう。

これで、一応Reactの始め方の紹介を終わります。この後のことは別記事にしますので、少々お待ちください。