Converting HTML to JSX

• Names/values of attributes that you provide to elements in HTML are slightly different when writing JSX

JSX 작성법

Rules : Converting HTML to JSX

(1) All prop names follow camelCase
(2) Number attributes use curly braces
(3) Boolean 'true' can be written with just the property name.
'False' should be written with curly braces.
(4) The 'class' attributes is written as 'className'
(5) In-line styles are provided as objects.

(1) In JSX, all prop names follow camelCase

(2) Number attributes use curly braces

• [HTML] : <input maxlength="5">
  [JSX] : <input maxLength={5}
• [HTML] : <form autocapitalize />
  [JSX] : <form autoCapitalize />
• [HTML] : <form novalidate>
  [JSX] : <form noValidate>
• [HTML] : <input optimum="50" />
  [JSX] : <meter optimum={50} />

(3) Boolean 'true' can be written with just the property name. / 'False' should be written with curly braces.

function App() {
	return <input spellCheck={false} />;
}
// 인풋 박스의 맞춤법 검사 빨간 줄 안 뜨게 함

• [HTML] : <input spellcheck="true" />
  [JSX] : <input spellCheck />
• [HTML] : <input spellcheck="false" />
  [JSX] : <input spellCheck={false} />

(4) The 'class' attributes is written as 'className'

• [HTML] : <div class="divider" />
  [JSX] : <div className="divider" />
• [HTML] : <li class="item" />
  [JSX] : <li className="item" />

(5) In-line styles are provided as objects.

• [HTML] : <a style="text-decoration : 'none'; padding-top : '5px';" />
  [JSX] : <div style={{ textDecoration:'none', paddingTop:'5px' }} /> ⇠ prop : {{ }}

//  4) Create a component
function App() {
  return (
    <div className="wrapper">
      <textarea
        readOnly={false}
        maxLength={"3"}
        spellCheck={false}
        style={{ backgroundColor: "gray" }}
      />
    </div>
  );
}