react 事始め 3

◾️App.jsの importのReactがないと、、、

import  { Component } from 'react';

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

export default App;

以下のように怒られてしまう。

./src/App.js
  Line 5:  'React' must be in scope when using JSX  react/react-in-jsx-scope

Search for the keywords to learn more about each error.

JSXのタグはトランスパイルをすると、React.createElementのメソッドに変換されるが、Reactがないとそのソースコードの実行ができない。JSXを使わなければ、Reactはいらないとも言える。以下のコードではエラーが出ない。

import { Component } from 'react';

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

export default App;

◾️JSXは、Javascriptの予約語は使えない(Javascript：class =>JSX：className)。

import React, { Component } from 'react';

class App extends Component {
  render() {
    const greeting = "Hello, world!"
    const dom = <h1 className="foo">{greeting}</h1>
    return dom
  }
}

export default App;

Reactの制約として、returnで返すJSXは一つのタグでなければならない。

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <label htmlFor="bar">bar</label>
        <input type="text" onChange={() => {console.log("I am clicked!")}}></input>
      </div>
    )
  }
}

export default App;

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
    <React.Fragment>
      <label htmlFor="bar">bar</label>
      <input type="text" onChange={() => {console.log("I am clicked!")}}></input>
    </React.Fragment>
    )
  }
}

export default App;

◾️JSXはそのままでは実行できないためトランスパイラーを使って実行できるスクリプトのソースコードに変換する必要がある。その変換作業のことをトランスパイルと言う。Babelが暗黙的にJSXのコードをjavascriptに変換している。