1 00:00:01,020 --> 00:00:03,600 ‫We have written some pieces of JSX 2 00:00:03,600 --> 00:00:07,860 ‫in this course already but what actually is JSX 3 00:00:07,860 --> 00:00:10,683 ‫and why is it such a big deal in React? 4 00:00:12,150 --> 00:00:14,940 ‫Well, when we first talked about components, 5 00:00:14,940 --> 00:00:18,750 ‫we talked about how a component contains its own data, 6 00:00:18,750 --> 00:00:21,030 ‫logic, and appearance. 7 00:00:21,030 --> 00:00:23,220 ‫And that makes sense, right? 8 00:00:23,220 --> 00:00:27,300 ‫Because if a component is a piece of the user interface, 9 00:00:27,300 --> 00:00:30,720 ‫it means that we must be able to describe exactly 10 00:00:30,720 --> 00:00:32,940 ‫what that component looks like. 11 00:00:32,940 --> 00:00:36,690 ‫And so that's where JSX comes into play. 12 00:00:36,690 --> 00:00:40,521 ‫So, JSX is a declarative syntax that we use 13 00:00:40,521 --> 00:00:43,410 ‫to describe what components look like 14 00:00:43,410 --> 00:00:47,640 ‫and how they work based on their data and logic. 15 00:00:47,640 --> 00:00:50,880 ‫So, it's all about the components appearance. 16 00:00:50,880 --> 00:00:53,490 ‫In practice, this means that each component 17 00:00:53,490 --> 00:00:56,520 ‫must return one block of JSX, 18 00:00:56,520 --> 00:01:01,230 ‫which React will then use to render the component on the UI. 19 00:01:01,230 --> 00:01:02,970 ‫Now, looking at this code, 20 00:01:02,970 --> 00:01:07,470 ‫this JSX looks a lot like HTML, right? 21 00:01:07,470 --> 00:01:12,180 ‫But in fact, JSX is an extension of JavaScript, 22 00:01:12,180 --> 00:01:16,590 ‫which allows us to combine parts of HTML, CSS, 23 00:01:16,590 --> 00:01:21,000 ‫and JavaScript all into one block of code. 24 00:01:21,000 --> 00:01:24,969 ‫So basically, we can write HTML and embed some pieces 25 00:01:24,969 --> 00:01:28,260 ‫of JavaScript where necessary, for example, 26 00:01:28,260 --> 00:01:31,260 ‫to reference some JavaScript variables 27 00:01:31,260 --> 00:01:34,680 ‫and we can even reference other React components 28 00:01:34,680 --> 00:01:37,170 ‫so that we can then combine Nest 29 00:01:37,170 --> 00:01:39,840 ‫and reuse multiple components. 30 00:01:39,840 --> 00:01:41,700 ‫But now, you might be thinking 31 00:01:41,700 --> 00:01:44,700 ‫if React is a JavaScript framework 32 00:01:44,700 --> 00:01:49,061 ‫then how will it understand this HTML looking code? 33 00:01:49,061 --> 00:01:54,061 ‫Well, remember that JSX is just an extension of JavaScript, 34 00:01:54,780 --> 00:01:56,796 ‫which means that there is a simple way 35 00:01:56,796 --> 00:02:01,080 ‫of converting JSX to JavaScript. 36 00:02:01,080 --> 00:02:03,570 ‫This is done by a tool called Babel, 37 00:02:03,570 --> 00:02:05,640 ‫which was automatically included 38 00:02:05,640 --> 00:02:09,390 ‫in our application by Create-React-App. 39 00:02:09,390 --> 00:02:11,824 ‫And the result of this conversion looks something 40 00:02:11,824 --> 00:02:14,160 ‫like this code on the right 41 00:02:14,160 --> 00:02:16,714 ‫where each JSX element was converted 42 00:02:16,714 --> 00:02:21,450 ‫to a React.createElement function call. 43 00:02:21,450 --> 00:02:24,000 ‫And does this look familiar? 44 00:02:24,000 --> 00:02:25,830 ‫Well, I hope it does 45 00:02:25,830 --> 00:02:28,068 ‫because this is exactly what we returned 46 00:02:28,068 --> 00:02:32,130 ‫from the app component in the pure React lecture. 47 00:02:32,130 --> 00:02:35,310 ‫So in that lecture where we couldn't use JSX 48 00:02:35,310 --> 00:02:38,235 ‫because we didn't have that Babel tool. 49 00:02:38,235 --> 00:02:41,376 ‫But anyway, this conversion is necessary 50 00:02:41,376 --> 00:02:46,020 ‫because browsers of course, do not understand JSX. 51 00:02:46,020 --> 00:02:48,690 ‫They only understand HTML. 52 00:02:48,690 --> 00:02:53,137 ‫So behind the scenes, all the JSX that we write is converted 53 00:02:53,137 --> 00:02:58,050 ‫into many nested React.createElement function calls. 54 00:02:58,050 --> 00:03:01,170 ‫And these function calls are what in the end, 55 00:03:01,170 --> 00:03:05,520 ‫create the HTML elements that we see on the screen. 56 00:03:05,520 --> 00:03:09,450 ‫Now, what this means is that we could actually use React 57 00:03:09,450 --> 00:03:12,210 ‫without JSX at all. 58 00:03:12,210 --> 00:03:14,280 ‫So, we could just manually write 59 00:03:14,280 --> 00:03:18,420 ‫these createElement functions instead of JSX 60 00:03:18,420 --> 00:03:22,140 ‫but that doesn't look like a lot of fun, right? 61 00:03:22,140 --> 00:03:24,257 ‫It also makes the code really hard to read 62 00:03:24,257 --> 00:03:26,130 ‫and to understand. 63 00:03:26,130 --> 00:03:30,780 ‫And so, actually, everyone just uses JSX. 64 00:03:30,780 --> 00:03:35,490 ‫Alright, so now that we know what JSX is all about, 65 00:03:35,490 --> 00:03:38,670 ‫let's go back to that first paragraph where I say 66 00:03:38,670 --> 00:03:42,390 ‫that JSX is a declarative syntax. 67 00:03:42,390 --> 00:03:46,803 ‫So, what does it actually mean that JSX is declarative? 68 00:03:47,910 --> 00:03:51,720 ‫Well, before we can understand what declarative means, 69 00:03:51,720 --> 00:03:55,530 ‫we first have to review what imperative means. 70 00:03:55,530 --> 00:03:59,910 ‫So when we try to build UIs using vanilla JavaScript, 71 00:03:59,910 --> 00:04:03,960 ‫we will by default use an imperative approach. 72 00:04:03,960 --> 00:04:07,020 ‫This means that we manually select elements, 73 00:04:07,020 --> 00:04:11,580 ‫traverse the DOM, and attach event handlers to elements. 74 00:04:11,580 --> 00:04:14,192 ‫Then each time something happens in the app 75 00:04:14,192 --> 00:04:16,290 ‫like a click on the button, 76 00:04:16,290 --> 00:04:19,260 ‫we give the browser a step-by-step instructions 77 00:04:19,260 --> 00:04:22,290 ‫on how to mutate those thumb elements 78 00:04:22,290 --> 00:04:26,370 ‫until we reach the desired updated UI. 79 00:04:26,370 --> 00:04:28,153 ‫So in the imperative approach, 80 00:04:28,153 --> 00:04:33,030 ‫we basically tell the browser exactly how to do things. 81 00:04:33,030 --> 00:04:35,580 ‫However, doing this in a complex app 82 00:04:35,580 --> 00:04:37,680 ‫is completely unfeasible 83 00:04:37,680 --> 00:04:41,130 ‫for all the reasons that we have learned about before. 84 00:04:41,130 --> 00:04:44,100 ‫And remember that that's the reason why frameworks 85 00:04:44,100 --> 00:04:46,950 ‫like React exist in the first place 86 00:04:46,950 --> 00:04:51,150 ‫and it's why React chose to use a declarative approach 87 00:04:51,150 --> 00:04:53,253 ‫to building user interfaces. 88 00:04:54,150 --> 00:04:57,503 ‫So, a declarative approach is to simply describe 89 00:04:57,503 --> 00:05:00,750 ‫what the UI should look like at all times, 90 00:05:00,750 --> 00:05:04,800 ‫always based on the current data that's in the component. 91 00:05:04,800 --> 00:05:09,780 ‫And we will soon learn that this data is props and state. 92 00:05:09,780 --> 00:05:14,780 ‫And so again, basically, we use JSX to describe the UI 93 00:05:15,420 --> 00:05:18,120 ‫based on props and state. 94 00:05:18,120 --> 00:05:20,428 ‫So the data that's currently in the component 95 00:05:20,428 --> 00:05:25,267 ‫and all that happens without any DOM manipulation at all. 96 00:05:25,267 --> 00:05:27,725 ‫So, there are no Query selectors, 97 00:05:27,725 --> 00:05:30,747 ‫no ad event listeners, no class list, 98 00:05:30,747 --> 00:05:35,144 ‫no text content properties anywhere to be seen here 99 00:05:35,144 --> 00:05:40,144 ‫because in fact, React is basically a huge abstraction away 100 00:05:40,980 --> 00:05:43,500 ‫from the DOM, so that we, developers 101 00:05:43,500 --> 00:05:46,650 ‫never have to touch the DOM directly. 102 00:05:46,650 --> 00:05:50,400 ‫Instead, we think of the UI as a reflection 103 00:05:50,400 --> 00:05:54,420 ‫of the current data and let React automatically synchronize 104 00:05:54,420 --> 00:05:57,496 ‫the UI with that data. 105 00:05:57,496 --> 00:06:00,846 ‫So in essence, the difference between imperative 106 00:06:00,846 --> 00:06:04,920 ‫and declarative is that in the declarative approach, 107 00:06:04,920 --> 00:06:09,660 ‫we use JSX to tell React what we want to see on the screen 108 00:06:09,660 --> 00:06:12,840 ‫but not how to achieve it step-by-step. 109 00:06:12,840 --> 00:06:16,830 ‫React can figure that out on its own, basically. 110 00:06:16,830 --> 00:06:19,650 ‫And this has many, many advantages 111 00:06:19,650 --> 00:06:21,903 ‫as we will see throughout the course.