Reactコンポーネントの基本原則と人気のUI/UXデザインライブラリの解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactは単なるUIライブラリではなく、コンポーネントベースのアプリケーション開発フレームワークです。UI/UXデザインの基本原則に加え、再利用性や状態管理、データフローなどの概念も重要です。 Reactのコンポーネントベースのアーキテクチャを活用すると、UIと裏側のロジックを分離して管理しやすくなり、効率的なアプリケーションの開発が可能です。 今日は、Reactにおけるコンポーネントの基本原則の解説と、初心者に役立つReactコンポーネントライブラリの紹介を提供します。 コンポーネントの設計原則 UI（ユーザーインターフェース） UX（ユーザーエクスペリエンス） UIのデザインに役立つReact コンポーネントライブラリ React Material UI React-Bootstrap Fluent UI Chakra UI Semantic UI React Ant Design
React脱初心者への道しるべ #React #設計 #フロント開発 #Tips - クリエーションライン株式会社
React脱初心者を目指して Reactが今日のフロント開発に欠かせない存在になっていることは、もはや疑いようのない事実です。 ますます多くのエンジニアがReactを学習し、利用していることでしょう。 本記事は「Reactの基本的な機能は何となく理解し、動くものは一応作れるようになった」というエンジニアが「実務で耐えうる設計や開発の進め方を身につける」ための道しるべです。コード例は一切登場せず、考え方を中心にお伝えしていきます。React初心者の方は「次の一歩」として読み進めていきましょう。 記事は「全体の作り方」と「コンポーネントの作り方」の二部構成になっています。 この記事で身につくこと Reactアプリを作る際のオススメ開発環境。 Reactアプリを、どこからどのように作っていけばよいか。 Reactアプリを作る際の考え方や進め方。 Reactコンポーネントの、設計・実装の指針。 R
【React】複数ページに分割し進捗を表示する入力フォームの設計
概要 入力する項目が多い入力フォームは離脱率を考えると、1ページにまとめるよりも複数ページに分割したほうが良いとされています。 ではReactで、以下のように複数ページに分割し、進捗を表示するフォームを作成するにはどうすれば良いでしょうか。 設計 自分なりに考えた結果、以下のような設計になりました。 render hooksパターンを使用 今回の要件では、親コンポーネントでフォームのページ数を管理し、小コンポーネント側でフォームの状態を保持させる必要があります。 フォームのページ数が必然的に複数ページに分かれてしまうため、通常であればuseContextやRedux,Recoilなどのグローバルで状態を管理できるライブラリを使ってフォームの状態を保持させることになります。 そこで思いついたのが、hook自体がコンポーネントを返却するrender hooksパターン。 複数のページコンポーネ
JSON Schema で複雑な仕様の入力フォームの実装に立ち向かった話
Ruby on Rails を用いたシステム上で入力フォームを実現する際、Rails が提供しているフォームヘルパーを利用した実装や、React や Vue によるコンポーネントの自前での実装が一般的に行われます。 ここで、職業で学生を選択した場合は学校名と学年、会社員を選択した場合は役職と年収を入力する...といった、条件分岐が大量に生まれる入力フォームを想像しましょう。 一般的な実装手法では、あるフォームの入力値が他のフォームに影響を与えるような、複雑で動的な入力フォームの実現をするために、大量の if 文を書く必要があります。 また、ユーザから送信された入力値の正しさをバリデーションするために、バックエンド側に同様の if 文を大量に書く必要が出てきます。 そこで私は、複雑な仕様の入力フォームの実装のための JSON Schema 活用方法および事例について紹介します。入力フォームの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
react-jsonschema-form documentation
高度な使用法
