なんやねん、JSXとか、コンポーネントとか！

## 気になってたんだが...
> `公式サイトより (powered by Google翻訳)`  
>
> ```jsx
> const element = <h1>Hello, world!</h1>;
> ```
> この面白いタグ構文は、文字列でもHTMLでもありません。
>
> これはJSXと呼ばれ、JavaScriptの構文拡張です。 UIをどのように表示するかを説明するにはReactと併用することをお勧めします。JSXはテンプレート言語を思い出させるかもしれませんが、JavaScriptの完全機能を備えています。

create-react-appで作成されたjavascriptファイルも道理で変な記述なのか...

こういうことだよな（違

```diff:index.js
+ const element = <App />;
+ 
- ReactDOM.render(<App />, document.getElementById('root'));
+ ReactDOM.render(element, document.getElementById('root'));

  // If you want your app to work offline and load faster, you can change
  // unregister() to register() below. Note this comes with some pitfalls.

```

## コンポーネントって？

> `公式サイトより (powered by Google翻訳)`   
> 
> 概念的には、コンポーネントはJavaScript関数のようなものです。コンポーネントは任意の入力（「props」と呼ばれます）を受け入れ、何が画面に表示されるべきかを記述するReact要素を返します。  
>  
> コンポーネントを使用すると、UIを独立した再利用可能な部分に分割し、各部分について個別に考えることができます。  
>
> コンポーネントは、出力の際に、他のコンポーネントを参照できます。ボタン、フォーム、ダイアログ、画面：Reactアプリケーションでは、すべてがコンポーネントとして一般的に表現されます。

関数なのか！こういうことやな（違

```diff:App.js
+ const logoElement = <img src={logo} className="App-logo" alt="logo" />;
+ 
+ function Logo() {
+   return logoElement
+ }
```
```diff:App.js
          <header className="App-header">
-           <img src={logo} className="App-logo" alt="logo" />          
+           <Logo />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
```
他でも参照できるように、外部ファイルにしてみる。
srcフォルダーの下にcomponentsフォルダを作って、そのなかにLogo.jsファイルを作成する。
そして、logo.svgもこのフォルダに移動させる。

```jsx:Logo.js
import React from 'react';
import logo from './logo.svg';

const logoElement = <img src={logo} className="App-logo" alt="logo" />;

function Logo() {
  return logoElement
}

export default Logo;
```

App.jsもコンポーネントだから、componentsフォルダに移動しちゃう。（App.scssもｗ）

```diff:App.js
  import React, { Component } from 'react';
- import logo from './logo.svg';
+ import Logo from './Logo';
  import './App.scss';
```

```diff:App.js
  import React, { Component } from 'react';
- import logo from './logo.svg';
+ import Logo from './Logo';
  import './App.scss';
```

```diff:index.js
  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.scss';
- import App from './App';
+ import App from './components/App';
  import * as serviceWorker from './serviceWorker';
```

正常に出てる
![スクリーンショット 2018-11-29 15.59.59.png](https://qiita-image-store.s3.amazonaws.com/0/105644/3474a681-7338-93f6-382e-5d523747bae5.png)

## あいさつするコンポーネントでも作ってみる

既成のソースを弄っているばかりだったので、1つ新しいモノを生み出してみる。

```jsx:Greeting.js
import React from 'react';

function Greeting() {
  return <div>ようこそ</div>;
}

export default Greeting;
```

```diff:App.js
  import React, { Component } from 'react';
+ import Greeting from './Greeting';
  import Logo from './Logo';
  import './App.scss';
```

```diff:App.js
        <div className="App">
          <header className="App-header">
+           <Greeting />
            <Logo />
            <p>
```

ロゴの上に出た！
![スクリーンショット 2018-11-30 11.54.07.png](https://qiita-image-store.s3.amazonaws.com/0/105644/ef0f0e72-7289-c452-063b-57d074793f64.png)

## 任意の入力「props」

まぁ、Google先生の翻訳から抜粋ですが、値を受け取ってそれを出せる的な器が、propsだそうな。
関数で言うところの引数ですな。ちょい、Greetingを変更してみる。

```jsx:Greeting.js
import React from 'react';

function Greeting(props) {
    return <div>ようこそ、{props.name}さん</div>;
}

export default Greeting;
```

器(props)の中にあるnameを出力する感じにしてみる。

![スクリーンショット 2018-11-30 11.54.26.png](https://qiita-image-store.s3.amazonaws.com/0/105644/da9fca6f-48de-52ce-cefd-9b92243066c8.png)

まぁ、そうなる。nameに何も入ってないし。
なので、入れてみる。

```diff:App.js
- <Greeting />
+ <Greeting name='おかあ' />
```

でたｗ

![スクリーンショット 2018-11-30 11.57.48.png](https://qiita-image-store.s3.amazonaws.com/0/105644/305c1c77-fcfd-619f-d2bc-c90b205a725f.png)

[この記事](https://qiita.com/tkymgr/items/8fc13311cc334804e1b7)のつづきでした。