React.js コンポーネントの簡単な使い方

React.js コンポーネントの簡単な使い方

React.jsでコンポーネントを作成して表示するまでの簡単なサンプルコードとなります。

環境

  • OS  CentOS Linux release 8.0.1905 (Core)
  • node V10.16.3
  • npm 6.9.0
  • React 16.12.0

コンポーネント作成

src配下にcomponentsというディレクトを作成して、配下にAddButton.jsというファイルを下記のコードで作成します。

※デザインにmaterial-ui を利用してます。利用手順はこちら

App.js編集

src配下のApp.jsを下記のコードに編集します。

ブラウザから http://プライベートIP:3000にアクセスするとAddButtonタグが記載された箇所にButtonが表示されるようになります。