最近になってやっとreactの書き方が分かってきました。が、コンポーネントの操作は分かったけどCSSってreactだとどう書くの？
と思いreactで使えるライブラリを漁っていました。material-uiやbootstrapでもかけるのですが、自分にとってはstyled-componentが
使いやすいかなと感じ、チュートリアルでいじってみました。
styled-componentは、render外で定義したstyleの設定とrender内で定義したコンポーネントを紐付けて使うのが主な特徴で
おなじみのボタンやテキストを整えてスタイリッシュなアプリを簡単に作ることができます。
広い範囲でlibraryが提供されているので、最初は書き方に戸惑うことがあるかもしれませんが、慣れてくれば上にあげたライブラリと
同じくらいの働きをしてくれます。
サンプルコードで味気ないですがコードを載せておきます。
import React, { Component } from 'react';
import {BrowserRouter as Router, Switch, Route, Redirect, Link, NavLink, withRouter} from 'react-router-dom'
import ReactDOM from 'react-dom'
import styled from 'styled-components';
const Input = styled.input`
padding: 0.5em;
margin: 0.5em;
margin-top:6px;
margin-left: 250px;
color: ${props => props.inputColor || "palevioletred"};
background: papayawhip;
border: none;
border-radius: 3px;
`;
class Sample extends Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
</div>
);
}
}
export default Sample;
[/java script]
公式リファレンスからとってきただけですが、断片的で見にくかったのでフルコードで載せてしまいます。
説明することはあまりないですが、tips程度に解説します。まず、class Sampleの上にclass Inputと定義しています。
これは、render内に書いたinputタグのことを指しています。さきほど言ったようにここでコンポーネントのデザインを変更したりできます。
styled.inputの後に何やら見慣れない「`」という記号があります。（グレイブアクセントと読む）その後ろに通常のcssで使うような
設定がありますが、このグレイブアクセントは関数でいう()のようなもので、後ろの設定は引数と考えてください。
この定義をいくつか使うことで、ユーザーの目に優しいデザインをつくることが可能になります。自分もこのライブラリに触れたのが
数日前だったので、動かし方を完全に覚えた訳ではありませんが、cssを触ったことのあるまたは他のライブラリを使ったことがあるとい
う方は感覚的に触っていけばその内馴染んで自在にコンポーネントを作れそうですね。
未経験の方は絵を描く感覚で筆者と一緒にじっくり覚えていきましょう。
※es6で書いているので、es5でコードを書いているは適所合わせてください。
