源码

react-datables-example

Example for Datatables usage with React and Webpack

This example will mainly focus on how to use Datatables and its extensions in React project instead of diving into the fabulous API.

How to run this example

1

npm install && npm start

Open your browser and navigate to http://localhost:8080/static/entry

How to import Datatables ?

1
2

import $ from 'jquery';
import 'datatables.net';

After being imported, you can initialize a table DOM element normally

$(elem).dataTable(options) or $(elem).DataTable(options)

Is it possible to use DataTable object directly ?

No, because it is deeply coupled with jQuery, it requires jQuery context to intialize the table.

In fact, the DataTable object is imported by default.

1
2
3

import $ from 'jquery';
import DataTable from 'datatables.net';
console.log(DataTable === $.fn.dataTable); // true

How to import Bootstrap styling ?

1
2
3

import 'bootstrap/dist/css/bootstrap.css';
import 'datatables.net-bs/js/dataTables.bootstrap';
import 'datatables.net-bs/css/dataTables.bootstrap.css';

Then, make sure you configure the css-loader and style-loader right in webpack.config.js file.

How to load the i18n/fonts file asynchronously ?

Extend the dataTable.defaults object

1
2
3
4
5

$.extend(true, $.fn.dataTable.defaults, {
  language: {
    url: require('../lib/zh_cn.json')
  }
});

Loading i18n files is just like loading icon font files.

1
2
3
4
5
6
7

{
  test   : /\.(json|ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
  loader : 'file-loader',
  query:{
    name:'[name]-[md5:hash:8].[ext]'
  }
}

How to load extensions ?

Check the extensions list, https://www.npmjs.com/~datatables

To import an extension, normaly it would require two steps as following:

1
2

import 'datatables.net-fixedheader';
import 'datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.css';

1. Load the extension script, normaly the entry file is defined in package.json main property ;

2. Load the style for specific front-end framework. For example, bs means Bootstrap.

How to use string templates

ES6 template is a good choice

Data:

1
2
3
4
5
6
7
8
9

[
  {
    name:'1',
    foo:{
      bar:1
    }
  }
  ...
]

Columns:

1
2
3
4
5
6
7
8

[
  {
    data:'foo',
    title:'foo.bar',
    render:foo=>`<em>${foo.bar}</em>`
  }
  ...
}

How to use React components in cell rendering

Let’s assume we need to use the react-toggle component in our table.

We have three ways to use it:

Implement render function and use React DOM server’s renderToStaticMarkup method

1
2
3
4
5
6
7

{
  columns:[{
    ...
    render:elem=>renderToStaticMarkup(<Toggle/>)
  }]
  ...
}

Implement datatable createdCell function and create multiple React roots

1
2
3
4
5
6
7

{
  columns:[{
    ...
    createdCell:(td,val)=>render(<Toggle/>,td)
  }]
  ...
}

Prepare the HTML markup first and then initialize the Datatable

1
2
3
4
5
6
7
8
9
10

<tbody>
{
  DATA.map(e=><tr key={e.id}>
    <td>{e.id}</td>
    <td data-order={e.id}>{e.name}</td>
    <td>{e.value}</td>
    <td><Toggle/></td>
  </tr>)
}
</tbody>

A performance test page is written to show the difference between these ways

http://localhost:8080/static/toggle

And here is the performance report with 5000 data in table comparing above three options.

Summary:

• If your component is dummy(e.g stateless funtion), use renderToStaticMarkup
• If your component has state, but has no dependency in its context, use render
• If your component has state or has dependency in its context (e.g Redux Componet or React Router Links), use markup

TODO

• work with JSON data
• Lifecycle
• Using React in column rendering
• How to avoid conflicts between them
• Work with react-dom/server

源码

react-zeroclipboard-example

An example showing how to use ZeroClipboard in React application.

Preface

This example assumes you have working experience with these tools or frameworks

• React
• Babel
• Webpack
• ZeroClipboard

The code base is written in ES6, and we will use Babel to compile it to ES5. Webpack comes in handy to make this workflow automated.

Demo

http://wyvernnot.github.io/react-zeroclipboard-example/

Install ZeroClipboard

ZeroClipboard can be easily installed using NPM.

1

npm install zeroclipboard -D

Import ZeroClipboad

After installing it, it can be imported just like importing other modules.

1
2

import React from 'react';
import ZeroClipboard from 'zeroclipboard';

Create new CopyButton component

We will create a React component using stateless functions,
the button is intialized in the ref-callback

1
2
3
4
5

const CopyButton = (props)=> {
  return <button {...props} ref={elem=>new ZeroClipboard(elem)}>
    {props.children}
  </button>
}

Use the CopyButton component in your app

1

<CopyButton data-clipboard-text={textToBeCopied}>Click to copy</CopyButton>

Solve the SWF dependency

After the package is built and deployed, you will most likely run into this problem.

The SWF file is not found, you can mannually copy this file into your static server and make sure the path is correct.
But you need to do this everytime after you do a fresh deployment. Let’s solve the problem using webpack.

First, we need to config the ZeroClipboard’s swfPath option:

1
2
3

ZeroClipboard.config({
  swfPath: require('zeroclipboard/dist/ZeroClipboard.swf')
});

This piece of code looks very strange because a .swf file is required. Unless, the second step, we tell webpack how to deal with
.swf files. We need a loader which will simply copy required dependencies which
ends with .swf to the webpack output path. This loader can be installed by typing npm install file-loader -D. Last, we change the
module.loaders part in webpack.config.js to:

1
2
3
4

{
  test: /\.swf$/,
  loader: 'file-loader'
}

Close

In this example, we build a React application which integrates ZeroClipboard. The application is written in ES6
and compiled to ES5 using webpack. In order to solve the ZeroClipboard.swf 404 not found problem smartly, we use a
webpack loader called file-loader.

源码

源码

主要有这三种

• NoVNC
• wssh
• SPICE

源码

源码

源码

源码

源码

通过使用 async-listener 把 Node.js 中的异步回调可视化。

源码