Preview

Start a free Courses trial
to watch this video

Customizing Your Project

Name: Customizing Your Project
Uploaded: 2017-07-26T10:52:20Z
Duration: 557 s
Description: In this video, we'll customize the project using React-Bootstrap, a framework for integrating Bootstrap with React apps.

9:17 with Guil Hernandez

In this video, we'll customize the project using React-Bootstrap, a framework for integrating Bootstrap with React apps.

Teacher's Notes
Video Transcript
Downloads

UPDATE: The 'Grid' component was renamed to 'Container' in the latest version of React Bootstrap. You'll need to import `Container` instead of `Grid`, like so:

import { Container, Jumbotron } from 'react-bootstrap';

Then use the Container component in place of Grid:

<Jumbotron>
  <Container>
    <h1>Search App</h1>
    <p>This is a simple search app</p>
  </Container>
</Jumbotron>

SearchForm.js

<Form inline>
  <FormGroup controlId="formInlineEmail">
    <FormControl type="search" placeholder="enter something..." />
  </FormGroup>
  {' '}
  <Button type="submit">
    search
  </Button>
</Form>

In the Results component, you will need to import Container instead of Grid:

import {
  Container,
  ListGroup,
  ListGroupItem
} from 'react-bootstrap';

<Container>
  <h2>Results List</h2>
  <ListGroup>
    <ListGroupItem href="#" active>Link 1</ListGroupItem>
    <ListGroupItem href="#">Link 2</ListGroupItem>
    <ListGroupItem href="#" disabled>Link 3</ListGroupItem>
  </ListGroup>
</Container>

Resources

You'll usually delete most of the code inside the App.js starter file and 0:00

add your own code. 0:04

In the App components return statement I'm going to delete 0:05

everything inside the wrapper div with the class App, including the class name. 0:08

App.css contains styles specific to the app component, so I'm not gonna use this 0:12

style sheet because I'm going into import CSS from the bootstrap framework instead. 0:19

I'm also not going to use the file logo.svg, so 0:24

I'll delete App.css and logo.svg from the project 0:28

and remove their import statements in App.js. 0:34

In Create React App, when you make changes and save a file while npm start is 0:41

running, the browser automatically refreshes with the updated code. 0:45

So now let's create a few new components for the app. 0:50

And for this simple app I'm going to use third party components from 0:52

react-bootstrap, a popular framework for integrating Bootstrap with React apps, 0:56

I've posted the link to react-bootstrap in the teacher's notes for this video. 1:00

You install other dependencies like react-bootstrap using npm or yarn. 1:04

So in my terminal I'll stop running the app by pressing Ctrl c, 1:09

then run npm install --save react-bootstrap and bootstrap, 1:15

this will install the react-bootstrap components and the bootstrap CSS. 1:22

Next I'll start up the app with npm start then import 1:29

bootstrap css in the apps entry file index.js. 1:36

So above the import for index.css I'll add 1:41

import 'bootstrap/dist/css/boostrap.css', 1:46

I'm importing this file above index.css, 1:52

that way any custom styles I write inside index.css 1:56

won't get overridden by bootstrap.css. 2:02

In App.js I'll start by adding react-bootstrap's jumbotron component, 2:07

so I'll copy the code snippet from the docs, 2:12

Paste it inside the div, then modify the text. 2:17

So I'll change the h1 text to search App, and 2:22

the paragraph below to this is a simple search app. 2:28

And I'll delete the second paragraph since we won't need it. 2:39

I'm also going to use Bootstrap's grid component to lay out 2:43

the content inside the Jumbotron, so I'll wrap the h1 in paragraph inside grid. 2:48

Saving these changes displays a failed to compile error in the browser. 3:02

You see create react app provides helpful error messages 3:07

right in the browser in addition to the errors displayed in the consol. 3:11

So any time you make a typo or 3:15

forget to import a module, you'll see a compilation error like this. 3:17

Now if your app crashes in development and has several errors, so for 3:21

example I'll delete all the code in App.js. 3:25

Create react app will display an error overlay 3:29

that lets you focus on one error at a time, and 3:33

this is much more helpful than seeing your console flooded with uncaught errors. 3:36

Go ahead and undo that. 3:44

And our compilation error lets me know that Jumbotron and 3:47

Grid are not defined, so in order to render these components you need to 3:52

import them from the react-bootstrap module we installed. 3:55

So at the top of App.js I'll add import Grid and Jumbotron. 3:59

From react-bootstrap 4:11

So now let's add two more components, a search form and a search result list. 4:22

In the source folder I usually create a components folders 4:28

containing the components of my app to keep things organized. 4:32

So I'll add a new folder named components, and 4:35

first I'll add a new file named SearchForm.js. 4:41

And in SearchForm.js we'll first import react, import react from react. 4:50

Then create the search form component as a function, const SearchForm. 4:59

And we'll export this component with export default SearchForm. 5:12

Inside the SearchForm function I'll paste a form component that I copied from 5:23

the react-bootstrap docs and modified, 5:27

you can grab this snippet from the teacher's notes or add your own. 5:29

So at the top of the file let's import a few components from react-bootstrap. 5:33

So first Form And 5:40

FormGroup, FormControl. 5:42

And Button. 5:50

Next I'll import the SearchForm component 6:01

in App.js with import SearchForm frin /components/SearchForm. 6:06

And I'll render the SearchForm inside the Jumbotron right below the paragraph. 6:17

Now let's create the results component. 6:31

Back in my project I'll add a new file named Results.js 6:34

inside our components folder. 6:39

We'll import React at the top of the file. 6:45

And for this component we're going to import a grid, list group, and 6:54

list group item components from react-bootstrap. 6:58

We'll say import Grid, 7:01

ListGroup, and ListGroupItem 7:05

from react-bootstrap. 7:11

Let's define the component as a function 7:15

with const Results = an arrow function. 7:22

And we'll export it with export default Results. 7:33

So let's have it render the Grid component for layout. 7:41

And inside it I'll add an h2 with the text Results List. 7:50

Now I'll simply copy this ListGroup component snippet from the docs and 8:00

paste it below the h2. 8:06

And this consists of the ListGroup and 8:12

ListGroupItem components we're importing up here. 8:14

So now in App.js we'll import the new Results component and 8:18

we'll render it just below the Jumbotron component. 8:22

So first we'll add import Results 8:26

from ./components/Results. 8:31

And in the return statement just below the Jumbotron component we'll add 8:38

the Results component. 8:42

And there we have our example search app. 8:49

When you create a project with create React app it installs the latest version 8:53

of react and react-dom as well as the latest version of react-scripts, 8:58

a development dependency that manages all other dependencies that start, test, and 9:03

build your app, for example webpack, Babel, and Jest. 9:08

So you'll automatically get all the new features and 9:11

improvements of its dependencies and newly created apps. 9:13

You need to sign up for Treehouse in order to download course files.

Using Create React App

Customizing Your Project

UPDATE: The 'Grid' component was renamed to 'Container' in the latest version of React Bootstrap. You'll need to import Container instead of Grid, like so:

Resources

UPDATE: The 'Grid' component was renamed to 'Container' in the latest version of React Bootstrap. You'll need to import `Container` instead of `Grid`, like so: