‫At this point,
‫we have used JSX to describe the appearance
‫of some components
‫and we have also used some JavaScript inside of them.
‫And so now that we have a tiny bit
‫of experience in writing components, I want to take a minute
‫and go back to the fact that JSX combines
‫HTML, CSS and JavaScript into one single block of code.
‫Because you might be wondering,
‫why did React come up with this idea in the first place?
‫So why not just keep HTML, CSS and JavaScript
‫in separate places, like we have always done before?
‫And this might sound like a trivial question,
‫something you think is not really relevant at all
‫but it's actually deeply relevant to understand why
‫React was completely designed around components.
‫And let's understand this topic from the very beginning.
‫So from the rise of interactive single page applications.
‫So before single page apps, we always had one file for HTML,
‫one for JavaScript and one for CSS.
‫So basically, one technology per file.
‫That was our traditional separation of concerns.
‫And I'm pretty sure that just like me,
‫this is how you first learned web development.
‫However, as pages got more and more interactive,
‫they became single page applications,
‫where the JavaScript started to determine the user interface
‫and the content in general.
‫Or in other words,
‫JavaScript became more and more in charge of the HTML.
‫And we can see that here in this really small code example,
‫where the content and the presentation of these
‫HTML elements are really completely determined
‫by the JavaScript code.
‫They are in fact tightly coupled together.
‫So the HTML doesn't even make sense
‫without the JavaScript here.
‫Now the details of this code are really not important.
‫So if you can't read this code, that's no problem at all.
‫My point here is, that if the JavaScript is in charge
‫of the HTML anyway, so if the logic and the UI are so
‫tightly coupled together, then why should we keep them
‫separated in these different files
‫and in different code blocks?
‫Well, the answer to that question
‫is what gave us React components and JSX.
‫So the fact that logic and UI are so coupled
‫in modern web applications, is really the reason why
‫a React component contains the data, the logic
‫and the appearance of one piece of the UI.
‫In fact, it's the fundamental reason
‫why React is all about components.
‫And the same is actually also true for
‫most other modern front-end frameworks.
‫Now returning to some code,
‫in this React example we can see how JavaScript
‫and HTML markup live very happily together
‫in this one single component.
‫So this component has some JavaScript logic,
‫it has JSX and then inside that JSX,
‫there is yet another block of JavaScript,
‫which in turns has even more JSX inside of it.
‫So everything is mixed together
‫but it all still works really well.
‫So content and logic are tightly coupled together
‫and so it makes sense that they are co-located here.
‫And co-located simply means that things that change together
‫should be located as close as possible together.
‫And in the case of React apps, that means that instead
‫of one technology profile, we have one component profile.
‫So one component that contains data logic and appearance,
‫all mixed together.
‫Now when React and JSX first came out a long time ago,
‫many, many people just hated the way that JSX looks like.
‫And they hated that we are throwing separations
‫of concerns out of the window.
‫But actually, are we really?
‫Is there really no separation of concerns in React?
‫Well, I think that the people who say
‫that React has no separation of concerns, got it all wrong.
‫Because React does actually have separation of concerns.
‫It's just not one concern per file,
‫as we had traditionally but one concern per component.
‫So each component is in fact,
‫only concerned with one piece of the UI.
‫Then within each of these components,
‫of course we still have the three concerns of HTML,
‫CSS and JavaScript all mixed up, as we have been discussing.
‫So compared to the traditional separation of concerns,
‫this is a completely new paradigm
‫that many people were really not used to in the beginning.
‫But now, many years later,
‫we all got used to this and it works just great.
‫So having all the information about a certain component
‫in one single place,
‫really does work in an amazing way.
‫Now right.
‫So this was a long lecture,
‫longer than I had expected,
‫just to arrive at this conclusion
‫that React does actually have separation of concerns.
‫Just a different separation of concerns.
‫But I still hope that you liked how we arrived
‫at that conclusion, over the course of this video.
‫Because hopefully, this gave you a lot
‫of additional fundamental React knowledge.