installation.md

インストール

一般

1. react-beautiful-dndパッケージを追加する

# yarn
yarn add react-beautiful-dnd

# npm
npm install react-beautiful-dnd --save

2. パッケージを使用する

import { DragDropContext } from 'react-beautiful-dnd';

3. 利益🕺

React環境

react-beautiful-dndを使用するためには、おそらくReact環境を構築する必要があります。

• 既存のウェブサイトに React を追加する - 公式Reactドキュメント
• Setup a react environment with create-react-app - 無料スタートアップ講座より

配布バンドル

ユニバーサルモジュール定義 バンドルは、npm上の/distフォルダに公開され、消費されます。以下のファイルを公開します:

• dist/react-beautiful-dnd.js
• dist/react-beautiful-dnd.min.js (最小化バンドル)

これらのバンドルは、提供する必要がある外部要素としてreactをリストアップしています。これは、バンドルのサイズを小さくし、コンシューマがreactを何度も読み込むことを防ぐために行われます。モジュールシステムを通してreactを提供するか、単にwindowにreactを表示させることができます。

UMDを使って、ブラウザ上で直接react-beautiful-dndを実行することができます。

<!-- peer dependency -->
<script src="https://unpkg.com/react@16.3.1/umd/react.development.js"></script>
<!-- lib (x.x.xを希望のバージョンに変更) -->
<script src="https://unpkg.com/react-beautiful-dnd@x.x.x/dist/react-beautiful-dnd.js"></script>
<!-- reactアプリのマウントに必要 -->
<script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js"></script>

<script>
  const React = window.React;
  const ReactDOM = window.ReactDOM;
  const { DragDropContext, Draggable, Droppable } = window.ReactBeautifulDnd;

  function App() {
    // ...
  }

  // JSXをサポートする環境であれば、JSXを使用することができます
  ReactDOM.render(React.createElement(App), document.getElementById('app'));
</script>

また、このインストール方法で試せるexample codepenも用意されています。

ClojureScript

CLJSJSを使ってClojureScript内からreact-beautiful-dndを利用することができます!

←ドキュメントに戻る