React-starter-kit: Integration between React Starter Kit and React Bootstrap

[paschalidi]

I am a bit new to the world of ReactJS but I have been coding in Javascript for a while now. Loving what you people doing with this project! Keep making this world a better place!
A while ago I added react-bootstrap to this project to make my life a bit easier.
I followed the tutorial from react-bootstrap and I successfully added Bootstrap.

The problem is now I cannot use the build in <Link /> from react-starter-kit which I liked a lot because of its simplicity and "power".

The official approach from react-bootstrap is to install react-router-bootstrap and replace <Link to="/path"> with <LinkContainer to="/path"> but that means that I have to replace react-routing and universal-route with react-router, and this is something I would like to avoid.

What is the right way to integrate react-bootstrap with react-starter-kit and still be able to use universal-routing? What changes should I make in order to make LinkContainer behave as Link component does?

When using Link from react-starter-kit a get this kind of error
Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See Header > NavItem > SafeAnchor > a > ... > Link > a.
Related link for this issue .
(http://stackoverflow.com/questions/35687353/react-bootstrap-link-item-in-a-navitem)

The official recommendation from react-bootstrap, and react-router.
(https://github.com/ReactTraining/react-router/issues/83#issuecomment-214794477)

[paschalidi]

Also as I said I am a bit new to reactJS and there is the possibility I am missing something.
Would be nice if someone could clarify the difference between Link component from react-starter-kit
and Link from react-router.
Thanks in advance

[frenzzy]

For example you can start using your own NavItem component instead of original:

import React, { PropTypes } from 'react';
import cx from 'classnames';
import Link from '../Link';

class NavItem extends React.Component {
  static propTypes = {
    className: PropTypes.string,
    href: PropTypes.string.isRequired,
    active: PropTypes.bool,
    disabled: PropTypes.bool,
    children: PropTypes.node.isRequired,
    onClick: PropTypes.func,
  };

  static defaultProps = {
    active: false,
    disabled: false,
  };

  render() {
    const { className, href, active, disabled, children, onClick } = this.props;
    return (
      <li role="presentation" className={cx(className, { active, disabled })}>
        <Link to={href} onClick={onClick}>
          {children}
        </Link>
      </li>
    );
  }
}

export default NavItem;

[paschalidi]

@frenzzy do you think moving to react-rooter and react-bootstrap-router is a better way to go?

[Shadowman4205]

@paschalidi did you find any good solution for the link in react starter kit with react-bootstrap? Thanks in advance.

[okendoken]

Hi guys,

please take a look at react-dashboard. We forked it from React Starter Kit and integrated react-router & bootstrap. We plan to continuously maintain it and keep it in sync with RSK.

Best

[sylvesteraswin]

I had the exact same problem and I got it working by doing this to the base setup:

Install latest versions of bootsrap and reactstrap

yarn add [email protected] reactstrap@next

Create a theme.css file

@import 'bootstrap/dist/css/bootstrap.css'

Modify server.js

import theme from './theme.css';

and go to this configuration and add app.get('*', async (req, res, next) => {});

css.add(theme._getCss());

Modify client.js

import theme from './theme.css';
theme._insertCss();

Modify webpack.config.js

Add this new object in config object

{
        test: /(bootstrap|theme).css$/,
        rules: [
          {
            use: 'isomorphic-style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              importLoader: 1,
              sourceMap: isDebug,
              modules: false,
              minimize: isDebug ? false : minimizeCssOptions,
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              config: {
                path: './tools/postcss.config.js',
              },
            },
          },
        ]
      },

and last add this to the existing reStyle rule

exclude: [/(bootstrap|theme).css$/],

Once you have done all this, you should have bootstrap with the exact same names.

[gruffT]

Came accross this thread and tried this method but it didn't work for my (fairly vanilla) project. I finally got it sorted in a very easy way so thought I'd share in case it helps someone else.

Add dependencies
yarn add reactstrap@next [email protected]

src\components\Layout\Layout.js
add
import bootstrap from 'bootstrap/dist/css/bootstrap.css';
and modify the export to include bootstrap
export default withStyles(normalizeCss, bootstrap, s)(Layout);

... and that's it! Took me a long time to figure out something really simple.

[agroves333]

@gruffT It's probably best to replace normalize with bootstrap since bootstrap already has normalize styles included. This works great btw. Thanks!

[Burry]

@gruffT's method worked great for me, but I was wondering if anyone had run into this issue. I'm trying to import in Layout.js a .scss file that imports both node_modules/bootstrap/scss/bootstrap.scss and my own variables.scss to override some of bootstrap's default variables. In Layout.js, when I import this new .scss file, isomorphic-styles adds the "Layout" prefix to all of Bootstrap's classes. I can't figure out how to disable this or how to otherwise import this .scss file into all routes. Would appreciate any pointers.

[GideonFlynn]

If I'm not mistaken, you could import * as bootstrap from 'file.sass';
and then export with styles and Bootstrap as an extra parameter.

On Mar 1, 2018 20:11, "Grant Burry" [e-mail] wrote:

@gruffT https://github.com/grufft's method worked great for me, but I
was wondering if anyone had run into this issue. I'm trying to import in
Layout.js a .sass file that imports both node_modules/bootstrap/sass/bootstrap.sass
and my own variables.sass to override some of bootstrap's default
variables. In Layout.js, when I import this new .sass file,
isomorphic-styles adds the "Layout" prefix to all of Bootstrap's classes. I
can't figure out how to disable this or how to otherwise import this .sass
file into all routes. Would appreciate any pointers.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/kriasoft/react-starter-kit/issues/992#issuecomment-369697664,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AXT1KnB2EaHSUJgQigPXpxTCH1QDKEPWks5taEfMgaJpZM4K6y0n
.

[Burry]

Hmm, no luck from that either. Now the bootstrap styles are getting imported, but classes are still prefixed, this time with "bootstrap-". Doesn't happen when using import bootstrap from 'bootstrap/dist/css/bootstrap.css'; per @gruffT. Here's what my source looks like:

Layout.js

import * as bootstrapStyle from '../bootstrap.scss';
import s from './Layout.scss';

[...]

export default withStyles(s, bootstrapStyle)(Layout);

boostrap.scss

@import 'node_modules/bootstrap/scss/bootstrap';
@import 'variables';

[Burry]

Ok I fixed it. If anyone happens to run into this problem, this is a Webpack issue. This configuration block in webpack.config.js is what adds prefixes and hash suffixes to internal CSS classes.

// Process internal/project styles (from src folder)
{
    include: path.resolve(__dirname, '../src'),
    loader: 'css-loader',
    options: {
        // CSS Loader https://github.com/webpack/css-loader
        importLoaders: 1,
        sourceMap: isDebug,
        // CSS Modules https://github.com/css-modules/css-modules
        modules: true,
        localIdentName: isDebug
            ? '[name]-[local]-[hash:base64:5]'
            : '[hash:base64:5]',
        // CSS Nano http://cssnano.co/
        minimize: isDebug ? false : minimizeCssOptions
    }
},

Because my Bootstrap tie-together .scss file was in /src, Bootstrap's class names were being modified. So I added an explicit exclude directive. Probably not the most elegant solution, but it works.

exclude: path.resolve(__dirname, '../src/components/bootstrap.scss'),

And for the block just before...

// Process external/third-party styles
{
    exclude: path.resolve(__dirname, '../src'),
    loader: 'css-loader',
    options: {
        sourceMap: isDebug,
        minimize: isDebug ? false : minimizeCssOptions
    }
},

Add this directive to explicitly process the custom bootstrap.scss file:

include: path.resolve(__dirname, '../src/components/bootstrap.scss'),

One final note. If anyone tries to add in custom Sass variables to Bootstrap using this method, in your custom .scss file, switch the order of the custom variables.scss and source bootstrap.scss from the earlier example I gave, or your custom variables won't be included:

/src/components/bootstrap.scss

@import 'variables';
@import 'node_modules/bootstrap/scss/bootstrap';