#2 The basics of REACT

jinabbb·2022년 3월 9일
0

#2 The basics of REACT

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);
profile
개발

0개의 댓글