Meteor + React => react-bootstrap-table

I have this idea to build an app that would help people make decisions by allowing them to move away from making Excel lists and figuring what matters most to them in their heads (or am I the only one who does that?). Anyway, I have a project started here and the readme explains it better than I will now.

After much deliberation I decided to build the app in Meteor, and, since React seems to be so hot right now, make my UI in React. Please note that I have zero experience building web apps from scratch, though I've contributed code to some at work. Still, getting it somewhere where I can just write code is simply not as straight-forward as it should be, especially if you've never used npm before for example.

Meteor version: 1.4.2.3

The versions of the other stuff I'm using:

• react: 15.4.0
• react-bootstrap-table: 2.5.8
• bootstrap: 3.3.7
• react-dom: 15.4.0
• react-widgets: 3.4.4

My OS is MacOs Sierra and I'm using iTerm2 because it can do split screen (among other things).

I already did the Meteor tutorial for React, and created my new app. Basically I'm currently between steps 2 and 3 in that tutorial with my new app. Note: console.log works just fine in react, although some of the tutorials were installing other packages for logging (don't do that for now!).

Since my whole app is built on tables, I decided to install react-bootstrap-table. And, since that depends on bootstrap, I also installed that. So you can do:

meteor npm install --save bootstrap react-bootstrap-table

And now, to use it!
The example on the npm packages page was pretty useless for me. Do not install boostrap (yet). We may end up wanting react-bootstrap, but not right now.

It took me a while to find some code that worked, and I found this in an answer, so I'll just paste below. I've put this in a ui/components/App.jsx file instead of the imports/ui/App.jsx file the tutorial suggested. I'll also replace the imports/ui/Task.jsx with a ui/components/Cells.jsx or something of the sort later.

My ui/components/App.jsx file looks like this:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';

var products = [];

function addProducts(quantity) {
  const startId = products.length;
  for (let i = 0; i < quantity; i++) {
    const id = startId + i;
    products.push({
      id: id,
      name: 'Item name ' + id,
      price: 2100 + i
    });
  }
}

addProducts(5);


// App component - represents the whole app
export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      ecsData: []
    };
  }

  componentDidMount() {
    this.setState({
      ecsData: products
    });
  }

  render() {
    console.log('rendering app');
    return (
      <div classname="container">
        <header>
          <h1>CompareApp Draft</h1>
        </header>
        <BootstrapTable data="{this.state.ecsData}">
          <TableHeaderColumn datafield="id" iskey="{true}" width="150px">Product ID</TableHeaderColumn>
          <TableHeaderColumn datafield="name" width="220px">Product Name</TableHeaderColumn>
          <TableHeaderColumn datafield="price" width="180px">Product Price</TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}

Not completely what I want, but baby steps. Remember, I have absolutely zero experience with this.

Apparently, the only way to get css files from the node_modules folder into your app currently, is to do one of the things enumerated here. The only one that actually worked for me though, was the import. And the import seems to have to be done in client/main.jsx.

My client/main.jsx file looks like this:

import 'react-bootstrap-table/css/react-bootstrap-table.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';

import App from '../ui/components/App.jsx';
 
Meteor.startup(() => {
  render(<App />, document.getElementById('render-target'));
});

And the app, running at http://localhost:3000/, looks like this: