정의
class ClassComponent extends React.Component{
render() {
return (
<div>Hello</div>
)
}
}
사용
ReactDOM.render(
<ClassComponent /> ,
document.querySelector('#root');
);
정의1
function FunctionComponent (){
return <div>Hello</div>
}
정의2_1
const FunctionComponent = () => {
return <div>Hello</div>
``정의2-1``
}
정의2_2
const FunctionComponent = () => <div>Hello</div>
사용
ReactDOM.render(
<FunctionComponent />,
document.querySelector('#root');
);
React.createElement(
type, // 태그 이름 문자열 || 리액트 컴포넌트 || React.Fragment
[props], // 리액트 컴포넌트에 넣어주는 데이터객체
[...children] //자식으로 넣어주는 요소들
);
<h1>type이 태그이름 문자열 입니다</h1>
ReactDOM.render(
React.createElement('h1', null, `type이 "태그 이름 문자열" 입니다.`),
document.querySelector('#root')
);
<Component /> => <p>type이 "React 컴포넌트" 입니다.</p>
const Component = () => {
return React.createElement(
'p',
null,
`type이 "React 컴포넌트" 입니다.`
);
};
ReactDOM.render(
React.createElement(Component, null, null),
document.querySelector('#root')
)
ReactDOM.render(
React.createElement(
React.Fragment,
null, //data
`type이 "리액트 프래그먼트"입니다`,
`type이 "리액트 프래그먼트"입니다`,
`type이 "리액트 프래그먼트"입니다`
),
document.querySelector('#root')
);
ReactDOM.render(
React.createElement(
'div',
null,
React.createElement(
'div',
null,
React.createElement(
'h1',
null,
"주제"),
React.createElement(
'ul',
null,
React.createElement(
'li',
null,
"React"
),
React.createElement(
'li',
null,
"Vue"
)
)
)
),
document.querySelector('#root')
);