1 00:00:00,390 --> 00:00:04,410 All alright, guys, and I was starting to react application and for that, but the first thing that 2 00:00:04,410 --> 00:00:06,420 we do is import the React module. 3 00:00:06,750 --> 00:00:11,070 So just head over to head of the file and import react from React. 4 00:00:11,460 --> 00:00:15,750 Now there are certain components that we need to import in our application so that we can use them. 5 00:00:16,560 --> 00:00:20,650 As you might recall, there were five components in total, but the number of companies that we are 6 00:00:20,650 --> 00:00:23,760 going with that we're going to call in at the GSA just four. 7 00:00:24,240 --> 00:00:29,490 So let's just see that what those components are so happy about potentially will be calling balance 8 00:00:29,520 --> 00:00:34,410 regarding expense sheet recording new transactions as well as be recalling transactions. 9 00:00:34,710 --> 00:00:39,990 So the first thing that will do is import these modules into our app component. 10 00:00:40,350 --> 00:00:41,610 So just import them. 11 00:00:43,750 --> 00:00:46,090 The first comment that was on board is the balance component. 12 00:00:48,530 --> 00:00:53,540 And directly from which are calling is the components that are created inside the components that we 13 00:00:53,540 --> 00:00:54,290 have our balance. 14 00:00:54,770 --> 00:00:57,860 And apart from balance, we even have to import. 15 00:01:00,630 --> 00:01:01,770 The expense sheet. 16 00:01:05,830 --> 00:01:11,080 And the Derek Tree from which we are calling is again the component trajectory, so we'll head back 17 00:01:11,080 --> 00:01:11,830 to their territory. 18 00:01:13,620 --> 00:01:18,210 OK, so that you see components and from components, we want the expense sheet. 19 00:01:19,140 --> 00:01:21,570 And apart from expense, she'd be even want. 20 00:01:22,320 --> 00:01:23,130 OK, so before. 21 00:01:23,130 --> 00:01:24,630 But the first statement it. 22 00:01:27,280 --> 00:01:33,490 And apart from expense, you'd be warned the new transactions as well as transactions. 23 00:01:34,750 --> 00:01:37,060 So let's import the new transaction. 24 00:01:43,120 --> 00:01:48,400 And the directive on which we're calling is the components directory and inside the components of the 25 00:01:48,400 --> 00:01:49,150 new transaction. 26 00:01:49,810 --> 00:01:54,730 And the next and the last component that will be calling is that transactions. 27 00:02:05,550 --> 00:02:08,310 And this is again from our component strategy. 28 00:02:28,470 --> 00:02:33,000 OK, so we have successfully imported all the four modules that we needed in that application. 29 00:02:33,390 --> 00:02:41,700 Now let me just put up semicolons, and after this, we'll just head to our app section and inside that 30 00:02:41,730 --> 00:02:42,090 section. 31 00:02:42,090 --> 00:02:44,040 Now what we're going to do is create a React app. 32 00:02:45,380 --> 00:02:52,250 Now, as you might recall, that we have also installed material into that application, so we will 33 00:02:52,250 --> 00:02:54,560 be needing certain functionalities of that suggest just. 34 00:02:55,520 --> 00:02:57,800 So and will be importing the typography. 35 00:03:09,200 --> 00:03:11,690 Typography, as well as books and mixed styles. 36 00:03:26,600 --> 00:03:29,100 From we want wanted from material you could. 37 00:03:39,110 --> 00:03:46,070 So now, once we're done with this now, head to your written statement and inside this written statement 38 00:03:46,070 --> 00:03:51,470 will be first inside the apparent left class will be creating a typography tag. 39 00:03:53,850 --> 00:03:55,920 Let's just created typography. 40 00:03:58,200 --> 00:04:00,630 And really, with that last name off, Dale's. 41 00:04:02,460 --> 00:04:07,380 So there are three Typekit starlings in React, either you can create a style in a spreadsheet or you 42 00:04:07,380 --> 00:04:12,120 can do the inline starling and react and to do the inline stating what you need to do is you need to 43 00:04:12,120 --> 00:04:18,900 add two sets of coordinates and then you can specify the seasons property in here. 44 00:04:18,930 --> 00:04:20,780 So we would just give it a margin bottom of. 45 00:04:30,060 --> 00:04:30,510 Twenty. 46 00:04:31,970 --> 00:04:37,130 And apart from styles, let's put up our name, which was nothing but expense tracker. 47 00:04:41,660 --> 00:04:42,320 After this. 48 00:04:46,590 --> 00:04:47,730 Will create a box. 49 00:04:53,130 --> 00:04:55,890 Now, let me ask close this, so it can you can get a better view. 50 00:04:57,060 --> 00:04:58,590 So we'll just create a box. 51 00:04:59,860 --> 00:05:04,840 Maybe creating a box and inside the box are going to have balance and inside the box, we are going 52 00:05:04,840 --> 00:05:07,990 to have this balance component, this expense sheet. 53 00:05:08,170 --> 00:05:10,570 The new transactions as well as the transactions. 54 00:05:10,930 --> 00:05:14,020 So let's just create them and. 55 00:05:14,970 --> 00:05:19,770 OK, the first component that we'll be having is the balance, as you might remember, night, the first 56 00:05:20,070 --> 00:05:23,610 component that was being shown was the balance and give it a self-loathing tag. 57 00:05:23,990 --> 00:05:28,980 Now the next component is going to be expense sheet and then against the freezing tag, then apart from 58 00:05:28,980 --> 00:05:31,800 it, very creative transactions and new transactions. 59 00:05:32,400 --> 00:05:32,940 So. 60 00:05:34,120 --> 00:05:35,020 Transactions. 61 00:05:35,800 --> 00:05:38,680 This is going to be the history of transactions that we just made into that application. 62 00:05:39,250 --> 00:05:45,310 And the next is the new transactions, the function of new transactions to add transactions to our transaction 63 00:05:45,310 --> 00:05:45,820 history, right? 64 00:05:46,810 --> 00:05:51,160 So then again, we'll close it now will be passing data and then we are props. 65 00:05:51,370 --> 00:05:56,740 But to that, let's just make up our state so that we can pass data from it. 66 00:05:57,040 --> 00:06:02,620 So now the boilerplate of rap is ready, but we still are in agreement to make this deal. 67 00:06:02,680 --> 00:06:04,480 So that's what we're doing next.