1 00:00:01,140 --> 00:00:02,100 ‫At this point, 2 00:00:02,100 --> 00:00:05,340 ‫we have used JSX to describe the appearance 3 00:00:05,340 --> 00:00:06,870 ‫of some components 4 00:00:06,870 --> 00:00:10,560 ‫and we have also used some JavaScript inside of them. 5 00:00:10,560 --> 00:00:12,780 ‫And so now that we have a tiny bit 6 00:00:12,780 --> 00:00:16,680 ‫of experience in writing components, I want to take a minute 7 00:00:16,680 --> 00:00:20,400 ‫and go back to the fact that JSX combines 8 00:00:20,400 --> 00:00:25,400 ‫HTML, CSS and JavaScript into one single block of code. 9 00:00:26,160 --> 00:00:28,320 ‫Because you might be wondering, 10 00:00:28,320 --> 00:00:32,520 ‫why did React come up with this idea in the first place? 11 00:00:32,520 --> 00:00:36,840 ‫So why not just keep HTML, CSS and JavaScript 12 00:00:36,840 --> 00:00:40,920 ‫in separate places, like we have always done before? 13 00:00:40,920 --> 00:00:43,860 ‫And this might sound like a trivial question, 14 00:00:43,860 --> 00:00:47,580 ‫something you think is not really relevant at all 15 00:00:47,580 --> 00:00:51,180 ‫but it's actually deeply relevant to understand why 16 00:00:51,180 --> 00:00:54,453 ‫React was completely designed around components. 17 00:00:55,920 --> 00:00:59,160 ‫And let's understand this topic from the very beginning. 18 00:00:59,160 --> 00:01:03,570 ‫So from the rise of interactive single page applications. 19 00:01:03,570 --> 00:01:08,570 ‫So before single page apps, we always had one file for HTML, 20 00:01:08,670 --> 00:01:12,420 ‫one for JavaScript and one for CSS. 21 00:01:12,420 --> 00:01:15,810 ‫So basically, one technology per file. 22 00:01:15,810 --> 00:01:19,350 ‫That was our traditional separation of concerns. 23 00:01:19,350 --> 00:01:22,170 ‫And I'm pretty sure that just like me, 24 00:01:22,170 --> 00:01:25,170 ‫this is how you first learned web development. 25 00:01:25,170 --> 00:01:28,680 ‫However, as pages got more and more interactive, 26 00:01:28,680 --> 00:01:31,050 ‫they became single page applications, 27 00:01:31,050 --> 00:01:35,250 ‫where the JavaScript started to determine the user interface 28 00:01:35,250 --> 00:01:37,470 ‫and the content in general. 29 00:01:37,470 --> 00:01:38,910 ‫Or in other words, 30 00:01:38,910 --> 00:01:43,500 ‫JavaScript became more and more in charge of the HTML. 31 00:01:43,500 --> 00:01:47,130 ‫And we can see that here in this really small code example, 32 00:01:47,130 --> 00:01:50,220 ‫where the content and the presentation of these 33 00:01:50,220 --> 00:01:54,120 ‫HTML elements are really completely determined 34 00:01:54,120 --> 00:01:56,130 ‫by the JavaScript code. 35 00:01:56,130 --> 00:01:59,670 ‫They are in fact tightly coupled together. 36 00:01:59,670 --> 00:02:02,010 ‫So the HTML doesn't even make sense 37 00:02:02,010 --> 00:02:04,590 ‫without the JavaScript here. 38 00:02:04,590 --> 00:02:08,250 ‫Now the details of this code are really not important. 39 00:02:08,250 --> 00:02:12,150 ‫So if you can't read this code, that's no problem at all. 40 00:02:12,150 --> 00:02:15,870 ‫My point here is, that if the JavaScript is in charge 41 00:02:15,870 --> 00:02:20,870 ‫of the HTML anyway, so if the logic and the UI are so 42 00:02:21,240 --> 00:02:24,660 ‫tightly coupled together, then why should we keep them 43 00:02:24,660 --> 00:02:27,180 ‫separated in these different files 44 00:02:27,180 --> 00:02:28,863 ‫and in different code blocks? 45 00:02:29,820 --> 00:02:31,680 ‫Well, the answer to that question 46 00:02:31,680 --> 00:02:35,463 ‫is what gave us React components and JSX. 47 00:02:36,870 --> 00:02:40,290 ‫So the fact that logic and UI are so coupled 48 00:02:40,290 --> 00:02:43,800 ‫in modern web applications, is really the reason why 49 00:02:43,800 --> 00:02:47,370 ‫a React component contains the data, the logic 50 00:02:47,370 --> 00:02:50,283 ‫and the appearance of one piece of the UI. 51 00:02:51,240 --> 00:02:53,520 ‫In fact, it's the fundamental reason 52 00:02:53,520 --> 00:02:56,160 ‫why React is all about components. 53 00:02:56,160 --> 00:02:58,800 ‫And the same is actually also true for 54 00:02:58,800 --> 00:03:01,563 ‫most other modern front-end frameworks. 55 00:03:02,520 --> 00:03:04,380 ‫Now returning to some code, 56 00:03:04,380 --> 00:03:07,650 ‫in this React example we can see how JavaScript 57 00:03:07,650 --> 00:03:11,168 ‫and HTML markup live very happily together 58 00:03:11,168 --> 00:03:14,040 ‫in this one single component. 59 00:03:14,040 --> 00:03:16,890 ‫So this component has some JavaScript logic, 60 00:03:16,890 --> 00:03:20,760 ‫it has JSX and then inside that JSX, 61 00:03:20,760 --> 00:03:23,280 ‫there is yet another block of JavaScript, 62 00:03:23,280 --> 00:03:27,690 ‫which in turns has even more JSX inside of it. 63 00:03:27,690 --> 00:03:29,910 ‫So everything is mixed together 64 00:03:29,910 --> 00:03:32,550 ‫but it all still works really well. 65 00:03:32,550 --> 00:03:35,730 ‫So content and logic are tightly coupled together 66 00:03:35,730 --> 00:03:39,240 ‫and so it makes sense that they are co-located here. 67 00:03:39,240 --> 00:03:43,680 ‫And co-located simply means that things that change together 68 00:03:43,680 --> 00:03:47,460 ‫should be located as close as possible together. 69 00:03:47,460 --> 00:03:50,910 ‫And in the case of React apps, that means that instead 70 00:03:50,910 --> 00:03:55,830 ‫of one technology profile, we have one component profile. 71 00:03:55,830 --> 00:03:59,940 ‫So one component that contains data logic and appearance, 72 00:03:59,940 --> 00:04:02,130 ‫all mixed together. 73 00:04:02,130 --> 00:04:06,690 ‫Now when React and JSX first came out a long time ago, 74 00:04:06,690 --> 00:04:11,640 ‫many, many people just hated the way that JSX looks like. 75 00:04:11,640 --> 00:04:14,790 ‫And they hated that we are throwing separations 76 00:04:14,790 --> 00:04:17,820 ‫of concerns out of the window. 77 00:04:17,820 --> 00:04:20,400 ‫But actually, are we really? 78 00:04:20,400 --> 00:04:23,883 ‫Is there really no separation of concerns in React? 79 00:04:24,840 --> 00:04:27,390 ‫Well, I think that the people who say 80 00:04:27,390 --> 00:04:32,370 ‫that React has no separation of concerns, got it all wrong. 81 00:04:32,370 --> 00:04:36,990 ‫Because React does actually have separation of concerns. 82 00:04:36,990 --> 00:04:39,750 ‫It's just not one concern per file, 83 00:04:39,750 --> 00:04:44,730 ‫as we had traditionally but one concern per component. 84 00:04:44,730 --> 00:04:47,220 ‫So each component is in fact, 85 00:04:47,220 --> 00:04:50,403 ‫only concerned with one piece of the UI. 86 00:04:51,240 --> 00:04:54,000 ‫Then within each of these components, 87 00:04:54,000 --> 00:04:57,450 ‫of course we still have the three concerns of HTML, 88 00:04:57,450 --> 00:05:01,623 ‫CSS and JavaScript all mixed up, as we have been discussing. 89 00:05:02,460 --> 00:05:05,940 ‫So compared to the traditional separation of concerns, 90 00:05:05,940 --> 00:05:08,640 ‫this is a completely new paradigm 91 00:05:08,640 --> 00:05:12,840 ‫that many people were really not used to in the beginning. 92 00:05:12,840 --> 00:05:14,790 ‫But now, many years later, 93 00:05:14,790 --> 00:05:18,720 ‫we all got used to this and it works just great. 94 00:05:18,720 --> 00:05:21,990 ‫So having all the information about a certain component 95 00:05:21,990 --> 00:05:23,520 ‫in one single place, 96 00:05:23,520 --> 00:05:25,983 ‫really does work in an amazing way. 97 00:05:27,000 --> 00:05:27,960 ‫Now right. 98 00:05:27,960 --> 00:05:30,720 ‫So this was a long lecture, 99 00:05:30,720 --> 00:05:32,550 ‫longer than I had expected, 100 00:05:32,550 --> 00:05:35,190 ‫just to arrive at this conclusion 101 00:05:35,190 --> 00:05:38,850 ‫that React does actually have separation of concerns. 102 00:05:38,850 --> 00:05:42,090 ‫Just a different separation of concerns. 103 00:05:42,090 --> 00:05:45,300 ‫But I still hope that you liked how we arrived 104 00:05:45,300 --> 00:05:48,360 ‫at that conclusion, over the course of this video. 105 00:05:48,360 --> 00:05:51,000 ‫Because hopefully, this gave you a lot 106 00:05:51,000 --> 00:05:54,033 ‫of additional fundamental React knowledge.