lightsound

App Router 講座

Server Components について

Getting Started: React Essentials | Next.js

React Server Components は、サーバーとクライアントを活用したハイブリッドアプリケーション構築のための新しいメンタルモデル

Why

• JavaScript バンドルのサイズ削減
• async コンポーネントを使える

lightsound

Test

• hoge

lightsound

npm を使いこなせるようになろう

• package.json の見方
• scripts
• パッケージのインストール・更新・削除
• セマンティクスバージョニングと lock ファイル

ESLint・Prettier を入れよう

• 最低限で良い

lightsound

第 1 回

アイディア WS

💡 発散

lightsound

React Spectrum

モチベーション

デザインシステム間の主な違いは、スタイリング。それ以外は共通の部分が多いのに各社イチから自分で実装していて大変。特にアクセシビリティ、国際化、キーボード、マウス、タッチインタラクション対応などは難しい。そこを何とかするのが React Spectrum。

基礎

React Spectrum ではコンポーネントを次の 3 つに分類する。

lightsound

import type { ButtonProps } from "@mantine/core";
import { Button } from "@mantine/core";
import { cloneElement, forwardRef } from "react";

export const NoAnimatedButton = forwardRef<
  HTMLButtonElement,
  ButtonProps<"button">
>(({ sx, ...props }, ref) => {
  return cloneElement(<Button />, {
    sx: { ...sx, "&:not(:disabled):active": { transform: "none" } },

lightsound

// 一番シンプルな例
const input = [1, 2, 3, 4];

const output = input.reduce((prev, current) => {
  return prev + current;
});

console.log(output); // 10

lightsound

import { Tab } from "@headlessui/react";
import type { VFC } from "react";
import { Fragment } from "react";

type Props = {
  items: { label: string; content: JSX.Element }[];
};

export const HorizontalTab: VFC<Props> = (props) => {
  return (

lightsound

import { AnyFramework, ComponentTitle, StoryAnnotations } from '@storybook/csf'
import { ComponentMeta, ComponentStory } from '@storybook/react'
import { VFC } from 'react'

export const createStorybookFactory = <P extends object>(Component: VFC<P>) => {
  const Template = ((args) => <Component {...args} />) as ComponentStory<
    typeof Component
  >

  const Default = Template.bind({})

lightsound

import Link, { LinkProps } from 'next/link'
import { ComponentPropsWithRef, createElement, forwardRef } from 'react'

// Types
type Tag = 'button' | 'input' | 'a'
type Element = HTMLButtonElement | HTMLInputElement | HTMLAnchorElement

type Button = {
  tag: 'button'
  type?: ComponentPropsWithRef<'button'>['type']