1
00:00:01,340 --> 00:00:05,690
Let's start to write some code to create that search component back inside my editor.

2
00:00:05,780 --> 00:00:10,370
I'm going to find the components directory and I'll make a new file inside there called Search Dot J.S..

3
00:00:11,200 --> 00:00:14,510
And then going to immediately throw in just a very simple component and export it.

4
00:00:15,060 --> 00:00:17,180
I will import react from react.

5
00:00:18,350 --> 00:00:19,960
Also increased the font size here a little bit.

6
00:00:21,980 --> 00:00:23,360
Well, then make a search component.

7
00:00:25,190 --> 00:00:29,690
Right now, I will return a simple each one that says search.

8
00:00:30,560 --> 00:00:33,510
And then do an export default search at the bottom.

9
00:00:36,690 --> 00:00:38,670
Well, then go back over to our outtalk J.S. file.

10
00:00:40,700 --> 00:00:45,560
At the very top, I'm going to import search from components durch.

11
00:00:46,810 --> 00:00:51,340
And then, as I mentioned a little bit ago, we're not going to worry about handling any navigation

12
00:00:51,340 --> 00:00:52,630
or anything like that right now.

13
00:00:53,050 --> 00:00:58,300
Right now, to work on different widgets, we're just going to manually comment out or not display the

14
00:00:58,300 --> 00:00:58,810
accordion.

15
00:00:59,260 --> 00:01:01,660
And instead, we are going to show our search component.

16
00:01:02,110 --> 00:01:06,670
After we build all these widgets, well, then why are them all together using some form of navigation

17
00:01:06,940 --> 00:01:08,830
and let the user decide which one they look at?

18
00:01:08,860 --> 00:01:09,750
At any given time.

19
00:01:10,860 --> 00:01:13,260
We'll go down to my app component down here.

20
00:01:14,800 --> 00:01:20,530
And right now, I'm just going to delete the accordion entirely and I will replace it with the search

21
00:01:20,530 --> 00:01:21,040
component.

22
00:01:24,450 --> 00:01:28,410
Let's then go back over to our browser and just make sure we see search up here on the screen.

23
00:01:28,920 --> 00:01:29,400
Simple enough.

24
00:01:30,380 --> 00:01:31,370
OK, that's a good start.

25
00:01:32,270 --> 00:01:36,860
Let's take a quick pause now that we've got the very boring code put together and then start adding

26
00:01:36,860 --> 00:01:38,630
in some input from state.

27
00:01:38,720 --> 00:01:40,220
All that kind of stuff in the next video.