Tableau Integration Using React Starterkit with react-script-loader
This react starterkit provides a prepared development environment based on gulp, stylus and webpack. The internal data flow is handled with Reflux and the routing is managed with the React-Router.
I added react-script-loader to the node module dependencies to enable use of tableau js files.
Get the React Starterkit
$ git clone https://github.com/wbkd/react-starterkit.git && cd react-starterkit
Install all dependencies.
$ npm install
Builds the application and starts a webserver with livereload. By default the webserver starts at port 1337.
You can define a port with
$ gulp --port 3333.
Builds a minified version of the application in the dist folder.
$ gulp build --type production
$ npm test
app/server.js <br />
ES6 with babel
CSS entry file:
As you can see we are using stylus to preprocess our .styl files. If you didn't work with a css preprocessor before the stylus page is a good starting point to get to know what stylus can do for you.<br /><br />
If you want to use third-party CSS you just include it via
@import 'path/to/your/third-party-styles.css' at the top of the main.styl file.
You can find the webpack configuration in the webpack.config.js file.
We use the babel-loader in order to load .jsx and .js files via webpack. If it's possible install all your dependencies with NPM. Packages installed with NPM can be used like this:
var moduleXYZ = require('moduleXYZ');
You can find all loaders in this list.