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

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

Jan 06, 2022 pm 03:38 PM
jsx

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

1

2

3

4

5

6

<div class=&#39;app&#39; id=&#39;appRoot&#39;>

  <h1 class=&#39;title&#39;>欢迎进入React的世界</h1>

  <p>

    React.js 是一个帮助你构建页面 UI 的库

  </p>

</div>

로그인 후 복사

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

{

  tag: &#39;p&#39;,

  attrs: { className: &#39;app&#39;, id: &#39;appRoot&#39;},

  children: [

    {

      tag: &#39;h1&#39;,

      attrs: { className: &#39;title&#39; },

      children: [&#39;欢迎进入React的世界&#39;]

    },

    {

      tag: &#39;p&#39;,

      attrs: null,

      children: [&#39;React.js 是一个构建页面 UI 的库&#39;]

    }

  ]

}

로그인 후 복사

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

import React from &#39;react&#39;

import ReactDOM from &#39;react-dom&#39;

 

class App extends React.Component {

  render () {

    return (

      <p className=&#39;app&#39; id=&#39;appRoot&#39;>

        <h1 className=&#39;title&#39;>欢迎进入React的世界</h1>

        <p>

          React.js 是一个构建页面 UI 的库

        </p>

      </p>

    )

  }

}

 

ReactDOM.render(

    <App />,

  document.getElementById(&#39;root&#39;)

)

로그인 후 복사

Convert to

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

import React from &#39;react&#39;

import ReactDOM from &#39;react-dom&#39;

 

class App extends React.Component {

  render () {

    return (

      React.createElement(

        "p",

        {

          className: &#39;app&#39;,

          id: &#39;appRoot&#39;

        },

        React.createElement(

          "h1",

          { className: &#39;title&#39; },

          "欢迎进入React的世界"

        ),

        React.createElement(

          "p",

          null,

          "React.js 是一个构建页面 UI 的库"

        )

      )

    )

  }

}

 

ReactDOM.render(

    React.createElement(App),

  document.getElementById(&#39;root&#39;)

)

로그인 후 복사

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

1

2

3

4

5

React.createElement(

  type,

  [props],

  [...children]

)

로그인 후 복사

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

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

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

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

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

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. 크로스 플레이가 있습니까?
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++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란 무엇인가요? 언제 사용하나요? 그것을 사용하는 방법? Vue의 JSX란 무엇인가요? 언제 사용하나요? 그것을 사용하는 방법? Jan 16, 2023 pm 08:23 PM

Vue의 JSX란 무엇인가요? 다음 글에서는 Vue에서의 JSX에 대해 소개하고, JSX를 언제 사용해야 하는지, Vue2에서의 기본적인 사용법을 소개하겠습니다.

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

Vue+Vite에서 JSX를 어떻게 사용하나요? 다음 글에서는 Vue3+Vite에서 JSX를 사용하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

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

배경: vue3 프로젝트는 더 명확한 논리와 더 쉬운 유지 관리를 통해 비즈니스별로 구분된 jsx+hooks 형식과 결합된 Composition-api+setup 형식의 사용을 장려합니다. 다음 구문은 주로 jsx와 템플릿의 서로 다른 구문을 비교하여 동일한 기능을 달성합니다. 1. 일반 내용. //jsx 작성 방법은 동일합니다. >hello}//tempalte 작성 방법 hello 2. 동적 변수 jsx는 변수를 따옴표 없이 묶기 위해 일률적으로 중괄호를 사용합니다. 예를 들어 {age}tempalte의 내용은 이중 중괄호로 묶이고 속성 변수는 콜론으로 시작합니다. 예를 들어, {{age}}{}는 jsx에서 가져온 것입니다.

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

Vite로 Vue3 프로젝트를 생성하려면 Vite에 Node.js 버전 >= 12.0.0이 필요합니다. (현재 노드 버전을 보려면 node-v) Yarn을 사용하세요: Yarncreate@vitejs/app npm을 사용하세요: npminit@vitejs/app1. 여기에 프로젝트 이름을 입력하세요: vite-vue32. 통합해야 합니다. 프레임워크: vuevanilla: 기본 js, 프레임워크 통합 vue: vue3 프레임워크, vue3react만 지원: 반응 프레임워크 preact: 경량 반응 프레임워크 lit-element: 경량 우리

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

Vue는 구성 요소 기반 개발 모델을 제공하는 인기 있는 프런트 엔드 프레임워크입니다. 그러나 Vue는 기본적으로 JSX 구문을 지원하지 않지만 타사 라이브러리를 사용하여 JSX 구문 및 구성 요소 프로그래밍을 구현할 수 있습니다. 1. JSX란 무엇입니까? JSX는 JavaScript에서 HTML과 같은 코드를 작성할 수 있는 JavaScript의 확장 구문입니다. React는 JSX 구문을 도입한 최초의 프런트엔드 프레임워크입니다. JSX 구문을 사용하면 설명이 더 자연스럽고 편리해집니다.

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

vue에서 JSX를 어떻게 사용하나요? 다음 글에서는 vue3에서 JSX를 사용하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

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

JSX 사용 방법 여기서는 vite 프로젝트를 예로 들어 보겠습니다. 프로젝트에서 JSX를 사용하려면 @vitejs/plugin-vue-jsx 플러그인을 설치해야 합니다. 프로젝트 npmi@vitejs/plugin-vue - -jsx-D 설치가 완료된 후 vite.config.ts에서 import{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue"를 구성합니다. importvueJsxfrom"@

See all articles