JSX is a funny tag syntax. It is neither a string nor HTML. In this article, i am starting from the very basics and walk through everything you need to know about JSX. If you’ve ever wanted to learn React in Hindi, You can visit our Youtube Channel React Playlists. Here in this article, i will show you 10 points to give you depth knowledge about JSX.
Introduction of JSX
- JSX stands for javascript XML.
- It is a syntax extension to Javascript.
- JSX is a preprocessor step that adds XML syntax to Javascript.
- JSX produces React “element”. It is possible to create elements without JSX but JSX makes React a lot more elegant.
- It is recommended to use JSX with React to describe what the UI should look like.
- It also allows React to show more useful error and warning messages.
7. JSX is easier to read and write. Babel transforms these expressions into an actual Javascript Code.
For Example:-
Consider the following JSX Element:
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Example JSX Element 1:- const element =<h1> Hello Tutorialswebsite</h1> Example JSX Element with attribute:- const element = <h1 className="title"> Hello Tutorialswebsite</h1> Example JSX Element declare a variable called name:- const element =<h1> Hello {name}</h1> Example JSX Element as component :- const element =<Education /> Example JSX Element as component with props:- const element =<Education name="Tutorialswebsite" /> |
The JavaScript delivered to the browser will look like this:
|
2 3 4 5 6 7 8 9 10 11 12 |
React.createElement("h1", null, "Hello Tutorialswebsite"); React.createElement("h1",{className:"title"}, "Hello Tutorialswebsite"); React.createElement("h1", null, "Hello",name); React.CreateElement(Education, null); React.createElement(Eduction, {name:"Tutorialswebsite"}); |
In the above example, you can see the JSX code looks like HTML but it is not an HTML. Lets clear above example with syntax declaration:
JSX Syntax:
|
2 3 4 5 6 7 8 9 10 11 |
<elementType props="Value"> Children Text </elementType> or <componentName props="value" /> or <elementType> Children Text { Dynamic Variable }</elementType> |
Javascript Syntax:
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
//if props and dynamic value both are declare: React.createElement("elementType",{props:"value"}, "Children Text", Dynamic Variable); // if props declare but not dynamic value: React.createElement("elementType",{props:"value"}, "Children Text"); // if neither props nor dynamic value declare: React.createElement("elementType",null, "Children Text"); Note:- here "null" will take place in place of props but dynamic value will not // if element is as component with props: React.createElement("componentName",{props:"value"}); // if element is as component but not props declare: React.createElement("componentName",null); Note:- here also "null" will take props place. |
8. JavaScript Expression in JSX
we can put any valid JavaScript expression inside the curly braces in JSX. You can pass any JavaScript expression as children, by enclosing it with {}. In React we are allowed to use normal JavaScript expressions with JSX.
Syntax:- {expression}
Example:-
|
2 3 4 5 6 |
const el =<h1>{2+5}</h1> // Output: 7 |
|
2 3 4 5 6 |
const el=<h1> Value: {2+5}</h1> // Output:- Value:7 |
|
2 3 4 5 6 7 |
const name ="Tutorialswebsite" const el =<h1> Hello {name}</h1> // Output: Hello Tutorialswebsite |
|
2 3 4 5 6 7 8 9 |
function display(){ return "Tutorialswebsite"; } const el =<h1> Hello {display()}</h1> // Output:- Hello Tutorialswebsite |
|
2 3 4 5 6 7 8 9 |
let student={ firstname: "Tutorialswebsite" } const el =<h1> Hello {student.firstname}</h1> // Output:- Hello Tutorialswebsite |
9. Specifying Attributes with JSX
you may use quotes to specify string literals as attributes.
Syntax:
|
2 3 4 |
const el =<h1 attribute="value"> </h1> |
Example:
|
2 3 4 5 |
const el =<h1 className="title">Tutorialswebsite</h1> const el =<label htmlFor="website">Website Name</label> |
You may also use curly braces to embed a JavaScript expression in an attribute.
|
2 3 4 5 6 |
const el = <h1 className={color}>Hello Tutorialswebsite</h1> ReactDOM.render(<App name="tutorialswebsite" />, document.getElementById("root")); |
Note:-
- Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.
- Don’t put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (For String value) or braces (For expression) but not both in the same attribute.
10. Object Representation of JSX
Babel compiles JSX down to React.createElement() calls.
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
const el =<h1 className="title"> Hello World</h1> const el =React.createElement("h1",{ className:"title" }, "Hello World"); const el =<h1 className="title" bg="red"> Hello World</h1> const el =React.createElement("h1",{ className:"title", bg:"red" }, "Hello World"); // Note: this structure is simplified const el ={ type:'h1', props:{ className:'title', children:'Hello' } }; } } |
Now that you understand JSX, you can start writing our first React components.
Reference:
- https://reactjs.org/docs/introducing-jsx.html
- https://en.wikipedia.org/wiki/React_(JavaScript_library)#JSX
Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co
