웹 프론트엔드 JS 튜토리얼 한 글로 JSX 원칙을 알아보세요(권장)

한 글로 JSX 원칙을 알아보세요(권장)

Jan 06, 2022 pm 03:38 PM
jsx

JSX의 원리를 이해하려면 먼저 JavaScript 개체를 사용하여 DOM 요소의 구조를 표현하는 방법을 이해해야 합니다.
아래 DOM 구조를 보세요:

<div class='app' id='appRoot'>
  <h1 class='title'>欢迎进入React的世界</h1>
  <p>
    React.js 是一个帮助你构建页面 UI 的库
  </p>
</div>
로그인 후 복사

JavaScript 객체를 사용하여 위 HTML의 모든 정보를 표현할 수 있습니다:

{
  tag: 'p',
  attrs: { className: 'app', id: 'appRoot'},
  children: [
    {
      tag: 'h1',
      attrs: { className: 'title' },
      children: ['欢迎进入React的世界']
    },
    {
      tag: 'p',
      attrs: null,
      children: ['React.js 是一个构建页面 UI 的库']
    }
  ]
}
로그인 후 복사

하지만 JavaScript로 작성하기에는 너무 길고 구조가 명확하지 않습니다. HTML은 매우 복잡합니다.
그래서 React.js는 JavaScript 코드에서 HTML 태그 구조와 유사한 구문을 작성할 수 있도록 JavaScript 구문을 확장했습니다. 이는 컴파일 프로세스에서 HTML과 유사한 JSX 구조를 JavaScript의 객체 구조로 변환합니다.

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      <p className='app' id='appRoot'>
        <h1 className='title'>欢迎进入React的世界</h1>
        <p>
          React.js 是一个构建页面 UI 的库
        </p>
      </p>
    )
  }
}

ReactDOM.render(
    <App />,
  document.getElementById('root')
)
로그인 후 복사

Convert to

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      React.createElement(
        "p",
        {
          className: 'app',
          id: 'appRoot'
        },
        React.createElement(
          "h1",
          { className: 'title' },
          "欢迎进入React的世界"
        ),
        React.createElement(
          "p",
          null,
          "React.js 是一个构建页面 UI 的库"
        )
      )
    )
  }
}

ReactDOM.render(
    React.createElement(App),
  document.getElementById('root')
)
로그인 후 복사

React.createElement는 태그 이름, 속성, 하위 요소 등을 포함하여 HTML 구조의 정보를 설명하는 JavaScript 객체를 구축합니다. 구문은

React.createElement(
  type,
  [props],
  [...children]
)
로그인 후 복사

소위 JSX는 실제로 JavaScript 개체이므로 React 및 JSX를 사용할 때는 컴파일 과정을 거쳐야 합니다

JSX — React를 사용하여 구성 요소를 구성하고 babel로 컴파일 —> JavaScript 개체 — ReactDOM.render() —> DOM 요소 —> 페이지에 삽입

추천 학습: " js 기본 튜토리얼

위 내용은 한 글로 JSX 원칙을 알아보세요(권장)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Vue가 JSX를 통해 구성 요소를 동적으로 렌더링하는 방법에 대해 이야기해 보겠습니다. Vue가 JSX를 통해 구성 요소를 동적으로 렌더링하는 방법에 대해 이야기해 보겠습니다. Dec 05, 2022 pm 06:52 PM

Vue가 JSX를 통해 구성 요소를 동적으로 렌더링하는 방법에 대해 이야기해 보겠습니다.

Vue의 JSX란 무엇인가요? 언제 사용하나요? 그것을 사용하는 방법? Vue의 JSX란 무엇인가요? 언제 사용하나요? 그것을 사용하는 방법? Jan 16, 2023 pm 08:23 PM

Vue의 JSX란 무엇인가요? 언제 사용하나요? 그것을 사용하는 방법?

Vue3+Vite에서 JSX를 사용하는 방법에 대한 자세한 설명 Vue3+Vite에서 JSX를 사용하는 방법에 대한 자세한 설명 Dec 09, 2022 pm 08:27 PM

Vue3+Vite에서 JSX를 사용하는 방법에 대한 자세한 설명

vue3에서 jsx 구문을 사용하는 방법 vue3에서 jsx 구문을 사용하는 방법 May 12, 2023 pm 12:46 PM

vue3에서 jsx 구문을 사용하는 방법

Vite는 Vue3 프로젝트를 생성하고 Vue3가 jsx를 사용하는 방법 Vite는 Vue3 프로젝트를 생성하고 Vue3가 jsx를 사용하는 방법 May 22, 2023 pm 01:58 PM

Vite는 Vue3 프로젝트를 생성하고 Vue3가 jsx를 사용하는 방법

Vue는 JSX 구문과 구성 요소 프로그래밍을 어떻게 구현합니까? Vue는 JSX 구문과 구성 요소 프로그래밍을 어떻게 구현합니까? Jun 27, 2023 am 11:48 AM

Vue는 JSX 구문과 구성 요소 프로그래밍을 어떻게 구현합니까?

Vue3에서 jsx/tsx를 사용하는 방법 Vue3에서 jsx/tsx를 사용하는 방법 May 11, 2023 pm 02:07 PM

Vue3에서 jsx/tsx를 사용하는 방법

vue3에서 JSX를 사용하는 방법을 자세히 설명하는 기사 vue3에서 JSX를 사용하는 방법을 자세히 설명하는 기사 Nov 25, 2022 pm 09:01 PM

vue3에서 JSX를 사용하는 방법을 자세히 설명하는 기사

See all articles