Customizing Your Project

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