A Simple datatable like that:
The tablecomponent has a thead, a tbody and a stripe css set.
<table class="table table-striped">
<thead class="thead-default">
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nikko Laus1</td>
</tr>
<tr>
<td>2</td>
<td>Sam Collins</td>
</tr>
<tr>
<td>3</td>
<td>Carl Smith Wesson</td>
</tr>
<tr>
<td>4</td>
<td>Peter Austin</td>
</tr>
<tr>
<td>5</td>
<td>Tini Titus</td>
</tr>
<tr>
<td>6</td>
<td>Sarra Cams</td>
</tr>
</tbody>
</table>
Now we want to to this the react way.
We want to split the table in 3 components. One "App" component to wrap all other components. One TableRowComponent, which handles each row and a tablehead component to format the tablehead.
We are using Visual Studio code with all available react plugins on ubuntu 16.04
This tutorial is inspired by this great egghead video from Joe Maddalone:
https://egghead.io/lessons/react-dynamically-generated-components
Prerequisits
At first, you need to have some tools installed. Here they are.node.js installed
npm installed
babel react
the facebook react library
babel installed
Babel is a javascript compiler, which transforms latest javascriptstandards to native javascript
webpack installed
Webapck is a modulebundler which creates statis js assets for the browser
Bootstrap installed
Bootstrap is a common css , component framework from twitter
$ apt-get install nodejs $ apt-get install npm
$ npm install -g --save babel webpack webpack-server-dev
$ npm install --save babel-core babel- loader babel preset-es2015 babel-preset-react
$ npm install css-loader style-loader file-loader url-loader --save-dev
Init your node project
To initialise your project simple type:$ npm init
This will create your package.json
Fill your projectdata
My package.json looks like that
{
"name": "react-redux",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel": "^6.5.2",
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"bootstrap": "^3.3.7",
"react": "^15.3.1",
"react-bootstrap": "^0.30.3",
"react-dom": "^15.3.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.0"
},
"devDependencies": {
"css-loader": "^0.24.0",
"file-loader": "^0.9.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7"
}
}
Add your component files
Create a index.htmlThis will contain your main html page
main.js
this will load your components
webpack.config.js
this will setup your dependencies and loaders and defines the compilingprocess of es2015 babel to native javascript
App.js
Here you will code your components
touch main.js index.html App.js webpack.config.js
Configure your webpack.config.js
Open your webpack.config.js and add folling codemodule.exports=
{
entry:'./main.js',
output:
{
path:'./',
filename: 'index.js'
},
devServer:
{
inline:true,
port:3333
},
module:
{
loaders: [
{
test:/\.js$/,
exclude: /node_modules/,
loader:'babel-loader',
query:
{
presets:['es2015','react']
}
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.png$/,
loader: "url-loader?limit=100000"
},
{
test: /\.jpg$/,
loader: "file-loader"
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
}
]
}
}
- This will tell webpack to pack a index.js with all javascripts in it- Start a webserver on port 3333
- test all .js files
- Generate native javascript from babel sources.
- Tell webpack to load boostrap filetypes, mimetypes
Load your javascript on your html page
Open your index.html and add folling snippet<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
- This will add a div with id "app" which is the container for our app
- include the webpack generated index.js
Create your bootrap react component
Open your App.js and add folling snippetimport React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component
{
constructor()
{
super();
this.state = {
data:[
{id:1, name:"Nikko Laus1"},
{id:2, name:"Sam Collins"},
{id:3, name:"Carl Smith Wesson"},
{id:4, name:"Peter Austin"},
{id:5, name:"Tini Titus"},
{id:6, name:"Sarra Cams"}
]
}
}
render() {
let rows = this.state.data.map(person =>
{
return <TableRow key={person.id} data={person}/>
});
return (<table className="table table-striped">
<TableHead/>
<tbody>{rows}</tbody>
</table>
);
}
}
class TableHead extends React.Component
{
constructor()
{
super();
}
render()
{
return (<thead className="thead-default">
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
);
}
}
class TableRow extends React.Component
{
constructor()
{
super();
}
render()
{
return (<tr>
<td>{this.props.data.id}</td>
<td>{this.props.data.name}</td>
</tr>
);
}
}
export default App
- This adds a the base App Component with a dataset constructed as a state property in the constructor.
- This will add your App Component. This component renders an HTML-table with a seperate <TableRow> and a separate <TableHead> component in boostrap style.
- It also adds a <TableRow> component, which handles the row pattern
- At the end it adds a <TableHead> component, which builds the header of the tablecomponent
Load your component in main.js
Open your main.js and add folling snippetimport App from './App';
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
< App / >
, document.getElementById('app')
);
- Import your App component, which you have prevoiusly created and render it to a div with the id 'app'
Start your server and test your app
Open a terminal and type:npm start
This will start your webserver on port 3333
Surf to localhost:3333
Thats it, you have created your first bootstrap table component with bootstrap
Nice isn't it?
