React.js에 대한 빠른 소개

React는 브라우저 내에서 완전히 렌더링되는 동적 웹사이트 생성을 지원합니다. 핵심요소는 HTML과 XML을 닮은 문법인 JSX입니다.

Language	Full Form	Use	Tags
HTML	Hyper Text Markup Language	Website Development	Predefined tags (e.g., H1, H2, P)
XML	Extensible Markup Language	Data Structuring	Customizable Tags
JSX	JavaScript XML	Combines HTML and JavaScript	HTML & Custom Tags

예시

HTML

<code class="language-html"><div>
  <h1>This is heading 1</h1>
  <p>This is an example paragraph in HTML</p>
</div></code>

XML

<code class="language-xml"><example><title>XML Example
  <note>This is a note</note><data1>Example Data</data1><data2>Example Data</data2></title></example></code>

JSX

<code class="language-javascript">function ExampleReactComponent() {
  return (
    <div>
      <h1>This is heading 1</h1>
      <p>This is an example paragraph in JSX</p>
    </div>
  );
}</code>

HTML, XML, JSX의 유사점은 분명합니다. JSX는 JavaScript 내에서 HTML을 고유하게 통합하므로 이름은 JavaScript XML입니다.

이러한 HTML과 JavaScript의 융합을 통해 동적 HTML 조작이 가능해졌습니다. 예를 들어, 버튼 클릭으로 수업 이름을 전환할 수 있습니다.

React 구성요소

React는 JSX를 반환하는 사용자 정의 구성 요소 정의를 용이하게 합니다. 기본적으로 React 구성 요소는 JSX를 생성하는 JavaScript 함수입니다.

루트 React 구성요소를 렌더링하면 JSX가 자동으로 HTML로 변환되어 웹페이지에 통합됩니다. React를 사용하면 다른 구성요소 내에 포함할 사용자 정의 구성요소(사용자 정의 태그와 유사)를 생성할 수 있습니다.

다음은 ExampleReactComponent:

를 활용하는 구성요소입니다.

<code class="language-javascript">function RootReactComponent() {
  return (
    <div>
      <h1>This is the main Component</h1>
      <ExampleReactComponent />
    </div>
  );
}</code>

소품

HTML 속성과 유사하게 React 구성요소는 props를 사용합니다.

<code class="language-javascript">function PropsExample(props) {
  console.log(props); // Prints { exampleValue: "example-value" }
  return (
    <div>
      <h1>Props Example</h1>
      {props.exampleValue}
    </div>
  );
}

function MainComponent() {
  return (
    <div>
      <h1>This is the Main Component</h1>
      <PropsExample exampleValue={"example-value"} />
    </div>
  );
}</code>

렌더링 MainComponent은 PropsExample 인수로 { exampleValue: "example-value" }을 사용하여 props을 호출합니다. JavaScript 변수는 {}.

을 사용하여 JSX에 포함됩니다.

상태

데이터는 일반적으로 표시를 위해 변수에 저장됩니다. React는 데이터 관리를 위해 "상태"를 활용하여 getter/setter 메커니즘으로 작동합니다. 상태가 수정되면 React는 구성 요소의 HTML을 자동으로 업데이트합니다.

이 예는 상태 변경 시 자동 HTML 업데이트를 보여줍니다.

<code class="language-javascript">import { useState } from 'react';

function IncrementDecrement() {
  const [value, setValue] = useState(0); // Initial value: 0

  function increment(e) {
    setValue(value + 1);
  }

  function decrement(e) {
    setValue(value - 1);
  }

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      {value}
    </div>
  );
}</code>

Vite로 React 앱 구축

Vite와 같은 도구는 React 구성 요소와 JSX를 브라우저에서 실행 가능한 JavaScript로 묶는 작업을 간소화합니다.

React 프로젝트를 시작하려면:

<code class="language-bash">npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev</code>

결론

이 React.js 소개는 기본적인 이해를 제공합니다. Vite 프로젝트를 설정한 후 이해력을 높이기 위해 React 구성 요소를 만들어 실험해 보세요. 추가 학습 자료는 https://www.php.cn/link/27a5eaafdb88c45dd61732d6a6493421

에서 확인할 수 있습니다.

위 내용은 React.js에 대한 빠른 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!