react 事始め 2

gitで新しくブランチを切って、不要なファイルを削除

$ git rm src/App.css
$ git rm src/logo.svg
$ git rm src/App.test.js

不要なコードを削除した後のApp.js

import React from 'react';

function App() {
  return <div><h1>Hello, world!</h1></div>
}

export default App;

ここまでをgit commit、pushし、新しいブランチを作成

Reactは、Javascript library for building user interfaces、Facebookが開発したライブラリ Reactは、仮想DOMという方式で、DOMの変更箇所のみレンダリングする機構を持っているため非常に高速に動作する また、高速なだけでなく、DOMの変更箇所がどこなのか、JQueryではわかりにくかったのを解消してくれている

JSXは、Javascript XML、テンプレート言語の一つ、js内にhtmlを記述することができる App.jsを以下のように変更する

import React, { Component } from 'react';

class App extends Component {
  render() {
    return <div>Hello, world!</div>
  }
}

export default App;

JSXは、アプリケーションの内部でトランスパイルの処理が行われていて、Javascriptのコードに変換する。

import React, { Component } from 'react';

class App extends Component {
  render() {
    return React.createElement(
        "div",
        null,
        "Hello, world!"
     );
  }
}

export default App;

Javascriptでコーディングするのと、htmlでコーディングすることを比較すると、JSXの方が直感的にコーディングできることからJSXが多く利用される。

複数の要素を列挙する場合は、以下のようにネストされている。

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {

    // return (
    //   <div className="App">
    //     <h1>Hi, I'm a React App</h1>
    //   </div>
    // );

    return React.createElement(
      'div', {className: 'App'}, React.createElement('h1', null, 'Hi, I\'m a React App')
    )
  }
}

export default App;