Hi and welcome back.
In this video we're going to talk about JSX in react native.
You can notice that actually just switched from my Visual Studio code editor
to Webstorm, and this is what I'm going to be using moving forward.
And now let's get to the topic and talk about what is JSX.
JSX stands for JavaScript XML and it's a syntax extension for JavaScript
that allows you to write HTML like code in your JavaScript files.
So if we go to app JS, this will be full of the examples of where we use JSX.
For example, all of this is using JSX.
But I would like to make a more concrete example for you and we're
going to start coding and see how JSX actually looks like.
So let's get rid of some of the items that we don't need from here.
Great, we don't need this component, let's get rid of it.
And this is not going to be TypeScript
anymore, so we're not going to be needing this.
Let's just make this a constant and use ES6 function to define this constant.
We don't need these styles.
Yes, we can export the app.
We won't need this constants here either.
And let's just return null so far.
Okay, so let's save this.
This was automatically formatted for me, as you see and great.
Now let's dive into JSX.
With JSX, you can write your UI code
directly in your JavaScript files, which makes it easier to understand how
your UI is structured and how it interacts with your application logic.
Plus, since JSX is just JavaScript, you can use all the features of JavaScript
to manipulate your UI like variables, loop and conditionals.
Now let's take a look at how JSX works in react native.
When you write JSX code, it gets transformed into calls to react
create element by a tool called the JSX transformer.
This happens during the build process, so your mobile app only ever sees
the plain JavaScript code generated by the transformer.
For example, let's say you have a react native hello world project.
And let's say that you have imported
a text component from react native and all
you do here is just display hello world.
This is using JSX syntax.
Now if you wanted to create the same thing
without the use of JSX, your code would look something like this
react create element and then you would say what kind of element you want
to create and then you would pass the text hello world.
So this is way harder to read,
especially if you're going to have nested components.
Imagine there's a container such as div
called Views that we're going to go over in upcoming lessons.
But if you wanted to wrap this inside
the view, then you would have to return something even more complicated like this.
You would say that you want it wrapped in view.
And imagine how large this could get when something like this could be written as
simply as this using JSX and it's easy to read.
It does resemble HTML as well,
so it is just easier to understand and manipulate your UI code like this.
The JSX transformer would transform this
code into plain JavaScript that we just saw and your compiler or mobile app
actually would see the transpiled code and display it as needed.
So this is what JSX is.
Thanks so much for watching.
See you in the next video.