React
React 시작하기 - 01 - 가장 간단한 형태의 리액트 요소
빡새
2022. 6. 18. 17:32
뭐든지 걷어내고 걷어내서 뼈대만 남겼을 때 핵심이 보인다.
리액트 문법을 처음 익힐 때도 최대한 간단한 형태로 먼저 띄어 보자.
<body>
<div id="root1">
</div>
<!-- react cdn -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!-- react dom cdn -->
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- babel cdn -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- define type as a babel -->
<script type="text/babel">
// babel이란? 바벨은 ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드 등을
// 하위 버전의 자바스크립트 코드로 변환시켜서 다른 브라우저들 위에서 돌아갈 수 있도록 해 준다.
// 리액트돔에 렌더링을 추가하겠다.
// 누구를? #root1 이라는 요소를.
// 채우는 내용물은 <h1> ~~~ </h1> 이다.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root1')
);
// 생각해 보니까 엄청 영어스러운 사고 구조와 사고 방식이다.
// 동사부터 나오고, 간접 목적어 나오고, 직접 목적어 나오고.
// 넣겠다. 무엇을. 어디에.
// put something in somewhere
// render element, container
</script>
</body>-220523
참고 자료 -
반응형