Uses Kendo UI for React Core via npm plus Webpack and ES6 (i.e. Babel).
This setup involves using webpack and several loaders to transform JSX/ES 2015 to ES5 code. By using webpack JavaScript modules can be loaded using ES 2015 module format (commonJS behind the scenes), properly transformed, then bundled.
First, install or update Node.js & npm.
Once you have Node.js/npm working open a terminal and install webpack and browsersync globally by running (might have to sudo):
$ npm install webpack browser-sync -g
Download a ZIP of this repository (i.e. kendo-ui-boilerplates).
Or, if you have GIT installed you can Git clone this repository.
SSH:
$ git clone [email protected]:kendo-labs/kendo-ui-boilerplates.git
https:
$ git clone https://github.com/kendo-labs/kendo-ui-boilerplates.git
Select the boilerplate you'd like to use from the directory you just downloaded/cloned and cd into that directory from a terminal.
Then run the following commands from the directory of the boilerplate you selected:
$ npm install
This will install the required npm packages.
From the root of the boilerplate directory open a command prompt and run the following npm command
> npm run webpack
Next, open another new command prompt and run the following npm command
> npm run server
Both of these commands will continue to run while developing.
Browser Sync should have open a browser running the index.html file and app.js file at http://localhost:4000. Both webpack and Browser Sync have been configured to re-run when changes are made.
Instead of downloading anything from Github, optionally, you can setup this boilerplate by following the seven steps below:
In this step make sure you have installed or have the most recent stable version of Node.js and npm. Then run the following command to install webpack and browser-sync globally.
> npm install webpack browser-sync -g
You may need to use "sudo" to install the packages globally.
On your local file system create a directory with the following sub-directories and files.
├── build
├── index.html
├── package.json
├── src
│ ├── app.js
│ ├── app.css
│ └── math.js
└── webpack.config.js
Open the package.json file and place the following empty JSON object inside of it:
{}
Open a command prompt from the root of the directory you created in step 2. Then run the following npm commands:
> npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 browser-sync css-loader extract-text-webpack-plugin style-loader webpack --save-dev
Next run:
> npm install react react-dom @telerik/kendo-react-buttons --save
Running these two commands will install the necessary npm packages for this setup. The project directory node_modules folder should now contain the following npm packages:
├── build
├── index.html
├── node_modules
│ ├── @telerik
│ ├── babel-core
│ ├── babel-loader
│ ├── babel-preset-es2015
│ ├── babel-preset-react
│ ├── babel-preset-stage-0
│ ├── browser-sync
│ ├── css-loader
│ ├── extract-text-webpack-plugin
│ ├── react
│ ├── react-dom
│ ├── style-loader
│ └── webpack
├── package.json
├── src
│ ├── app.js
│ ├── app.css
│ └── math.js
└── webpack.config.js
Open app.js and add the following to the file:
import React from 'react';
import ReactDOM from 'react-dom';
import * as KendoReactButtons from '@telerik/kendo-react-buttons';
import '@telerik/kendo-react-buttons/dist/npm/css/main.css';
import { square, diag } from './math.js';
import './app.css';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
class ButtonContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
disabled: false
};
}
onClick = () => {
this.setState({ disabled: !this.state.disabled });
}
render() {
return (
<div>
<KendoReactButtons.Button onClick={this.onClick}>Button 1</KendoReactButtons.Button>
<KendoReactButtons.Button disabled={this.state.disabled}>Button 2</KendoReactButtons.Button>
</div>
);
}
}
ReactDOM.render(
<div>
<p>Button</p>
<KendoReactButtons.Button>Button test</KendoReactButtons.Button>
<p>Disabled Button</p>
<KendoReactButtons.Button disabled>Button</KendoReactButtons.Button>
<p>Primary Button</p>
<KendoReactButtons.Button primary>Primary Button</KendoReactButtons.Button>
<p>Button with icon</p>
<KendoReactButtons.Button icon="refresh">Refresh</KendoReactButtons.Button>
<p>Button with icon (imageUrl)</p>
<KendoReactButtons.Button imageUrl="http://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png">Snowboarding</KendoReactButtons.Button>
<p>Button with a custom icon (iconClass) [FontAwesome icon]</p>
<KendoReactButtons.Button iconClass="fa fa-key fa-fw">FontAwesome icon</KendoReactButtons.Button>
<p>Toggleable Button</p>
<KendoReactButtons.Button togglable>Togglable button</KendoReactButtons.Button>
<p>onClick event handler</p>
<ButtonContainer />
</div>,
document.getElementById('app')
);
Open app.css and add the following to the file:
body{
margin:50px;
}
Open math.js and add the following to the file:
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
Open index.html and add the following to the file:
<!DOCTYPE html>
<html>
<head>
<title>webpack</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./build/style.css">
</head>
<body>
<div id="app"></div>
<script src="./build/appBundle.js"></script>
</body>
</html>
Open webpack.config.js and add the following to the file:
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: ['./src/app.js'],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'appBundle.js'
},
module: {
loaders: [{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
}, {
loader: 'babel-loader',
exclude: /node_modules/,
test: /\.js$/,
query: {
presets: ['es2015', 'react', 'stage-0'],
},
}]
},
plugins: [
new ExtractTextPlugin("style.css", {
allChunks: true
})
]
};
Open the package.json file which should look something like this:
{
"devDependencies": {
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"browser-sync": "^2.12.7",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.0"
},
"dependencies": {
"@telerik/kendo-react-buttons": "^0.1.0",
"react": "^15.0.2",
"react-dom": "^15.0.2"
}
}
Add the following scripts configurations to the package.json file.
{
"scripts": {
"webpack": "webpack --watch",
"server": "browser-sync --port 4000 start --server --files \"**/*.html\" \"build/**/*.css\" \"build/**/*.js\" "
},
"devDependencies": {
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"browser-sync": "^2.12.7",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.0"
},
"dependencies": {
"@telerik/kendo-react-buttons": "^0.1.0",
"react": "^15.0.2",
"react-dom": "^15.0.2"
}
}
From the root of the setup directory open a command prompt and run the following npm command
> npm run webpack
Next, open another new command prompt and run the following npm command
> npm run server
Both of these commands will continue to run while developing.
If you followed all the steps correctly Browser Sync should have open a browser running the index.html file and app.js file at http://localhost:4000. Both webpack and Browser Sync have been configured to re-run when changes are made.