반응 jsx는 무엇입니까-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

반응 jsx는 무엇입니까

藏色散人

Nov 10, 2020 am 11:47 AM

react

react jsx는 XML과 매우 유사한 JavaScript 구문 확장입니다. React는 JSX를 사용하여 일반 JavaScript를 대체합니다. 1. JSX는 더 빠르게 실행됩니다. 2. 유형이 안전하며 컴파일 프로세스 중에 처리됩니다. 3. JSX를 사용하여 템플릿을 작성하는 것이 더 빠릅니다.

반응 jsx는 무엇입니까

이 튜토리얼의 운영 환경: windows10 시스템, React16, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

추천: "Programming Video"

React JSX

React는 JSX를 사용하여 일반 JavaScript를 대체합니다.

JSX는 XML과 매우 유사한 JavaScript 구문 확장입니다.

꼭 JSX를 사용할 필요는 없지만 다음과 같은 장점이 있습니다.

JSX는 JavaScript 코드로 컴파일한 후 최적화하기 때문에 실행 속도가 더 빠릅니다.
유형이 안전하며 컴파일 과정에서 오류가 발견될 수 있습니다.
JSX를 사용하여 템플릿을 작성하는 것이 더 쉽고 빠릅니다.

먼저 다음 코드를 살펴보겠습니다.

const element = <h1 id="Hello-nbsp-world">Hello, world!</h1>;

조금 이상하게 보일 수 있습니다. 태그 구문은 문자열도 HTML도 아닙니다.

자바스크립트의 구문 확장인 JSX라고 합니다. React에서 사용자 인터페이스를 설명하려면 JSX를 사용하는 것이 좋습니다.

JSX는 JavaScript 내부에서 구현됩니다.

우리는 요소가 React 애플리케이션을 구성하는 가장 작은 단위이며 JSX는 React에서 요소를 선언하는 데 사용된다는 것을 알고 있습니다.

브라우저 DOM 요소와 달리 React의 요소는 실제로 일반 객체입니다. React DOM은 브라우저 DOM의 데이터 콘텐츠가 React 요소와 일치하는지 확인할 수 있습니다.

React 요소를 루트 DOM 노드로 렌더링하려면 두 요소를 ReactDOM.render() 메서드에 전달하여 페이지에 렌더링합니다.

React 인스턴스

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById(&#39;example&#39;));

참고:

JSX는 JavaScript이므로 다음과 같은 일부 식별자는 class 및 for는 XML 속성 이름으로 권장되지 않습니다. 대신 React DOM은 해당 속성에 className 및 htmlFor를 사용합니다.

JSX 사용

JSX는 아래 예를 보면 알 수 있습니다.

ReactDOM.render(
    <h1 id="Hello-nbsp-world">Hello, world!</h1>,
    document.getElementById(&#39;example&#39;)
);

위 코드에서는 여러 HTML 태그를 중첩할 수 있습니다. 예에서는 p 요소를 사용하여 래핑해야 합니다. 자체 추가 data-myattribute 속성을 정의하고 data- 접두사를 사용하여 사용자 정의 속성을 추가합니다.

React 인스턴스

ReactDOM.render(
    <div>
    <h1 id="PHP中文网">PHP中文网</h1>
    <h2 id="欢迎学习-nbsp-React">欢迎学习 React</h2>
    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

별도의 파일

React JSX 코드를 별도의 파일에 배치할 수 있습니다. 예를 들어 다음 코드를 사용하여 helloworld_react.js 파일을 생성합니다.

ReactDOM.render(
  <h1 id="Hello-nbsp-world">Hello, world!</h1>,
  document.getElementById(&#39;example&#39;)
);

그런 다음 HTML 파일에 JS 파일을 삽입합니다. :

React 예시

<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

JavaScript Expression

JSX에서는 JavaScript 표현식을 사용할 수 있습니다. 표현식은 중괄호 {} 안에 작성됩니다. 예시는 다음과 같습니다.

React 예시

ReactDOM.render(
    <div>
      <h1 id="">{1+1}</h1>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

JSX에서는 else 문을 사용할 수 없지만 조건식(삼항 연산) 표현식을 대신 사용할 수 있습니다. 다음 예에서 변수 i가 1이면 브라우저는 true를 출력하고, i 값이 수정되면 false를 출력합니다.

React 예시

ReactDOM.render(
    <div>
      <h1 id="i-nbsp-nbsp-nbsp-nbsp-True-nbsp-nbsp-False">{i == 1 ? &#39;True!&#39; : &#39;False&#39;}</h1>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

Style

React에서는 인라인 스타일 사용을 권장합니다. CamelCase 구문을 사용하여 인라인 스타일을 설정할 수 있습니다. React는 요소 번호를 지정한 후 자동으로 px를 추가합니다. 다음 예에서는 h1 요소에 myStyle 인라인 스타일을 추가하는 방법을 보여줍니다.

React 인스턴스

var myStyle = {
    fontSize: 100,
    color: &#39;#FF0000&#39;
};
ReactDOM.render(
    <h1 id="PHP中文网">PHP中文网</h1>,
    document.getElementById(&#39;example&#39;)
);

Comments

주석은 중괄호로 작성해야 하며 예는 다음과 같습니다.

React 인스턴스

ReactDOM.render(
    <div>
    <h1 id="PHP中文网">PHP中文网</h1>
    {/*注释...*/}
     </div>,
    document.getElementById(&#39;example&#39;)
);

Array

JSX 템플릿 배열에 삽입을 허용하면 배열이 자동으로 모든 멤버를 확장합니다.

React 인스턴스

var arr = [
  <h1 id="PHP中文网">PHP中文网</h1>,
  <h2 id="学的不仅是技术-更是梦想">学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById(&#39;example&#39;)
);

위 내용은 반응 jsx는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

관련 기사

react中canvas的用法是什么Apr 27, 2022 pm 03:12 PM

在react中，canvas用于绘制各种图表、动画等；可以利用“react-konva”插件使用canvas，该插件是一个canvas第三方库，用于使用React操作canvas绘制复杂的画布图形，并提供了元素的事件机制和拖放操作的支持。

react中antd和dva是什么意思Apr 21, 2022 pm 03:25 PM

在react中，antd是基于Ant Design的React UI组件库，主要用于研发企业级中后台产品；dva是一个基于redux和“redux-saga”的数据流方案，内置了“react-router”和fetch，可理解为应用框架。

React是双向数据流吗Apr 21, 2022 am 11:18 AM

React不是双向数据流，而是单向数据流。单向数据流是指数据在某个节点被改动后，只会影响一个方向上的其他节点；React中的表现就是数据主要通过props从父节点传递到子节点，若父级的某个props改变了，React会重渲染所有子节点。

react中为什么使用nodeApr 21, 2022 am 10:34 AM

因为在react中需要利用到webpack，而webpack依赖nodejs；webpack是一个模块打包机，在执行打包压缩的时候是依赖nodejs的，没有nodejs就不能使用webpack，所以react需要使用nodejs。

react中forceupdate的用法是什么Apr 19, 2022 pm 12:03 PM

在react中，forceupdate()用于强制使组件跳过shouldComponentUpdate()，直接调用render()，可以触发组件的正常生命周期方法，语法为“component.forceUpdate(callback)”。

react是组件化开发吗Apr 22, 2022 am 10:44 AM

react是组件化开发；组件化是React的核心思想，可以开发出一个个独立可复用的小组件来构造应用，任何的应用都会被抽象成一颗组件树，组件化开发也就是将一个页面拆分成一个个小的功能模块，每个功能完成自己这部分独立功能。

react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别；react和vue的虚拟dom都是用js对象来模拟真实DOM，用虚拟DOM的diff来最小化更新真实DOM，可以减小不必要的性能损耗，按颗粒度分为不同的类型比较同层级dom节点，进行增、删、移的操作。

react和reactdom有什么区别Apr 27, 2022 am 10:26 AM

react和reactdom的区别是：ReactDom只做和浏览器或DOM相关的操作，例如“ReactDOM.findDOMNode()”操作；而react负责除浏览器和DOM以外的相关操作，ReactDom是React的一部分。

See all articles

핫 AI 도구

뜨거운 도구

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.