DEV Community

Cover image for Getting started with React Bootstrap
Mario Arranz
Mario Arranz

Posted on

Getting started with React Bootstrap

Installing React

Let's install and use the create-react-app tool to initialise a react app with the main configuration:

npm install -g create-react-app
# We might need adding sudo at the begining
Enter fullscreen mode Exit fullscreen mode

Create the directory we want to start working with and go into it:

mkdir react-bootstrap
cd react-bootstrap
Enter fullscreen mode Exit fullscreen mode

Create the scaffolding in the directory:

create-react-app .
Enter fullscreen mode Exit fullscreen mode

At this point we should have a sample react app, so we can run it locally:

yarn start
Enter fullscreen mode Exit fullscreen mode

Starting app

Adding some styles

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites, and there is a version for react that we can install:

yarn add react-bootstrap bootstrap
Enter fullscreen mode Exit fullscreen mode

Finally, we need to set it in src/index.js by simply adding an extra import:

import 'bootstrap/dist/css/bootstrap.css'
Enter fullscreen mode Exit fullscreen mode

Now, when loading the website (run yarn start in case you stopped it), we will see some diferent colours changed by bootstrap.

Try it out

After configuring the react app to use bootstrap, the next thing we can do is taking advantage of its simplicity for creating a beautiful UI without being a CSS expert.

But in order to do that, first we need fetching some data to show.

As we saw in src/index.js,

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)
Enter fullscreen mode Exit fullscreen mode

the website is default configured to load the App component. So, in this case, this is going to be the component to modify.

So far, this App.js is using a functional component, a component which doesn’t have its own state or needs to access a lifecycle hook.

function App() {
  return (
      // ...
  )
}
Enter fullscreen mode Exit fullscreen mode

To show some data in the UI, we need to have it before loading the page. An advantage of using React components over functional components is that we can override lifecycle methods. So the first change is transforming the functional component into a React component.

import React, { Component } from 'react';
// ...

class App extends Component {
    render() {
        return (
            // ...
        )
    }
}
Enter fullscreen mode Exit fullscreen mode

At this point we can fetch the data, and to do it before the page loads completely we will override componentDidMount().

class App extends Component {
  componentDidMount() {
    fetch('http://jsonplaceholder.typicode.com/users')
    .then(res => res.json())
    .then((data) => {
      this.setState({ contacts: data })
      console.log(this.state.contacts)
    })
    .catch(console.log)
  }

  render() {
    return (
      // ...
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

Thanks to console.log(), when we reload the website while having the developer tools opened, we can see the fetched result.

Fetching data

Finally, we structure the data the way we want. For this example I've used bootstrap cards:

import React, { Component, Fragment } from 'react'
import { Card, Button } from 'react-bootstrap'

class App extends Component {
  componentDidMount() {
    // ...
  }

  render() {
    return (
      <Fragment>
        <CardGroup>
          {this.state.contacts.map((contact, idx) => (
            <Card key={idx}>
              <Card.Body>
                <Card.Title>{contact.name}</Card.Title>
                <Card.Text>{contact.email}</Card.Text>
                <Button variant="warning" size="sm">
                  <a href={'https://' + contact.website} target="_blank" rel="noopener noreferrer">
                    {contact.website}
                  </a>
                </Button>
              </Card.Body>
            </Card>
          ))}
        </CardGroup>
      </Fragment>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

Final version

Github source code


Found a typo?

If you've found a typo, a sentence that could be improved or anything else that should be updated on this blog post, you can access it through a git repository and make a pull request. Instead of posting a comment, please go directly to my GitHub repository and open a new pull request with your changes.

Top comments (2)

Collapse
 
ramclen profile image
Cristopher López Santana

It help me a lot, Great post!

Collapse
 
thisisitz profile image
Itziar Urbieta León

Perfect! It is what I've been looking for. Thanks