react.js: create a basic table component with bootstrap styles

Today we want to implement a simple task in HTML with css.
A Simple datatable like that:

The tablecomponent has a thead, a tbody and a stripe css set.

In good old html we do that like this:

<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.html 
This 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 code

module.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 snippet

import 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 snippet

import 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?