[react:day1.1] JSXとの出会い


##環境
[react:day1](https://qiita.com/ozepon/items/d5659f068ed1408f3c17)と同じ

##JSXとは
- Reactを使う上でJSXを使用しなくても書けるがJSXを使えば簡潔に書ける
- FaceBookが開発した独自のタグ技術
- HTMLみたいに見えるが違う。XML likeに書ける
- HTML5のタグは全部使用できる
- カスタムコンポーネント（オリジナルのタグ名）が使える

##JSX無しでHelloWorld

```index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

var element = React.createElement('h1', { className: 'greeting'}, 'Hello, world');
ReactDOM.render(element, document.getElementById('root'));
registerServiceWorker();

```

##JSX有りでHelloWorld

*変わるのはelement変数のみ

```index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

// var element = React.createElement('h1', { className: 'greeting'}, 'Hello, world');
var element = <h1 className='greeting'>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
registerServiceWorker();

```


#### JSX使えない属性は以下に置き換えて使う
class => className
for   => htmlFor

###JSX内で変数を使う

JSX内で{}を使用すればjsを使用できる

```index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

var userName = 'ozepon';
var element = <h1 className='greeting'>Hello, {userName}</h1>;
ReactDOM.render(element, document.getElementById('root'));
registerServiceWorker();


```


##カスタムコンポーネント(自作のタグ)を作成してみる

```index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

// custom componentを作成
class HelloWorld extends Component {
  render() {
    return (
      <h1 className='greeting'>Hello, CustomComponent!</h1>
    );
  }
}

// custom componentを呼び出して描画
ReactDOM.render(<HelloWorld/>, document.getElementById('root'));
registerServiceWorker();

```

##Spread演算子でkey-valueを展開できる

Spread演算子とは「...」のことである

```index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

// custom componentを作成
var option = {
  className: 'greeting'
}
class HelloWorld extends Component {
  render() {
    return (
      // optionをspread演算子で展開
      // classにgreetingが設定される
      <h1 {...option}>Hello, CustomComponent!</h1>
    );
  }
}

// custom componentを呼び出して描画
ReactDOM.render(<HelloWorld/>, document.getElementById('root'));
registerServiceWorker();

```

### spread演算子を上書きできる

```index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

// custom componentを作成
var option = {
  className: 'greeting'
}
class HelloWorld extends Component {
  render() {
    return (
      // optionをspread演算子で展開した後に
      // classNameで上書き。classにはgreeting2が設定される
      <h1 {...option} className='greeting2'>Hello, CustomComponent!</h1>
    );
  }
}

// custom componentを呼び出して描画
ReactDOM.render(<HelloWorld/>, document.getElementById('root'));
registerServiceWorker();
```

### とりあえず後で出会うことになるもの

- props
- state

アプリ作りながら触ったほうが理解が早そうなので保留