React UI

React造形方法論

React+スタイリングツールリスト

CSS Module

CSSモジュール例

// App.jsx
import styles from "./app.module.css";

export default function App() {
  return (
    <div>
      <h1 className={styles.title}>Pin Hello world</h1>
      <h1 className={"title"}>Nomal Hello world</h1>
    </div>
  );
}

/* app.module.css */
h1 {
  font-size: 1.5rem;
}
.title {
  font-size: 2.5rem;
  color: palevioletred;
}

UI framework (ex. Ant Design, Material UI)

UIフレームワークの例

// App.jsx
import "antd/dist/antd.css";
import { Button } from "antd";

export default function App() {
  return (
    <div>
      <Button type="primary">Primary Button</Button>
      <Button type="secondary">Secondary Button</Button>
      <Button type="danger">Danger Button</Button>
    </div>
  );
}

CSS framework (ex. W3CSS, TailwindCSS)

CSS-in-JS library (ex. styled component , emotion)

CSS入力JSライブラリ(styledcomponent)例

import styled from "styled-components";

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

export default function App() {
  return <Title>Hello World</Title>;
}

JavaScript template literal

const string = "James";
const message = `hello ${string}`;

console.log(message);
// "hello James"

JavaScript template literal with number

const number = 12345;
const message = `hello ${number}`;

console.log(message);
//  "hello 12345"

JavaScript template literal with boolean

const boolean = true;
const message = `hello ${boolean}`;

console.log(message);
//  "hello true"

JavaScript template literal with object

const object = { a: "apple" };
const message = `hello ${object}`;

console.log(message);
//  "hello [object Object]"

3値演算子付きJavaScript template literal(3つの演算子)

const name = "chalie";
const gender = "male";
const message = `Hello ${
  gender === "male" ? "Mr." : "Mrs."
}${name}, nice to meet you`;

console.log(message);
// "Hello Mr.chalie, nice to meet you"