Understanding React with JSX

Understanding React with JSX post have some key point related to usage of JSX inside the react code.How to implement JSX inside the React.In react mostly you can find the syntax which you cant find in normal javascript.This syntax is neither string nor HTML

Understanding React with JSX

Understanding React with JSX

We are going to see some key points with respect to JSX

  1. Why we are using JSX?
  2. Expression within JSX
  3. Attributes in JSX
  4. Children with JSX
  5. How JSX prevent XSS attackes
  6. JSX as a Object

1.Why we are using JSX?

  • As we know in react when we create the component it contains both application logic,states,events , JSX code etc.
  • React component contains both application logic and JSX code
  • Why react is useful for the developer as people can write javascript code with UI code

2.Expression inside JSX

  • In below example we are assigning name inside the JSX (<h1></h1>) within {name}
  • When print below expressin it will print Hello, Techotut as name is in expression which contains Techotut as string.

3. JSX inside Expression:

  • In below Example we are using if statement which contains <h1> tag if condition is true then it will return with expression

4.Setting up attribute with Expression:

  • tab is attribute we are setting the dynamic attribute value with expressin {tab}

5.Protect from XSS attackes:

  • Check below expression where we are getting the input element which has malicious value
  • Before rendering any values embedded within JSX are “escaped” by default

Leave a Reply

Your email address will not be published. Required fields are marked *