Preview
Video Player
00:00
00:00
Customizing Your Project
9:17In this video, we'll customize the project using React-Bootstrap, a framework for integrating Bootstrap with React apps.
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