ReactJS Tutorial - 2 - Using JSX | Part 2 смотреть онлайн

In todays video we are going to learn about JSX.

Hello Friends welcome to Topic 2 on React JS.

React uses JSX for templating instead of regular JavaScript. It is not necessary to use it, however, following are some pros that comes with it.

1. It is faster becuase it performs optimization while compiling code to JavaScript
2. It is also type-safe and most of the errors can be caught during compilation
3. It makes it easier and faster to write templates, if you are familiar with HTML.

Using JSX,
JSX looks like a regular HTML is most cases, we already used it the environment setup Video.. Look at the code from App.js, where we are returning div

Even though its similar to HTML, there are couple of things we need to keep in mind when working with JSX.

NESTED ELEMENTS

If we want to return more elements, we need to wrap it with one container element. Notice how we are using div as a wrapper for h1, h2 and p elements

ATTRIBUTES
We can use our own custom attributes in addition to regular HTML properties and attributes. When we want to add custom attribute, we need to use data- prefix. In the next example we added data-myattribute as an attribute of p element..

Follow

JavaScript Expression

JavaScript expressions can be used inside of JSX, we just need to wrap it with curly brackets..
The following example will render 2..

WOW!!

We cannot use if else statements inside JSX, instead we can use conditional (ternary) expressions.. in The following example, variable i is equals to 1, so the browser will render true.. if we change to some other value it will render flase..

Naming Convention

HTML tags always use lowercase tag names, while React components start with Uppercase..

Since JSX is Javascript, identifiers such as class and for are discouraged as XML attribute name. Instead, Reacy DOM property such aw className and htmlFor respectively..

So friends,

that the basic info we have discussed about JSX, we will discuss more about React in upcoming videos, please like share and subscribe..

THANK YOU :)

react,react tutorial,react tutorial for beginners,react basics,react fundamentals,reactjs,reactjs tutorial,reactjs tutorial for beginners,react.js,react js,aibasoft,learning videos