JSX Basics and Advanced Concepts

Take a look at following code from official react documentation

const element = <h1>Hello, world!</h1>;  

This is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript. It is recommended to use it with React to describe what the UI should look like.

It also means that JSX is not valid JavaScript. Web browsers can’t read it! That means file will have to be compiled before it reaches a web browser, a JSX compiler will translate any JSX into regular JavaScript.

Example

A basic unit of JSX is called a JSX element. Example of JSX element

<h1>Hello world</h1>  

JSX elements are treated as JavaScript expressions. They can go anywhere that JavaScript expressions can go.

const navBar = <nav>I am a nav bar</nav>;  

Attributes

JSX elements can have attributes, just like HTML elements can.

A JSX attribute is written using HTML-like syntax: a name, followed by an equals sign, followed by a value.

const panda = <img src="images/panda.jpg" alt="panda" width="500px" height="500px" />;  

You can nest JSX elements inside of other JSX elements, just like in HTML.
a JSX expression must have exactly one outermost element.
You can embed any JavaScript expression in JSX by wrapping it in curly braces.

Since JSX is closer to JavaScript than HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.

Rendering of JSX element

ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));  
  • One special thing about ReactDOM.render() is that it only updates DOM elements that have changed and this is what makes React very fast.
Advanced JSX

Syntax in JSX is mostly the same as in HTML, but there are subtle differences.

  • In JSX, you can’t use the word class! You have to use className instead.
<h1 class="big">Hey</h1>  
<h1 className="big">Hey</h1>  

This is because JSX gets translated into JavaScript, and class is a reserved word in JavaScript. When JSX is compiled, className gets translated into class.

  • in JSX for you have to include slash for closing tag. in HTML closing slash is not madatory for tags such as ‘< image>’ and ‘< br>’
  • Any code in between the tags of a JSX element will be read as JSX, not as regular JavaScript. You need to use curlt braces to inject JavaScript inJSX. The curly braces themselves won’t be treated as JSX nor as JavaScript. They are markers that signal the beginning and end of a JavaScript injection into JSX.
const pi = (  
  <div>
    <h1>
      PI, YALL!
    </h1>
    <p>
      {Math.PI.toFixed(20)}
    </p>
  </div>
);

Variables can be used as JSX element properties as well.

const pics = {  
  panda: "http://bit.ly/1Tqltv5",
  owl: "http://bit.ly/1XGtkM3",
  owlCat: "http://bit.ly/1Upbczi"
};
const sideLength = "200px";  
const owlCat = (  
  <img 
    src={pics.owlCat} 
    alt="Ghastly Abomination"
     height={sideLength}  />
);

Event Handling

JSX elements can have event listeners, just like HTML elements can. Programming in React means constantly working with event listeners.

<img onClick={myFunc} />  

An event listener attribute’s value should be a function. The above example would only work if myFunc were a valid function that had been defined elsewhere:

list of valid events can be found here

If Else

Tertiary operator

The ternary operator works the same way in React as it does in regular JavaScript. However, it shows up in React surprisingly often.

x ? y : z  

x is evaluated as either “true” or “false”.
If x is “true” tertiary operator returns y
If x is “false” tertiary operator returns z

Usage
const headline = (  
  <h1>
    { age >= drinkingAge ? 'Buy Drink' : 'Do Teen Stuff' }
  </h1>
);

JSX Conditionals: &&

.map in JSX

The array method .map() comes up often in React. If you want to create a list of JSX elements, then .map() is often your best bet.

const strings = ['Home', 'Shop', 'About Me'];

const listItems = strings.map(string => <li>{string}</li>);

<ul>{listItems}</ul>  

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.