まずは設定(していない人)

node.jsをインストール

Yarnをインストール

brew install yarn

バージョンが確認できたら成功

node -v
yarn -v

アプリ作成

開発するディレクトリで以下のコマンドを実行

npx create-react-app react-test

コンポーネントを作成

以下のディレクトリにコンポーネントを作成

- src
 - Header.js
 - About.js
 - Services.js

Header.js

import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>My</h1>
    </header>
  );
};

export default Header;

About.js

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>about</h1>
    </div>
  );
};

export default Services;

Services.js

import React from 'react';

const Services = () => {
  return (
    <div>
      <h1>Services</h1>
    </div>
  );
};

export default Services;

基本文法

export default

export default Header;

他のファイルで利用可能にするためのJavaScriptの文法です

import React from 'react';

import React from 'react';

JavaScriptのコードでReactライブラリを使用するために必要なステートメント

ルーティングを作成

ルーティングを設定できるdomを導入するために以下のコマンドを実行

npm install react-router-dom

起動

npm start

こちらで動作確認できます。
http://localhost:3000

CSS適用

以下のディレクトリにcssファイルを設置

src/styles/Header.css

cssの中身

Header.css

.header a {
  color: red;
  font-size: 18px;
}

Header.js

import React from 'react';
import './styles/Header.css'; ##追記

const Header = () => {
  return (
    <header className="header"> ##追記
      <a>My</a>
    </header>
  );
};

export default Header;

メソッドをインポートして適用

./components/button.js

import React from 'react';

const Button = () => {
  const handleClick = () => {
    // メソッドの処理
    console.log('ボタンがクリックされました');
  };

  return (
    <button onClick={handleClick}>クリック</button>
  );
};

export default Button;

Header.js

import React from 'react';
import './styles/Header.css';
import Button from './components/button.js'; //追記

const Header = () => {
  return (
    <header className="header">
      <a>My</a>
      {Button()} {} //追記
    </header>
  );
};

export default Header;