始めよう React（基礎編）！ Part 5 - 初めてのコンポネント

仕事の関係で大分空きました。。。

本編では、前回紹介しましたcreate-react-appのベースを元に、
実際にコンポネントを作成する流れを理解して、reactの開発をイメージしましょう。


#最初のコンポネントを作りましょ
前編でご紹介しました`/src/App.js`の内容を:arrow_down: :arrow_down: 一度綺麗にしましょ。
![src_appjs.png](https://qiita-image-store.s3.amazonaws.com/0/293426/68c6c392-bbe3-e28f-767c-048d480fb4b2.png)
要らない部分を削除して、
:arrow_down: :arrow_down:こんな感じになります。

```javascript:/src/App.js
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>hello world</div>
    );
  }
}

export default App;

```

`$ yarn start` or `$ npm start`を使って、
実際のページは、:arrow_down: :arrow_down:こうなります。

![hello-react_firstComponent1.png](https://qiita-image-store.s3.amazonaws.com/0/293426/9e81024f-def2-fd42-f18f-80af6678edc6.png)

---

###bootstrapを使う
画面を見やすくするため、bootstrapを使います。
こちらは、前編紹介致しました。
`/public/index.html`のご登場です。

こちらは画面を綺麗に見える為にbootstrapを入れます！
[bootstrap CDN](https://www.bootcdn.cn/)
(中国のサイトですが、かなり使いやすいです！)
bootstrapを検索、
![boot_cdn_search.png](https://qiita-image-store.s3.amazonaws.com/0/293426/cd0bdbb1-8a8a-4a3a-7330-ece9ff2a2cec.png)
:arrow_down: :arrow_down: :arrow_down: 
![boot_CDN.png](https://qiita-image-store.s3.amazonaws.com/0/293426/f6f65483-758c-0844-5fbf-74abe320ee1e.png)

必要のバージョンを探して、
`/public/index.html`に書き込みます。
![public_with_bootstrap.png](https://qiita-image-store.s3.amazonaws.com/0/293426/0cf5435a-da8c-f82b-ec76-2bdc2ecca733.png)
これでbootstrapがCDNから使用できるようになりました。
[:one:bootstrapについてはこちら](https://getbootstrap.com/)
[:two:bootstrapについてはこちら](https://techacademy.jp/magazine/6270)
[:three:bootstrapについてはこちら](https://qiita.com/suguruguruguru/items/20fe111ee5a2f694ed3e)

準備ができましたので、実際にコードを書きましょう。



#Reactの書き方

`/src/App.js`のファイルを:arrow_down: :arrow_down: のように書き換えます、


```javascript:/src/App.js
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-xs-1 col-xs-offset-11">
            <h1>Hello !!</h1>
          </div>
        </div>
      </div>
    );
  }
}

export default App

```
一つ一つ説明して参りましょう。



```javascript:/src/App.js
import React, { Component } from 'react';
```
:one: **React** と **Component** はReactの固定の書き方で、
コンポネントを作るときは基本的に先頭に書き込みます。

```javascript:/src/App.js
class App extends Component {
  render() {
    return (
    );
  }
}
export default App
```
:two:　このコンポネントを定義する
`App`という`class`を定義し、このclassは`Component`を継承しています。
続いて`render`メゾットを定義して、JSXの内容を`return`します。
最後は`App`という`class`を出力します。


```javascript:/src/App.js
<div className="container">
```
:three: タグ内の**class**について
Reactの場合には、タグ内使ってるのはclassではなくて、classNameになります。
classはJavaScriptで使われているため、JSXコードを書くときはclassNameでclassを書きます。

>>これで**`App`**というコンポネントができました！

#コンポネントの使い方
![indexJS.png](https://qiita-image-store.s3.amazonaws.com/0/293426/48235374-ed0d-4be8-6013-ef1647553a42.png)
前章で紹介しました。
[始めよう React（基礎編）！ Part 4 - reactのファイル構成を理解しよう](https://qiita.com/ShowJs/items/b27b42f69dfbe1072e01#bangbang-srcindexjspublicindexhtmlsrcappjs)
`/src/index.js`を見てみましょう。
:four:行目で、
`App`というコンポネントを`App.js`(.jsは省略できる)から導入します。
:eight:行目で、
`App`をタグに書き込みます。

これで**APP**という**コンポネント**を出来ました。

実際のView:arrow_down: :arrow_down: 
![first_component.png](https://qiita-image-store.s3.amazonaws.com/0/293426/202da182-426c-b075-cd52-0710e2f93914.png)


#最後に

これでコンポネントを使うReactのWEBサイトが出来ました！
Reactは基本的にたくさんのパーツで、
一つのサービスを作るようなイメージになります。

次回は
:one:複数のコンポネントを作る！
:two:React開発によく使う便利ツール紹介。
を進んで行きます！

興味ある方是非見てください！