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

環境

react:day1と同じ

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

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