React: Implementing JSX

RULE 1: Wrapping in one single element

Multiple JSX element always have to be closed by one parent element.

<div>
	<h1>Hello</h1>
</div>
<div>
	<h2>World</h2>
</div>

Codes above need to be wrapped with one elemnt like the codes below.

<div>
  <div>
      <h1>Hello</h1>
  </div>
  <div>
      <h2>World</h2>
  </div>
</div>

RULE 2: Use 'className' instead of 'class'

When we want to add a class name into a JSX element, we have to use className instead of class because in React, it does not translated as HTML class name but it translate as JavaScript Class.

<div class="hello">Hello world!</div> 			// THIS IS WRONG WAY OF ADDING CLASS NAME IN JSX!!!!

<div className="hello">Hello world!</div> 		// THIS IS RIGHT WAY OF ADDING CLASS NAME IN JSX!!!!

RULE 3: Use curly bracket for using JavaScript syntax

If we want to use JavaScript in JSX, we need to wrap that JavaScript Code with curly bracket like the codes below.

function App() {
	const name = 'Minwoo Gwak'
    
    return (
    	<div>
        	Hello, {name} 					// using curly bracket for adding JavaScript code in JSX
        </div>
    );
}

Rule 4: Component must starts with Capital letter

If we use the component name starts with lower case, then React interpret it as regular HTML element.

function greeting() { 						// It is not starting with capital letter
	const name = 'Minwoo Gwak'
    
    return (
    	<div>
        	Hello, {name} 					// using curly bracket for adding JavaScript code in JSX
        </div>
    );
}

This codes need to be changed like below:

function Greeting() {   					// It starts with a capital letter! 
	const name = 'Minwoo Gwak'
    
    return (
    	<div>
        	Hello, {name} 					// using curly bracket for adding JavaScript code in JSX
        </div>
    );
}

Rule 5: Use ternary expression for conditional rendering

We need to use ternary expression instead of if statement

function Greeting() {   					
	const name = 'Minwoo Gwak'
    
    return (
    	<div>
        	Hello, {name === 'Minwoo Gwak' ? 'admin' : 'customer'}	
        </div>
    );
}