JavaScript를 사용한 기본 반응-1 부

Unsplash에 Artem Sapegin의 사진

React로 쓰기 시작

DOM API를 사용하여 직접 Element를 생성 할 수 있습니다. 그렇게하려면 루트 요소를 가져 와서 내부 HTML을 설정해야합니다. 그게 전부입니다. 아래 예를 참조하십시오.

document.getElementById('root').innerHTML = `
  <div>
    Hello World!
  </div>
`;

이를 위해서는 React DOM Renderer를 추가해야합니다. 그 안에 두 개의 매개 변수를 추가해야합니다. 그중 하나는 React Create Element이고 다른 하나는 HTML 루트 요소입니다. 아래 코드를 따르십시오.

ReactDOM.render(
  React.createElement(),
  document.getElementById(),
);

ReactDOM.render(
  React.createElement(
    'tagname',
    'style',
    'Insert, what do you want to see in the output!',
  ),
  document.getElementById(),
);

ReactDOM.render(
  React.createElement(
    'div',
    null,
    'Hello World!',
  ),
  document.getElementById('root'),
);

여기에 다른 방법이 있습니다. 'React.createElement'대신 HTML을 직접 삽입 할 수 있습니다. 아래 예를 보겠습니다. 관심이 있다면 CodePan 에서 출력을 볼 수 있습니다 .

ReactDOM.render(
  <div>Hello World!</div>,
  document.getElementById('root'),
);

React 요소를 중첩 해 보겠습니다!

React Create Element 안에 중첩 요소를 삽입 해 보겠습니다. 1st Create Element 안에 중첩을 위해 다른 요소를 삽입 할 수 있습니다. 이해가 안 되나요? 보자…

ReactDOM.render(
  React.createElement(
    'div',
    null,
    'Hello World!',
    React.createElement(
      'pre',
      null,
      new Date().toLocaleTimeString(),
    ),
  ),
  document.getElementById('root'),
);

const time = () => {
  ReactDOM.render(
    React.createElement(
      'div',
      null,
      'Hello World!',
      React.createElement(
        'pre',
        null,
        new Date().toLocaleTimeString(),
      ),
    ),
    document.getElementById('root'),
  );
}
setInterval(time, 1000);