前置き

JSXを利用している場合、class属性を利用することはできない。
これはclassキーワードがJavaScriptの予約語になっており、JavaScript のソースコード内利用できないため。

なので通常はclassNameとして次のように書く。

import React from "react";

export default (props) => <button className="button" {...props} />;

babel-plugin-react-html-attrsを入れてclassName属性を不使用とする

どうしてもclassName属性を使いたくない人向けにbabel-plugin-react-html-attrsを導入する。

npm install --save-dev babel-plugin-react-html-attrs

webpack.config.jsのoptionsの位置に追記する

webpack.config.js

 loader: 'babel-loader',
         options: {
+          plugins: ['react-html-attrs'],
           presets: ['@babel/preset-react', '@babel/preset-env']
         }

とすることで、コンポーネントも次のようにclass属性をつかってHTMLライクに書ける

<Link to="archives"><button class="btn btn-danger">archives</button></Link>
<Link to="settings"><button class="btn btn-success">settings</button></Link>

おわり