Meteor + React => Adding and deleting rows and better CSS!

There's a default way to add and delete rows in react-bootstrap-table, though I'll have to tweak it for my use-case eventually. Looks like I'll have to add my own "add columns" code too (as well as the ability to specify where the new rows/columns will be inserted). For now though, my app looks like this, which I think is pretty cute!

What I learned:

First off, in order to add/delete a row in react-bootstrap-table, you do this:

<BootstrapTable data={this.state.cellData}
    striped={true}
    insertRow={true}
    deleteRow={true}
    selectRow={{ mode: 'checkbox' }}
    options={{
        onAddRow: this.props.onAddRow,
        onDeleteRow: this.props.onDeleteRow
    }}>
    <TableHeaderColumn width='150px' dataField='id' isKey={true}>Product ID</TableHeaderColumn>
    <TableHeaderColumn width='150px' dataField='name'>Product Name</TableHeaderColumn>
    <TableHeaderColumn width='150px' dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>

However, that landed me on multiple warnings that I couldn't figure out... These are the warnings in case you landed here from Google:

Failed to decode downloaded font: http://localhost:3000/fonts/glyphicons-halflings-regular.woff2
(index):1 OTS parsing error: invalid version tag
(index):1 Failed to decode downloaded font: http://localhost:3000/fonts/glyphicons-halflings-regular.woff
(index):1 OTS parsing error: invalid version tag
(index):1 Failed to decode downloaded font: http://localhost:3000/fonts/glyphicons-halflings-regular.ttf
(index):1 OTS parsing error: invalid version tag
(index):1 Failed to decode downloaded font: http://localhost:3000/packages/bootswatch_readable/bootswatch/fonts/glyphicons-halflings-regular.woff2
(index):1 OTS parsing error: invalid version tag
(index):1 Failed to decode downloaded font: http://localhost:3000/packages/bootswatch_readable/bootswatch/fonts/glyphicons-halflings-regular.woff
(index):1 OTS parsing error: invalid version tag
(index):1 Failed to decode downloaded font: http://localhost:3000/packages/bootswatch_readable/bootswatch/fonts/glyphicons-halflings-regular.ttf
(index):1 OTS parsing error: invalid version tag

After a bunch of Googling and trying various solutions there, I ended up looking at the react-bootstrap package, which includes a stylesheet from a link as opposed to a package install. So, I ended up removing bootstrap and adding a link-rel to my app header, like this (in App.jsx)

render() {
    console.log('rendering app');
    return (
        <div className="container">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" />
            <header>
                <h1>CompareApp Draft</h1>
            </header>
            <br />
//...etc.

I also removed the style imports from client/main.jsx. Please note! Do not remove the import 'react-bootstrap-table/css/react-bootstrap-table.css'; line!

I removed it, and that caused me to realize that all styles imported using <link rel> have higher precedence than the styles in main.css, which is not something we want (probably)...

There are multiple ways to import CSS files in a React app.

• Previously, we talked about adding it in App.jsx as an import. 
• Above, we talked about <link rel> in the HTML. 
• The other way is using @import in main.css.

It seems like I couldn't get @import to work with CSS files from the node_modules/ folder, although it seems like that should be possible (see the link I referenced in my previous post).

@imports go to the top of main.css, and everything defined below them takes higher precedence (as long as they have the same specificity). So, I removed the <link rel> from App.jsx, and now my main.css looks like:

@import "https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css";

That's kind of it for this post.