UNDERSTANDING JSX?

What is JSX?

JSX(JavaScript XML) is a form of markup that allows us to write HTML in React by converting HTML tags into React elements.

For Ex:- In HTML, we can write code in the following manner

<h1>Hello World!</h1>
But in JSX, we write the same code as given below:-
var greeting = <h1>Hello React!</h1>.

Writing HTML code in React is almost the same with some changes in it, We use (class) in HTML but in React we use (className), Now most of you might be thinking that why don't we use class it's because (class) is already a reserved keyword in JavaScript.

A simple example 0f JSX is given below:-

Attributes in JSX.

JSX supports HTML like attributes. All HTML tags and their attributes are supported. Attributes have to be specified using camelCase convention instead of the normal HTML attribute name. For example, a class attribute in HTML has to be defined as className. The following are a few other examples −

1. htmlFor instead of for

2. tabIndex instead of tabindex

3. onClick instead of onclick

4. Link instead of <a> tag.

PROPS IN REACT.

Understanding Props:-

Props stand for “Properties.” It is an object which stores the value of attributes of a tag and works similarly to the HTML attributes.Props are passed to the component in the same way as arguments passed in a function.

In the above example, we used props inside the function Navbar in order to give it a flexible title that can be changed in the future or on any other page. Without using props, you cannot change the title of a fixed Navbar component.

PropTypes:-

PropTypes are simply a mechanism that ensures that the passed value is of the correct datatype. For ex:- If you define a elements type to “String” propTypes will ensure that only a string is passed not any other Data Type.

The Above Code specifies that only String is allowed inside the title and aboutText component. There are a number of PropTypes such as (Boolean, Number, String, Null, BigInt, Symbol,)

Default Props:-

Default props can be used to define any props that you want to be set for a component, whether a value is actually passed in from the parent component.

As we can see by using default props we can set a predefined value to a component, This value will be reflected in the case there is no value passed by the user manually.

<————————————————————————————–>

itli