1 00:00:00,240 --> 00:00:00,690 Beautiful. 2 00:00:00,990 --> 00:00:07,530 And once we're done with our first component, I'm showing you how we're going to set up styles for 3 00:00:07,830 --> 00:00:14,070 the remaining of the project because writing them like this for each and every component is not very 4 00:00:14,070 --> 00:00:14,640 sustainable. 5 00:00:14,650 --> 00:00:20,070 Like I said, we'll spend away more time on styling than the actual project logic. 6 00:00:20,730 --> 00:00:27,910 And before I do that, let me just mention that it is still my preference to keep styles together with 7 00:00:27,910 --> 00:00:33,750 the logic and the component because I found out that in the long run, it saves me time where if I want 8 00:00:33,750 --> 00:00:37,200 to change something about component, everything is going to someplace. 9 00:00:37,200 --> 00:00:42,600 But we cannot do this for this project because then we would have to copy and paste pretty much the 10 00:00:42,600 --> 00:00:47,310 stars or add them together, which again, like I just said, is not very sustainable. 11 00:00:47,670 --> 00:00:54,000 So instead, what we can do, we can set up a separate component just for style component in a separate 12 00:00:54,000 --> 00:00:55,800 folder as a separate file. 13 00:00:55,890 --> 00:00:56,910 So how is that going to look like? 14 00:00:56,940 --> 00:00:59,340 Well, we can navigate to the assets. 15 00:00:59,670 --> 00:01:03,150 We're looking for wrappers here and inside of the wrappers. 16 00:01:03,150 --> 00:01:04,200 Just create a new one. 17 00:01:04,599 --> 00:01:05,519 Just create a new file. 18 00:01:05,519 --> 00:01:09,060 And I'm going to call this testing J.S. one. 19 00:01:09,060 --> 00:01:13,680 And what you want to do is take everything from the landing as far as the wrappers concerned. 20 00:01:14,250 --> 00:01:16,170 So take all this code. 21 00:01:16,560 --> 00:01:17,280 Cut it out. 22 00:01:17,970 --> 00:01:19,470 Set it back into testing. 23 00:01:19,620 --> 00:01:22,230 Now you also won't need the style anymore here. 24 00:01:22,650 --> 00:01:29,700 So remove this one as all the import and you want to place it here in the testing one on one and where 25 00:01:29,700 --> 00:01:31,830 we want to do it, we want to export this wrapper. 26 00:01:32,130 --> 00:01:35,640 Now, if you want, you can export it as name export. 27 00:01:35,640 --> 00:01:40,860 But in my case, I'm going to go with export default and that I'm looking for the same name. 28 00:01:41,190 --> 00:01:45,720 So I'm going to go here, we have a wrapper and then back in the landing. 29 00:01:45,960 --> 00:01:46,710 What are we going to do? 30 00:01:47,130 --> 00:01:50,430 We're going to import the components, so we're not looking for styled. 31 00:01:50,610 --> 00:01:52,080 We're looking for stored component. 32 00:01:52,440 --> 00:02:00,390 So I'm going to go here wrapper and then we'll go to your assets, of course, run wrappers and then 33 00:02:00,390 --> 00:02:02,130 we're looking for retesting one. 34 00:02:02,490 --> 00:02:05,700 And once we're done with important notice, how everything works. 35 00:02:06,180 --> 00:02:07,500 So nothing broke. 36 00:02:07,620 --> 00:02:07,950 Why? 37 00:02:07,970 --> 00:02:12,600 Well, because we simply set up the styles in the separate file. 38 00:02:12,960 --> 00:02:20,190 And if you take a look at the wrappers, the folder, what you'll notice there is the landing page. 39 00:02:20,940 --> 00:02:21,720 Look for this one. 40 00:02:21,960 --> 00:02:24,660 And notice the landing page, and I'll take a look at styles. 41 00:02:25,200 --> 00:02:26,640 So basically, what's happening? 42 00:02:27,580 --> 00:02:32,020 Is that for every component or have Rider-Waite style set up? 43 00:02:32,260 --> 00:02:35,590 And the only thing we will need to do is just import it. 44 00:02:35,980 --> 00:02:39,050 And again, it is my preference to call this wrapper. 45 00:02:39,370 --> 00:02:41,650 And therefore I went with wrappers. 46 00:02:42,070 --> 00:02:48,370 That's the folder name, because that signals to me that these are just going to be styled components. 47 00:02:49,330 --> 00:02:51,290 So these are not regular components. 48 00:02:51,310 --> 00:02:56,140 The React components, these are style components with all the styling and then the reason why we're 49 00:02:56,140 --> 00:03:03,250 doing that so we can move on from component to component and simply what you need to do is import wrapper 50 00:03:03,760 --> 00:03:10,690 from the associated file in the actual wrappers and then you have stores set up. 51 00:03:10,720 --> 00:03:15,550 So what I want to do right now is just change this around where instead of wrappers, I'm going to go 52 00:03:15,550 --> 00:03:17,110 with my landing page. 53 00:03:17,440 --> 00:03:23,770 Let's say I notice again, nothing changed because I have a wrapper and I'm just applying the styles. 54 00:03:24,310 --> 00:03:28,630 Now, if you want to be more explicit, you can add to all of them. 55 00:03:28,900 --> 00:03:33,100 Big sidebar wrapper or Big Side Bar style or whatever. 56 00:03:33,400 --> 00:03:34,390 Things of that nature. 57 00:03:35,110 --> 00:03:37,510 But in my case, I thought that was an overkill. 58 00:03:37,840 --> 00:03:40,540 Just keep in mind one very, very important thing. 59 00:03:40,990 --> 00:03:42,580 Something that I mentioned earlier here. 60 00:03:43,000 --> 00:03:46,630 The wrapper is only responsible for styling. 61 00:03:47,020 --> 00:03:55,300 So each and every time one will add the wrapper for that component, it doesn't apply any kind of logic 62 00:03:55,540 --> 00:03:57,040 in just as the style. 63 00:03:57,280 --> 00:04:02,620 And again, the reason why we're doing that is because I don't want to type out the CSC together for 64 00:04:02,890 --> 00:04:04,600 each and every component. 65 00:04:04,990 --> 00:04:06,010 Hopefully, this is clear. 66 00:04:06,340 --> 00:04:13,480 And then starting with the next component, we'll simply grabbed the wrapper from associating file in 67 00:04:13,480 --> 00:04:16,269 the wrappers and will right away apply to see us. 68 00:04:16,300 --> 00:04:19,149 Now, if you are interested in the system I was using. 69 00:04:19,339 --> 00:04:20,610 Yes, definitely. 70 00:04:20,620 --> 00:04:28,150 Just navigate to the file and you'll see the logic that I applied for that specific component.