#2 [2021 UPDATE] THE BASICS OF REACT - nomadCoder
https://nomadcoders.co/react-for-beginners/lectures/3258
All Courses – 노마드 코더 Nomad Coders
초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요!
nomadcoders.co
#2 [2021 UPDATE] THE BASICS OF REACT
#2.2 Our First React Element
React.js: 어플리케이션이 아주 인터랙티브(interactive) 하도록 만들어주는 library, Engine과 같다.
React-dom: library 또는 package. 모든 react element들을 HTML body에 둘 수 있도록 해줌
ReactDOM.render(): render의 의미는 react element를 가지고 HTML로 만들어 배치한다는 것.
즉, 사용자에게 보여준다는 의미
React는 JS -> HTML 순서
JS가 element를 생성하고 React JS가 그것을 HTML로 번역하는 것.
React JS는 업데이트를 해야하는 HTML을 업데이트 할 수 있음
#2.3 Events in React
#2.4 Recap
#2.5 JSX
JSX: JavaScript를 확장한 문법.
기본적으로 우리가 여기서 한 것처럼 React 요소를 만들 수 있게 해주는데, 우리가 HTML에서 사용한 문법과 흡사한 문법 사용함
https://ko.reactjs.org/docs/introducing-jsx.html
JSX 소개 – React
A JavaScript library for building user interfaces
ko.reactjs.org
Babel: JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 변환
#2.6 JSX part Two
arrow function = () => (
: function이랑 return문 이미 포함하고 있음
function () {
return ();
}
const Button = () => ();
// same
function Button () {
return ();
}const Container = () => (
<div>
<Button />
</div>
);
ReactDOM.render(<Container />, root);