Hatソフトウェアエンジニアの佐藤匡剛です。2018の17日目の記事です。Next)をReactと一緒に実際に使ってみるクイックスタートです。qiita.comPatternFlyとはPatternFlyとは、一言で言ってしまえばエンタープライズ向けにデザインやレイアウト、ウィジェットが特化されたBootstrapです。Bootstrapは基本的なページレイアウトやコンポーネントが提供されていますが、PatternFlyはその上に水平/垂直レイアウト、ログインページ、Aboutモーダル、通知といった、エンタープライズアプリで必須の機能がすぐに使える形で提供されます。EEアプリケーションサーバWildFlyの管理コンソールで使われていたフレームワークがスピンアウトしたものです。Hat製品のほとんどのWebコンソールがPatternFlyベースで構築されています。Hat製品のコンソールが全部同じに見えるのは、コイツのせいです(笑)。PatternFly自体はBootstrap同様、特定のフロントエンドフレームワークに依存しない、独立したJavaScript/CSSフレームワークです。AngularとReactについては、それぞれのコンポーネントとして組み込んで使えるサブプロジェクトが存在します。Reactを使います。Starterを使ってプロジェクトの雛形を生成します。Yarnを使いますが、npm派の人も基本は同じです。サンプルプロジェクトの名前はpf4-react-helloにします。Reactをインストールします。@patternfly/react-tokens(現時点だと最新の@patternfly/react-core@1.40.1はTypeScriptでコンパイルできないバグがあるので、明示的に1.38.xをインストールしています。)それから最初に、プロジェクト全体にPatterFlyの基本CSSを適用します。プロジェクトのsrc/index.tsxの冒頭に以下をインポートします。Starterでプロジェクトを生成した場合は、tsconfig.jsonのnoImplicitAnyをfalseにする必要があります。(JavaScriptを使う場合は関係ありません。false,これで準備は完了です。ボタンを追加してみるとりあえず、Starterで生成されたsrc/App.tsxを丸ごと以下に置き換えます。startを実行すると、以下のようにボタン1個だけのページができました。Reactのコンポーネントをどんどん追加していって、ページをリッチにしていくだけです。UIの開発を進める場合、基本はコンポーネントのカタログを見ながら、必要な部品を探していきます。Reactは多くのPatternFlyコンポーネントを網羅しています。Reactのカタログだけを見ながら開発が進められるのですが、中にはまだReact化されていないコンポーネントもあります。4のカタログを見て、素のHTML/CSSから自分でReactコンポーネントを作っていく必要があります。ページレイアウトのサンプルを見ながら、基本のレイアウトをどれにするかを決めます。navigation)を選びます。modeのリンクを飛ぶと、オンラインでレイアウトのデモが見られます。</>のアイコンをクリックすると、サンプルコードが表示されます。これらを参考にしながら、自分のアプリに必要な機能を取り込んでいきます。ReactライブラリのサンプルコードはJavaScript用なので、今回のTypeScriptのプロジェクトにそのままコピペで流用することはできないのですが、TSLintに怒られながら書き直していくと、最終的に以下のようになります。http://rheb-pf4-react-hello.surge.sh/ソースコードはこちらです。https://github.com/tadayosi/pf4-react-hello本家のデモと比べてスタイルがおかしかったり、Firefoxだとなぜか一部の画像が表示されなかったりするのですが(最後のスクリーンショットだけChromeで撮りました...)、とりあえず今回はこれで終わりたいと思います。Firefoxで画像が表示されないのはこのバグでした。GitHub上のソースコードとデモサイトではすでに修正済みです。ミドルウェアのサポートをしている三浦です。エンジニアリングの佐藤匡剛です。@シンガポールこんにちは。各記事は著者の見解によるものでありその所属組織を代表する公式なものではありません。その内容については非公式見解を含みます。スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。