フロントエンド UI コンポーネント

iHateReading カスタム リポジトリ

この 1 か月間、私はボタン、入力、フォーム、バナー、ギャラリーなどの現実世界の Web コンポーネントである UI コンポーネントをたくさん作成してきました

いくつかの目的のために作成されたコンポーネント

• フロントエンドを学び、自分の仕事がより上手になります
• フロントエンド開発でより良いコードを書く能力を向上させる (これが何を意味するかについては後ほど説明します)

私は現在テクノロジースタックまたはテクノロジーをreactjsとnext.jsをフレームワークとして使用しており、スタイリングにはTailwind CSSを、アニメーションにはGSAPを使用しています

問題にならない技術スタックであればどれでも使用できるため、最新のフレームワークと言語は next.js を使用した Reactjs から始めました

次に、支払いフォーム、購読フォーム、画像ギャラリー、ボタン、その他多くの UI コンポーネントなど、今後の現実世界のプロジェクトでも個人的に使用できる、開発すべきすべてのコンポーネントを選択する必要があります。ヘッダーコンポーネントなど。

iHateReading は開発者による開発者のためのプラットフォームであり、私は過去 2 年間、ihatereading.in でブログやニュースレターを共有してきました。

これは、このプラットフォームの本質を取り戻すために、カスタム リポジトリやカスタム コードなど、任意の名前で呼ばれるいくつかの新しい変更や新機能を導入する適切な時期です。

次に、これらのコンポーネントは何で構成されているかを説明します。すべてのコンポーネントは次のモジュールを使用して作成されます

1. Reactjs
2. Tailwind CSS
3. アニメーション用の GSAP
4. Mantine.dev UI ライブラリ (必要な場合)

私はヘッドレス UI コンポーネントを選択しようとしています。これは、多くの開発者が簡単にコードをコピーアンドペーストし、それを直接使用して迅速に開発できるようにするため、スタイルやフレームワークの依存関係なしで機能のみが追加されることを意味します。

これらのコンポーネントを開発しているときに、https://ihatereading.in/customrepo で共有した最初のコンポーネントを見て、新しいコンポーネントまたは最新のコンポーネントと比較すると、違いを簡単に見つけることができます。

依存関係が減り、JavaScript が減り、コード コンポーネントがより最適化され、再利用可能になります。

昨年行ったリサーチとブログ「JavaScript がウェブサイトのパフォーマンスを低下させるのはなぜですか?」の功績はすべてあります。これは、ブラウザが JS を解析するのに CSS に比べて時間がかかるためです。これにより、JS を削減することで Web サイトのパフォーマンスも向上します。

さらに、最近の CSS は非常に強力になってきているため、Web サイトにクールなアニメーションを導入するのに必要な JS はほとんどありませんが、多くの開発者はそれにあまり注意を払っていません。これが、より多くの CSS を使用するためのもう 1 つのモットーです。> JS が少なくなります。

これまでに 40 個のコンポーネントが追加されており、さらに作業を進めています。どのような種類のコンポーネント、フォーム、ツールを作成できるかについてのアイデアがあれば、コメント セクションに追加してください。私も必ず従うつもりです。

私は Twitter や LinkedIn でコンポーネント開発のニュースを積極的に共有し、コードを ihatereading.in/customrepo にプッシュしています

お気軽にチェックして、さらに何を追加したり作成したりするかをお知らせください。

乾杯
シュリー

以上がフロントエンド UI コンポーネントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。