Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll customize the project using React-Bootstrap, a framework for integrating Bootstrap with React apps.
UPDATE: In the latest version of React Bootstrap the Grid component was renamed to Container and the Jumbotron has been discontinued. Instead of these components you can use the following replacements
Change the import in your App.js file to be:
import { Container, Carousel } from 'react-bootstrap';
Then use the Container component instead of Grid, and Carousel instead of Jumbotron:
<Carousel>
<Container>
<h1>Search App</h1>
<p>This is a simple search app</p>
</Container>
</Carousel>
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
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up