【초초 간단】 스크립트 코드를 준비해 JSX를 사용해 보자!

2594 단어 React자바스크립트렌더JSX

JSX란?



JSX를 사용하면 javascript에 HTML 태그를 작성할 수 있습니다.
JSX는 React에서는 필수는 아니지만 기억해 두는 것이 편리합니다.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>React</title>
       <script src="https://unpkg.com/react@16/umd/react.development.js"></script>

       <script  src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">  
       </script>
     </head>
 <body>

       <h1>React</h1>
       <div id="root">wait...</div>
<script>
    let dom =document.querySelector('#root');

    let element = React.createElement(
    'p',{}, 'Hello React'
    );
    ReactDOM.render(element, dom);
</script>

    </body>
</html>

React의 <script> 태그 준비



여기 <script> 태그를 준비하세요.
<!--Reactの本体-->

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>

<!--仮想DOMのスクリプトファイル-->
 <script  src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"><!--仮想DOMのスクリプトファイル-->

내장용 태그 준비



React의 표시에 포함되는 Element 메서드를 가져옵니다.
querySelector 메소드를 사용해 id="root 를 취득합니다.
  <div id="root">wait...</div>

let dom =document.querySelector('#root');

가상 Element 만들기



그런 다음 React의 createElement에서 요소를 만듭니다.
우선, React에서는 가상 DOM의 엘리먼트를 만들어 내장하는 것만 기억합시다.

let element에서 element 변수를 정의하고
다음과 같이 방법을 만듭니다.
React.createElement（タグ名,　属性, 中に組み込まれるもの);
let element = React.createElement(
'p',{}, 'Hello React'
);

렌더링으로 가상 요소를 표시하자.



작성한 가상 DOM의 Elemen은 렌터링을 사용해 표시시킵니다.
render 메서드에서 다음과 같이 표시합니다.
ReactDOM.render(element, dom);

화면에는 이렇게 표시됩니다.



· React에서 id = "root"의 값을 얻기 전에





· 가상 elemnt를 만들고 렌터한 후.





청취 해 주셔서 감사합니다.
앞으로도 정기적으로 투고 해 나가려고 생각하기 때문에 조금이라도 위해가되면,
LGTM 또는 팔로우 잘 부탁드립니다!
React hook으로 기분 좋게 입력 체크~에러 판정을 실시한다
React에서 스프레드 구문을 활용하여 스타일이 다른 버튼 사용

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage