React는 interactive한 element를 만들수 있도록 해주는 라이브러리이고,.
React-Dom 은 React Element를 html에 놓을수 있도록 해주는 라이브러리이다.
const title = React.createElement(
'h3',
{
id: 'title',
onMouseEnter: (e) => (e.target.style.color = 'red'),
onMouseLeave: (e) => (e.target.style.color = 'black'),
},
'Hello, Im a title'
);
const root = document.querySelector('#root');
ReactDOM.render(title, root);
JSX는 React.createElement()를 좀더 편하고 직관적이게 사용가능하게 한다.
babel라이브러리가 있어야 JSX를 React.createElement()로 변환해서 사용가능하다.
컴포넌트의 첫글자는 대문자여야한다 (바벨이 일반 html태그와 구분하기 위해)
const Title = (
<h3
id='title'
onMouseEnter={(e) => (e.target.style.color = 'red')}
onMouseLeave={(e) => (e.target.style.color = 'black')}
>
Hello, Im a title'
</h3>
);
function Button() {
return (
<button
onClick={() => {
console.log('Im clicked');
}}
>
Click Me
</button>
);
}
const Container = (
<div>
{Title}
<Button />
</div>
);
ReactDOM.render(Container, root);