styled-componentsを導入する

まずはpackageのインストールから。

npm install styled-components

注意点としては、render メソッドの中で styled component を作るのは良くないとのこと。

styled-components: Basics

あと、ユーザーの入力値をスタイル定義で使うような場合はセキュリティ対策としてサニタイズが必要そう。

styled-components: Advanced Usage

ビルド環境は特にいじらずに、styled-components の Hello World を持ってきて動かしてみる。

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

 const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

const test = <Wrapper>
    <Title>
        Hello World!
    </Title>
</Wrapper>;
    
ReactDOM.render(test, document.body);

ちゃんと表示できてた。

あとはこのビルド結果を ktor の static 配信用のディレクトリに配置するように webpack の設定を書き換えれば良いはず。 なんで entry は相対パスでも良くて output は絶対パスじゃないといけないんだろうという疑問が沸いたけど、深みにハマりそうなので無視して進める。

const path = require('path');

module.exports = {
    mode: "development",
    entry: "./src/assets/js/test.jsx",
    output: {
        path: path.resolve(__dirname, 'src/main/resources/static/js'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {presets: ["@babel/react"]}
            }
        ]
    }
};

動いた。

バックエンドとフロントエンドの繋ぎ込みもできたので、そろそろ画面を考えていきたいけれども、疲れたので今日はここまで。