【React】component を作る

はじめに

React を習得するまでの軌跡をメモっていく備忘録的な記事です。
https://qiita.com/u_query/items/51b4140a450ee5d51dcc の続きです

component を表示してみる

create-react-appで作ったデフォルトのファイルは中身は全部消して一から作ります。

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <p>Hello, World</p>
  )
};

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

表示成功

まとめ

とりあえずファイルの先頭で以下の2行を書けば React が動く。

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.renderメソッドを使って第一引数にコンポーネント、第二引数にdocument.getElementById('root')を入れる。

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

コンポーネントは以下のように定義をする。
returnの中に JSX を書いていき、ブラウザにはこの部分が表示される。

const App = () => {
  return (
    <p>Hello, World</p>
  )
};