Advanced JSX

이 글은 React의 JSX에 관한 기본 개념 및 문법을 정리하기 위해 작성하였습니다.
JSX의 추가문법과 헷갈릴 수 있는 부분들을 정리하였습니다.

---

< Class VS ClassName >

In JSX, you have to use className instead of class

 

• This is because JSX gets translated into JavaScript, and class is a reserved word in JavaScript.
  (When JSX is rendered, className attributes are automatically rendered as class)

 

ex)

const myDiv = <div className='big'>I AM A BIG DIV</div>;

 

 

---

< Self-Closing Tags >

In JSX, you have to include the ' / ' (in HTML, it's optional)

 

<!-- in HTML -->
<br> 
<br />

<!-- in JSX -->
<br />

 

 

---

< JavaScript In Your JSX In your javaScript >

To Write JavaScript code inside of a JSX expression.

 

• Use Curly Braces : { }

 

ex)

ReactDOM.render(
  <h1>2 + 3</h1>,
  document.getElementById('app')
);
// return '2+3'

ReactDOM.render(
  <h1>{2 + 3}</h1>,
  document.getElementById('app')
);
// return '5'

 

 

---

< Variables in JSX >

You can access variables while inside of a JSX expression.

 

ex)

// example 1
const name = 'Gerdo';
<h1>Hello, {name}!</h1>;   //   Hello, Gerdo!

// example 2
const pics = {
  panda: "http://bit.ly/1Tqltv5",
  owl: "http://bit.ly/1XGtkM3",
}; 
 
const panda = (
  <img 
    src={pics.panda} 
    alt="Lazy Panda" />
);
 
const owl = (
  <img 
    src={pics.owl} 
    alt="Unimpressed Owl" />
);

 

 

---

< Event Listeners in JSX >

In JSX, event listener attribute's names are written in camelCase (in HTML, lowercase)

 

• Such as..
  : onclick, onkeyup -> onClick, onKeyUp

 

ex)

function myFunc() {
  alert('Make myFunc the pFunc... omg that was horrible i am so sorry');
}
 
<img onClick={myFunc} />

 

 

---

< JSX Conditionals >

Here's a rule : you can not inject an if statement into JSX expression.

 

• One option is to write an if statement, and not inject it into JSX.

 

ex)

// work
if (purchase.complete) {
  <h1>Thank you!</h1>;
}

// not work
(
  <h1>
    {
      if (purchase.complete) {
        'Thank you!';
      }
    }
  </h1>
)

 

reference : the reason why can't use if statement in JSX

https://reactjs.org/docs/jsx-in-depth.html

JSX In Depth – React

 

 

---

< JSX Conditionals : The Ternary Operator >

There's a more compact way to write Conditionals in JSX : The Ternary Operator

 

• The ternary operator works the same way in React as it does in regular JavaScript.

 

ex)

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

 

 

---

< JSX Conditionals : && >

Another way to write conditionals in JSX : &&
(Like the ternary operator, && is not React-specific, but it shows up in React surprisingly often)

 

< Syntax >

expression && code block

if expression evaluates 'true', do code block.
if expression evaluates 'false', do nothing.

 

ex)

const tasty = (
  <ul>
    <li>Applesauce</li>
    { !baby && <li>Pizza</li> }
    { age > 15 && <li>Brussels Sprouts</li> }
    { age > 20 && <li>Oysters</li> }
    { age > 25 && <li>Grappa</li> }
  </ul>
);

 

 

---

< map in JSX >

To create a list of JSX elements using .map()
(The .map() method comes up often in React)

 

ex)

const strings = ['Home', 'Shop', 'About Me'];
 
const listItems = strings.map(string => <li>{string}</li>);
 
<ul>{listItems}</ul>

 

 

---

< Keys >

A key is a JSX attribute. React uses them internally to keep track of lists.
(keys don’t do anything that you can see!)

 

• The key’s value should be something unique, similar to an id attribute.

 

< Not all lists need to have keys. A list needs keys if either of the following are true : >
1. The list-items have memory from one render to the next. For instance, when a to-do list renders, each item must “remember” whether it was checked off. The items shouldn’t get amnesia when they render.
2. A list’s order might be shuffled. For instance, a list of search results might be shuffled from one render to the next.

If neither of these conditions are true, then you don’t have to worry about keys.
If you aren’t sure then it never hurts to use them!

 

ex)

const people = ['Rowe', 'Prevost', 'Gare'];

const peopleLis = people.map((person, i) =>
  <li key={'person_' + i}>{person}</li>;
);

 

 

---

< React.createElement >

To write React code without using JSX at all using React.createElement( ) method

 

• When a JSX element is compiled, the compiler transforms the JSX element into the React.createElement( ) method.

 

ex)

// With JSX
const h1 = <h1>Hello, World</h1>;

// Without JSX
const h1 = React.createElement(
  'h1',
  null,
  'Hello, world'
);

 

 

reference : if you’d like to learn more!

https://reactjs.org/docs/react-api.html

React Top-Level API – React