Reactメモ

Reactを使える状態にする

index.js

// ↓をファイルの先頭に書く
import React from "react"
import ReactDOM from "react-dom"

レンダリング

index.js

// import React from "react"
// import ReactDOM from "react-dom"

// <h1>Hello World</h1>をrootにレンダリング
ReactDOM.render(
  <h1>Hello World</h1>,
  document.getElementById("root")
)

コンポーネントを作る

2種類の書き方がある

Class Component

index.js

// import React from "react"
// import ReactDOM from "react-dom"

// ReactDOM.render(
//  <h1>Hello World</h1>,
//  document.getElementById("root")
// )

// Headerというクラスコンポーネントを作成
class Header extends React.Component {
  render(){
    return (
      <div className="header">
        <h1>ヘッダーです</h1>
      </div>
    );
  }
}

// Headerコンポーネントをrootにレンダリング
ReactDOM.render(
  <Header />, //スラッシュがないとエラーになります
  document.getElementById("root")
)

class Header extends Component{ // React.は省略しても大丈夫
  render(){
    return(
      <div className="header">
        <h1>ヘッダーです</h1>
      </div>
    );
  }
}

Functional Component

index.js

// import React from "react"
// import ReactDOM from "react-dom"

// ReactDOM.render(
//  <h1>Hello World</h1>,
//  document.getElementById("root")
// )

// HeaderというFunctionalコンポーネントを作成
const Header = (props) => {
  return(
    <h1>ヘッダーです</h1>
  )
}

// Headerコンポーネントをrootにレンダリング
ReactDOM.render(
  <Header />,
  document.getElementById("root")
)

propsを使う

index.js

// Tasksコンポーネントを作成
class Tasks extends React.Component {
  render(){
    return (
      <p>{this.props.task}</p>
    );
  }
}

// Tasksに値を渡す
ReactDOM.render(
  <Tasks task="勉強" />,
  <Tasks task="家事" />,
  document.getElementById("root")
)

ハマったところ

var Hello = React.createClass({
  render: function() {
    return (
      <div>Hello</div>
    );
  }
})

React.createClass はv16では削除されたそうです。
使おうとするとエラーが出ます。

注意点

・コンポーネントは大文字で始める
・React.createClassはv16以降では使えない