Reactのメモ_その1

Reactに関するメモです。

表示の仕組み

App.js→index.js→index.htmlの場合

App.js

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>Hello World</div>
    );
  }
}

export default App;

index.js

import App from './App';
ReactDOM.render(<App />,document.getElementById('root'));

index.html

<div id="root">
</div>

構成

基本的な構成

import React from 'react';

class App extends React.Component {
  render() {
    return (
      {/* JSX */}
    );
  }
}

export default App;

JSX

一つの要素にまとめる必要あり。

OK(divでまとまっている)

<div>
  <p></p>
</div>

NG(divとpの複数要素がある)

<div></div>
<p></p>

JSXにJSを埋め込む場合中括弧で囲む

render(){
  const xxx = "xxx";
  return(
    <p>{xxx}</p>
  );
}

コメントを残す

メールアドレスが公開されることはありません。