ヘルプ
支援する

同じモダンAPIを備えたReactの高速3kB代替

始める Preactに切り替える

function Counter() {
  const [value, setValue] = useState(0);

  return (
    <>
      <div>Counter: {value}</div>
      <button onClick={() => setValue(value + 1)}>Increment</button>
      <button onClick={() => setValue(value - 1)}>Decrement</button>
    </>
  )
}

スポンサー：

異なる種類のライブラリ

metal

DOMに近い

Preactは、DOMの上に可能な限り薄い仮想DOM抽象化を提供します。安定したプラットフォーム機能に基づき、実際なイベントハンドラーを登録し、他のライブラリとうまく連携します。

Preactは、トランスパイルの手順なしで、ブラウザで直接使用できます。

size

小さいサイズ

ほとんどのUIフレームワークは、アプリのJavaScriptサイズの大半を占めるほど大きいです。Preactは違います。小さいため、アプリケーションの大部分はあなたのコードになります。

つまり、ダウンロード、解析、実行するJavaScriptが少なくなり、コードの時間が多くなるため、フレームワークを制御下に置くために奮闘することなく、定義したエクスペリエンスを構築できます。

performance

高いパフォーマンス

Preactは高速です。そのサイズだけが理由ではありません。シンプルで予測可能な差分実装のおかげで、最も高速な仮想DOMライブラリの1つです。

更新を自動的にバッチ処理し、パフォーマンスに関してPreactを極限まで調整します。ブラウザのエンジニアと密接に協力して、Preactから最大限のパフォーマンスを引き出しています。

portable

ポータブル＆埋め込み可能

Preactの小さなフットプリントは、強力な仮想DOMコンポーネントのパラダイムを、これまで適用できなかった新しい場所で使用できることを意味します。

複雑な統合なしで、アプリの一部を構築するためにPreactを使用します。ウィジェットにPreactを埋め込み、フルアプリを構築する場合と同じツールと技術を適用します。

productive

すぐに生産的

軽量であることは、生産性を犠牲にしなくて済む場合、はるかに楽しいものです。Preactを使用すると、すぐに生産性が向上します。ボーナス機能もいくつかあります。

  • props、state、およびcontextは、render()に渡されます。
  • classやforなどの標準のHTML属性を使用します。
compatible

エコシステムとの互換性

仮想DOMコンポーネントにより、ボタンからデータプロバイダーまで、再利用可能なものを簡単に共有できます。Preactの設計は、Reactエコシステムで利用可能な数千のコンポーネントをシームレスに使用できることを意味します。

バンドラーに単純なpreact/compatエイリアスを追加すると、最も複雑なReactコンポーネントでもアプリケーションで使用できる互換性レイヤーが提供されます。

実際に試してみましょう！

Todoリスト

export default class TodoList extends Component {
    state = { todos: [], text: '' };
    setText = e => {
        this.setState({ text: e.currentTarget.value });
    };
    addTodo = () => {
        let { todos, text } = this.state;
        todos = todos.concat({ text });
        this.setState({ todos, text: '' });
    };
    render({ }, { todos, text }) {
        return (
            <form onSubmit={this.addTodo} action="javascript:">
                <label>
                  <span>Add Todo</span>
                  <input value={text} onInput={this.setText} />
                </label>
                <button type="submit">Add</button>
                <ul>
                    { todos.map( todo => (
                        <li>{todo.text}</li>
                    )) }
                </ul>
            </form>
        );
    }
}
REPLで実行

実行例

import TodoList from './todo-list';

render(<TodoList />, document.body);

    GitHubスターを取得

    export default class Stars extends Component {
    async componentDidMount() {
        let stars = await githubStars(this.props.repo);
        this.setState({ stars });
    }
    render({ repo }, { stars=0 }) {
        let url = `https://github.com/${repo}`;
        return (
            <a href={url} class="stars">
                ⭐️ {stars} Stars
            </a>
        );
    }
}
    REPLで実行

    実行例

    import Stars from './stars';

render(
    <Stars repo="preactjs/preact" />,
    document.body
);
    ⭐️ 35783 スター

    始める準備はできましたか？

    Reactの経験があるかどうかによって、別々のガイドを用意しています。
    自分に最適なガイドを選択してください！

    始める Preactに切り替える