React JS – introduction to JSX and Internal Working

React JS – introduction to JSX and Internal Working:-

What is JSX:

React JS – introduction to JSX and Internal Working, We will learn about JSX.JSX is One of basic aspect in react.It acts a  kind of templating in react, but it is more than that. JSX is a syntactical extension to javascript, it helps to build your UI components. JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant.We must remember always React is a Library not a framework.

This code above is a combination of javascript and HTML. In case of normal coding perspective, it’s unusual. You can’t have javascript and Html together in a single place, but react doesn’t separate the technologies by putting markup and logic in two different places. Instead of that, it separates the concerns, and the concern here is How easy and How good is our UI?





Fundamentally the above JSX code gets compiled as:-

Please Visit this link here to try and convert JSX to Browser compatible javascript.Babel converts the JSX to React.CreateElement code .Babel Converts Jsx Code in to a Javascript code that the browser understands.Look at the example below.

React JS Jsx internal Working



Few Points about JSX for Interview in Short:-

  1. JSX is different from react, its an EmacScript feature provided to you to write your view.
  2. There can be only one parent and multiple child elements/components inside JSX.
  3. You must have an opening and closing elements in the parent component/element of JSX.
  4. We Can embed any javascript expression in JSX  Any javascript expression and operator operations are valid in JSX.

Inline Styles in JSX:- With inline styles, you have to option to combine CSS syntax with JSX code.

Conclusion:-

We must always keep in mind “JSX doesn’t Separates Technologies it separates Concerns” .It helps us to write reusable code . Look at next Article on How to Setup React JS using JSX and Babel.

 

“Its Always Better To Learn and Share Instead Learn and Forget” 







4 thoughts on “React JS – introduction to JSX and Internal Working

  1. I have checked your website and i’ve found some duplicate content,
    that’s why you don’t rank high in google, but there
    is a tool that can help you to create 100% unique articles, search for: SSundee advices unlimited content for
    your blog

Leave a Reply

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