シームレスな統合 — Box UI ElementsとReact 18の互換性
新しい機能のお知らせです。Box UI ElementsでReact 18がサポートされるようになりました。これにより、サードパーティ製アプリでのコンテンツコラボレーションで新たな段階の柔軟性と機能性が実現します。この更新により、React 18の最先端の機能を活用し、最新のフロントエンドスタックでイノベーションを推進すると同時に、インテリジェントなコンテンツクラウドとのシームレスな統合が可能になります。🚀
💡現在、Box UI Elementsでは、Reactバージョン18.0.0以上をサポートしています。下位互換性は確保されるため、React 17を引き続き使用する開発者の場合も、パッケージは最新バージョンに更新できます。
React 18では、いくつかの新機能、新しいAPI、パフォーマンスの改善が導入されています。主な特長の一部を以下に示します。
- React Server Components — パフォーマンスを向上させ、アプリケーションがインタラクティブになるまでの時間を短縮します。
- 自動バッチング — 1つのイベントハンドラまたはライフサイクルメソッドで発生する複数の状態更新がまとめてバッチ処理されるため、パフォーマンスが向上します。
- 同時レンダリングの機能強化 — メインスレッドをブロックせずに大量のデータを処理できるレスポンシブなユーザーインターフェースを簡単に構築できるようになります。
- 新しいJSXトランスフォーム — 以前のバージョンと比較して、実行時のパフォーマンスが向上し、バンドルサイズが小さくなります。
詳細については、公式のReact 18の新機能の概要をご確認ください。
Box UI Elementsを使用した既存のプロジェクト
React 17以下をベースにした既存のプロジェクトについては、Reactの移行ガイド (英語) で、React 18の使用を開始する方法の詳細をご確認ください。
プロジェクトのReactをアップグレードしたら、必ずnpmまたはyarnを使用してbox-ui-elementsパッケージも更新してください。
yarn add box-ui-elements
npm install box-ui-elements --legacy-peer-depsこれで、package.jsonファイルのバージョンが更新されるはずです。
"box-ui-elements": "^21.0.0"これで準備完了です。コードでは、Box UI Elementsに関連した追加の変更は必要はありません。
Box UI ElementsとReactを使用して新しいプロジェクトを作成する
Box UI Elementsを使用して新しいプロジェクトをすぐに開始するために、サンプルのデモポータルを使用できます。このリポジトリには、Box UI Elementsを使用して、Increo Financialという架空の銀行のシンプルな財務ドキュメントポータルを作成するためのコードがあります。このサンプルコードを起点に、独自のポータルのさらなる開発を開始できます。このサンプルを設定、複製、展開するための詳しい手順については、Alex Novotnyの記事を参照してください。
ポータルを新たに作成したい場合は、Create React Appを使用して新しいアプリを設定できます。
npx create-react-app my-app
cd my-app
npm startpackage.jsonファイルでReactバージョンを調整します。
"react": "18.0.0",
"react-dom": "18.0.0",box-ui-elementsパッケージをインストールします。これには、yarnを使用することをお勧めします。
yarn add box-ui-elements
npm install box-ui-elements --legacy-peer-deps⚠️ Box UI Elementsには必要なため、ピア依存関係も忘れずに追加してください。ライブラリの重複を防ぐために、UI Elementsを使用するには、特定のピア依存関係をインストールする必要があります。必要なピア依存関係のリストについては、package.jsonを参照してください。また、次のコマンドを使用してみることもできます。
npx install-peerdeps box-ui-elementsインストール手順が完了したら、アプリに含めるUIコンポーネントを選択します。この記事では、コンテンツエクスプローラUI Elementを選択しました。
Box UI Elementsは、国際化のためにreact-intlを使用します。Box UI Elementsの国際化に関するその他のドキュメントについては、こちらをご確認ください。
npm i react-intl --legacy-peer-deps
yarn add react-intlOAuth 2.0認証を使用するBoxカスタムアプリが必要になります。まだ作成していない場合は、Box Developerドキュメントで詳細と手順を確認してください。開発者トークンを生成していることを確認してください。これは、Box開発者コンソールの [構成] タブにあります。また、CORSセクションの設定にlocalhostのアドレスを追加します。
Boxアプリの設定が完了したら、Reactに依存しない方法に従って、選択したコンポーネントをプロジェクトに追加できます。次のスニペットでは、コンテンツエクスプローラElementを示しています。必要な変数 (この場合はTOKENとFOLDER_ID) を入力します。
import logo from './logo.svg';
import './App.css';
import ContentExplorer from 'box-ui-elements/es/elements/content-explorer';
import { IntlProvider } from "react-intl";
function App() {
return (
<div className="App">
<IntlProvider locale="en">
<ContentExplorer
contentPreviewProps={{
contentSidebarProps: {
detailsSidebarProps: {
hasProperties: true,
hasNotices: true,
hasAccessStats: true,
hasClassification: true,
hasRetentionPolicy: true,
},
hasActivityFeed: true,
hasMetadata: true,
hasSkills: true,
hasVersions: true,
},
}}
rootFolderId={FOLDER_ID}
token={TOKEN}
/>
</IntlProvider>
</div>
);
}
export default App;その他のドキュメントについては、Box UI ElementsのGitHubリポジトリおよびDeveloperドキュメントサイトをご覧ください。
Box AI for UI Elements
Box UI Elementsは、最近Box AIによって強化され、ユーザーはインテリジェントなコンテンツインサイトを得ることができるようになりました。自分のアプリでこの機能を有効にする方法の手順を説明したガイドについては、私のブログ記事をご確認ください。
Box UI Elementsを他のフロントエンドフレームワークで使用する
プロジェクトでReactを使用していないものの、アプリにBox UI Elementsを追加したい場合は、私の他の記事をご覧ください。
React 18の強みと汎用性のあるBox UI Elementsを組み合わせることで、非常に優れたコラボレーションエクスペリエンスを実現する無限の可能性が解き放たれます。Boxでは、引き続きさらなる改善に取り組んでまいります。Box開発者向けブログをフォローすると、最新情報を入手できます。
皆さまからのフィードバックをお待ちしています。Box UI Elementsに関連した質問や知識共有が可能な、Box Developer Community (英語のみ) にご参加ください。🦄
