Adding Bootstrap to ReactJS

Question

I am new to React and trying to add Bootstrap to my project. I followed the below tutorial in creating my first app.

https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-nodejs-with-react-and-jsx?view=vs-2017

I then tried to add Bootstrap by npm install from the offical site and adding the import line of code to app.tsx file:

var React = require('react');
var ReactDOM = require('react-dom');
import { Button } from 'react-bootstrap';

I also added "react-bootstrap": "^0.32.4" to my package. However when I try to add a button to my app.tsx file, I get errors i.e.

<div>  <Button bsStyle="primary">Primary</Button> </div>

Errors: build: JSX expression must have one parent element. TS17004 (TS) Cannot use JSX unless the '--jsx' flag is provided. Build:Left side of comma operator is unused and has no side effects.

I am not sure exactly why this is happening.

Its the same one as the tutorial except I added the button tag — M guy
– M guy, Commented Oct 22, 2018 at 12:55

Akhil Gautam · Accepted Answer · 2018-10-22 13:15:23Z

2

JSX expression must have one parent element. TS17004 (TS).

The above error occurs when you are having multiple JSX elements inside the return(). To get rid of that, you can wrap all the elements inside a <div> tag.

var React = require('react');
var ReactDOM = require('react-dom');
import { Button } from 'react-bootstrap';

class Hello extends React.Component {
    render() {
        return (
          <div>
            <Button bsStyle="primary">Primary</Button>
            <h1>Welcome to React!!</h1>
         </div>
        );
    }
}

ReactDOM.render(<Hello />, document.getElementById('root'));

Alternatively, from React 16, there is something called <React.Fragments>. This is a better approach as you don't need to add an extra dom-node.

var React = require('react');
var ReactDOM = require('react-dom');
import { Button } from 'react-bootstrap';

class Hello extends React.Component {
    render() {
        return (
          <React.Fragment>
            <Button bsStyle="primary">Primary</Button>
            <h1>Welcome to React!!</h1>
         </React.Fragment>
        );
    }
}

ReactDOM.render(<Hello />, document.getElementById('root'));

And, one more I would like to mention: you don't need to use node's require syntax, you use import of ES6.

answered Oct 22, 2018 at 13:15

Akhil Gautam

1691 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

M guy Over a year ago

Do you have any ideas as to why no bootstrap buttons are appearing

Akhil Gautam Over a year ago

@Mguy Can you share the code-sample so that I can look into the issue?

Roopak Puthenveettil · Accepted Answer · 2018-10-22 12:57:58Z

1

render() {
        return (
            <div>
              <h1>Welcome to React!!</h1>
              <Button bsStyle="primary">Primary</Button>
            </div>
        );
    }

Try this.

answered Oct 22, 2018 at 12:57

Roopak Puthenveettil

1,5052 gold badges14 silver badges28 bronze badges

Comments

Lars · Accepted Answer · 2018-10-22 13:04:00Z

0

Make sure your <Button> is wrapped with a div, your elements should be wrapped in a parent element.

Since React 16.2 you can also use Fragments

EDIT:

Also make your your tsconfig.json includes "jsx": "react";

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "jsx": "react"
  },
  "exclude": [
    "node_modules"
  ],
  "files": [
    "app.tsx"
  ]
}

edited Oct 22, 2018 at 13:04

answered Oct 22, 2018 at 12:52

Lars

631 silver badge5 bronze badges

Collectives™ on Stack Overflow

Adding Bootstrap to ReactJS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related