Reatに入門して1日目の私が調べたこと

DOM

Document Object Modelの略
HTMLやXMLの各要素にアクセスする仕組みのこと。

JSX

JavaScriptを拡張した言語
Reactを用いて、HTMLを出力するもの。
見た目は、HTMLと似ている。
JSXはアプリケーション内部では、トランスパイルされJavaScriptのコードに変更される。
JSXをJavaScriptにトランスパイルしているのはBabel

トランスパイルとは

ある言語で書かれたコードをもとに、別の言語のコードに書き換えること。

なぜJSXを使うのか？

JavaScriptを書くよりも、可読性が高く書きやすい為。

JSXとJavaScriptでHello, World

sample.js

// JSXの場合
render() {
  return <div>Hello, World</div>;
}

//JavaScriptの場合
render() {
  return React.returnElement(
    "div",
    nul,
    "Hello, World"
  );
}

JSXの方が書きやすいのは明白。

Webpack

複数のファイルを1つにまとめて、Webに読み込みやすくするもの。

Component

Webサイトを構成する部品のこと。
Reactには2つにComponentがある。
componentは再利用することができる。

functional component

関数の定義によって作成するコンポーネント

class component

クラスの定義によって作成するコンポーネント
renderメソッドが必須

今後はclass componentは無くなり、function componentが使われていくらしい

props

componentの属性
親コンポーネントから子コンポーネントを呼び出す時に、propsという形で情報を伝達する。
stateと違って不変

sample.js

//App.js(親コンポーネント)
import React, { Component } from 'react';
import Greeting from './Greeting';

class App extends Component {
  render() {
    return(
      <Greeting name='Tom' />
    );
  }
}

export default App;
//=> Hi Tom



//Greeting.js（子コンポーネント）
import React from 'react';

function Greeting(props) {
  return(
    <div>Hi {props.name}</div>
  );
}

export default Greeting;

子コンポーネントを状態の持たないステートレスなコンポーネントにすることができ、子コンポーネントを触らずに親から渡す情報を変えることだけで使えるようにすので、再利用ができる。