React - JSX - 02

Building Content with JSX

JSX vs HTML

• Adding custom styling to an element uses different syntax
• Adding a class to an element uses different syntax
• JSX can reference JS variables

// HTML
<div  style="background-color: red;"></div>
// JSX
<div  style={{ backgroundColor:  'red' }}></div>

React에서는 JSX 방법으로 스타일을 지정한다.

Class vs ClassName

Class: JavaScript keyword
ClassName: JSX(Extension of javascript)
따라서, React는 JSX를 사용하기 때문에 ClassName을 사용한다.

// Create a react component
const  App = () => {
const  buttonText = { text:  'Click me'};
const  labelText = 'Enter name: ';

return (
 <div>
  <label  className="label"  htmlFor="name"> // this
   {labelText}
  </label>
  <input  id="name"  type="text" />
  <button  style={{ backgroundColor:  'blue', color:  'white' }}>
   {buttonText.text}
  </button>
 </div>
 )
};

// Take the react component and show it on the screen
ReactDOM.render(
 <App />,
 document.querySelector('#root')
);

Error

Warning: Invalid DOM property 'for'. Did you mean 'htmlFor'?: label 태그에 for property가 있는데 JSX에서는 htmlFor=""이라고 작성하면 된다.

GitHub

강의를 들으며 따라한 내용을 create-react-app에 올려두었습니다.