Tutorials

ReactJS Tutorial - Basics


ReactJS - JSX


JSX is acronym for JavaScript eXtension. It looks like a template but it provides the power of javascript. You can decide if you want to use JSX in your react elements or not. But if you use it then it becomes very easy to write elements because it looks like HTML.

Why JSX ?

In React, Elements are created by React.createElement method which have following signature

React.createElement(element,props,children..)

element : is the element you are creating.

props    : We will discuss props later but for now props is the properties of element and

children: children is children of the element which means that if you have some childrens then if have to again write React.createElement .

 Let’s rewrite our hello world component using React.createElement

Please note that we are using JS REPL at https://jscomplete.com/repl for testing and running our components. To get more detail you can have a look on ReactJS - overview 

var Helloworld=(props)=>{
return(
React.createElement('div',null,'Hello world!')
);
}

ReactDOM.render(<Helloworld/>,mountNode);

Paste this code in JS REPL https://jscomplete.com/repl on left and click run icon and you will get same output Hello world!

The call to React.createElement produces below HTML

<div>
Hello world!
</div>

Suppose we have html like below

<div>
<div class=”left”>
Hello world!
<div>
</div>

Here is how it will be written using React.createElement

var Helloworld=(props)=>{
return(
React.createElement('div',null,React.createElement('div',{class:'left'},'Hello world!'))
);
}

So instead of writing nested calls to React.createElement you will love to use JSX instead. If you want to write javascript in jsx then you can include it in curly braces.

Writing JSX

Now we know that JSX makes life easy while writing React Components. But JSX is finally compiled to the calls of React.createElement

You have to encapsulate all your jsx in react render mehod in one container element for example

var Helloworld=(props)=>{
return(
<div>
…
</div>
<div>
…invalid element both should reside under one container
</div>  .

);
}

ReactDOM.render(<Helloworld/>,mountNode);

To run it successfully either remove the last div or wrap everything inside one container.

Two adjacent JSX element must be wrapped in a parent container

 

Embeding Expressions in JSX

Curly braces {} is used for embedding expressions in JSX. In JSX you can javascript call function and do whatever you want in javascript.

var Helloworld =(props)=>
{
return(
<div>
{2+2}
</div>
);
}
ReactDOM.render(<Helloworld/>,mountNode)

In the avobe example we have written 2+2 in curly braces that means it is javascript and will evaluate to 4. Try it on js repl

Curly braces can be used for writing javascript expressions or calling javascript function in JSX

Lets take another example and try to call a function right from jsx as below

function getFullName(user)
{
   return user.firstname + ' '+user.lastname;
}
var Helloworld =(props)=>
{
var user={firstname:'Larsen',lastname:'turbo'};
return(
<div>
{
getFullName(user)
//method can be called here
}
</div>
);
}
ReactDOM.render(<Helloworld/>,mountNode)

Run the code and see the output produced by method getFullName

Another important point is you can use JSX as expression. For example you can return JSX from function getFullName

Okay , I want a diffirent style in first name and diffirent style in last name so we can return JSX for getFullName method.

function getFullName(user)
{
   return <span className='firstname'>{user.firstname} </span><span> {' ' +user.lastname}</span>;
}

Will this example run. You can try to fit this method in above example but it will give error

Why? Because remember first rule two adjacent JSX element must me wrapped in a container.

So to run it lets enclose it in another span so below method will run for sure.

function getFullName(user)
{

   return <span><span className='firstname'>{user.firstname} </span><span> {' ' +user.lastname}</span></span>;

}

Attributes with JSX

The most important thing is to remember that JSX uses caml case for property names and not html attributes for example

tabindex will  become tabIndex we will use to specify class we will write className.

 

We now have some basic information about JSX and we will continue exploring.



Please Share this page
Views : 48
Like every other website we use cookies. By using our site you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Learn more Got it!