React.js - 넷플릭스 페이지 클론코딩하기(1)

Solar ·2022년 7월 23일
0

Start our first react Element

//용어 정리
-react src = interactive(동적이고 상호적인) 인터페이스 구현
-react dom src = dom은 html 안에 react 요소를 넣을 수 있도록 해줌

React.createElement

  • 리액트에서 html요소를 생성해주기
  • 여러 개의 class, id 등의 속성을 한꺼번에 넣어서 html 태그로 렌더링을 시켜주기 위하여 사용함

const span = React.createElement("span");
//span이라는 React Element를 생성한다.

  1. const span = React.createElement("span", null, "Hello I'm a span")
    //React.createElement(tag 이름, 이벤트 속성, 문자)
  2. const btn = React.createElement("button", {onclick : () =>console.log("I'm clicked!")}, style : {background color : "tomato",})

// 리액트 액션 형태

{이벤트 : ()=> 이벤트 발생 결과}
//React.createElement("태그 속성", {이벤트}, 스타일)

  1. const container = React.createElement("div", null, [span, btn]);
    //
    에 위에서 만든 span, btn을 담음
    [span, btn] : 담는것

ReactDOM.render

ReactDOM.render(container, root);
//root안에 container을 넣어서 렌더링을 시켜줌

ReactDOM.redner(span, root);
//root안에 span을 넣어서 렌더링을 시켜줌

JSX = Javascript 확장판

const title = <h3 id= "title" {onMouseEnter : ()=> console.log("mouse enter")}>Hello! I'm a title!

onMouseEnter : Mouse를 title에 갖다 대면 효과가 나타남

javascirpt과 react 표현식 비교하기

const element = (

Hello! world!

);

vs

const element = React.createElement("h1", {className : 'greeting'}, 'Hello! world!');
//태그 이름, class 이름, 내용

html에서 리액트 사용할 때 환경설정하기

Hello React!
profile
Hiiiii I'm Solar:)

0개의 댓글