220318 React JSX

JSX

JSX構文

import logo from "./logo.svg";
import "./App.css";

function App() {
  let name = "nuri"

  return (
    <div id="id" className="App">
      {name !== "1" ? name : "1"}
      {name}
      <p style = {{color: "orange", fontSize: "20px"}}>안녕하세요. 리액트 반입니다! :)</p>
      <input type="text" />
    {/* </div> */} // 이 부분 주목!!!!
  );
}

export default App;

return (
<p>안녕하세요! 리액트 반입니다 :)</p>
<div className="App">
<input type='text'/>
</div>
);

      <p style = {{color: "orange", fontSize: "20px"}}>안녕하세요. 리액트 반입니다! :)</p>

- 스타일은 딕셔너리로 넘겨줘야 하기 때문에 {} 중괄호 1번
- 자바스크립트 표현식을 쓰고 싶다면 중괄호를 사용해야하기 때문에 중괄호 {} 1번
- 총 2번의 중괄호를 사용한다

    <div id="id" className="App"> //id는 id로 사용한다

<p style = {{color: "orange", fontSize: "20px"}}>안녕하세요. 리액트 반입니다! :)</p>

<p style={{color: 'orange', fontSize: '20px'}}>orange</p>
//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있다
function App() {
	const styles = {
		color: 'orange',
		fontSize: '20px'
	};
	return (
		<div className="App">
			<p style={styles}>orange</p>
		</div>
	);
}

return (
    <div id="id" className="App">
      {/* <input type="text" /> */} // 주목!!!!!
    </div>
  );