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

add your own code.

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

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

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

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

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

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

and remove their import statements in App.js.

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

running, the browser automatically refreshes with the updated code.

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

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

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

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

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

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

then run npm install --save react-bootstrap and bootstrap,

this will install the react-bootstrap components and the bootstrap CSS.

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

bootstrap css in the apps entry file index.js.

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

import 'bootstrap/dist/css/boostrap.css',

I'm importing this file above index.css,

that way any custom styles I write inside index.css

won't get overridden by bootstrap.css.

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

so I'll copy the code snippet from the docs,

Paste it inside the div, then modify the text.

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

the paragraph below to this is a simple search app.

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

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

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

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

You see create react app provides helpful error messages

right in the browser in addition to the errors displayed in the consol.

So any time you make a typo or

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

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

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

Create react app will display an error overlay

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

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

Go ahead and undo that.

And our compilation error lets me know that Jumbotron and

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

import them from the react-bootstrap module we installed.

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

From react-bootstrap

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

In the source folder I usually create a components folders

containing the components of my app to keep things organized.

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

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

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

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

And we'll export this component with export default SearchForm.

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

the react-bootstrap docs and modified,

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

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

So first Form And

FormGroup, FormControl.

And Button.

Next I'll import the SearchForm component

in App.js with import SearchForm frin /components/SearchForm.

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

Now let's create the results component.

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

inside our components folder.

We'll import React at the top of the file.

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

list group item components from react-bootstrap.

We'll say import Grid,

ListGroup, and ListGroupItem

from react-bootstrap.

Let's define the component as a function

with const Results = an arrow function.

And we'll export it with export default Results.

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

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

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

paste it below the h2.

And this consists of the ListGroup and

ListGroupItem components we're importing up here.

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

we'll render it just below the Jumbotron component.

So first we'll add import Results

from ./components/Results.

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

the Results component.

And there we have our example search app.

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

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

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

build your app, for example webpack, Babel, and Jest.

So you'll automatically get all the new features and

improvements of its dependencies and newly created apps.