Help us understand the problem. What is going on with this article?

【React】JSXをcssで修飾するとき babel-plugin-react-html-attrs を使ってclassName属性を用いないようにする

前置き

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>

おわり

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away