반응이 뭐예요?

본고는Flutterwave의 협찬으로 세계 각지의 고객들이 온라인과 오프라인에서 지불을 하고 지불을 받는 가장 간단한 방식이다.이건 절대 공짜야!
React는 마침 가장 유행하는 자바스크립트 프레임워크로 Stack Overflow Developer Survey(2020)에서 비롯되었다.그것은 다른 두 개의 유행하는 자바스크립트 프레임워크Angular와 Vue의 가장 좋은 대체 방안이다.브라우저에서 빠른 프로그램을 만들 수 있도록 해 줍니다.
근거 official React website:

React is a JavaScript library for building user interfaces

위의 정의에서 용어 사용자 인터페이스도 반응 구성 요소라고 부른다.
하나의 웹 프로그램에서 다시 사용할 수 있도록 템플릿과 같은 구성 요소를 만들 수 있습니다.그것은 완전히 너 자신을 되풀이하지 말라는 원칙을 따른다.
구성 요소의 데이터를 변경하기만 하면 됩니다.JavaScript의 이러한 특성은 복잡한 응용 프로그램에 더 짧은 코드를 쉽게 작성할 수 있게 해줍니다.

구성 요소는 무엇입니까?

어셈블리의 간단한 정의는 다음과 같습니다.

Components are independent and reusable bits of code

JavaScript 함수와 같은 용도로 사용되지만 독립적으로 작동하며 함수를 렌더링하여 HTML(index.HTML)로 되돌려줍니다.
어셈블리에는 세 가지 유형이 있습니다.

클래스 구성 요소

기능 부품

서버 구성 요소

우리는 여기서 기능 구성 요소의 사용법을 볼 것이다.
다음 그림shows part of the official React home page은 여러 부분으로 나뉘어 있습니다.

뒤에 있는 구성 요소 (맨 밑에 있는 세 개의 구성 요소) 를 봅시다.그것은 웹 프로그램에서 다시 사용할 수 있는 구성 요소를 보여 줍니다.

어떻게 React에서 구성 요소를 구축합니까?

Codepen로 설명합시다.
단계:

등록 버튼을 클릭하고 등록합니다(선택 사항).

인코딩 시작 버튼을 클릭합니다.

비트 아이콘을 클릭하여 반응을 설정합니다.

펜 제목 필드에 항목의 제목을 표시합니다(선택 사항).

펜 설명 필드의 항목 설명(선택 사항).

태그 필드에 항목을 표시합니다(선택 사항).

사이드바에서 JS를 선택합니다.

JavaScript 사전 프로세서 드롭다운 목록에서 Babel을 선택합니다.

CDNjs 검색 필드에서 다음을 검색합니다.

반응(선택하고 클릭).

반응dom (선택하고 누르기).

저장 및 닫기 버튼을 클릭합니다.

일반 HTML 및 CSS에서 다음 세 구성 요소의 코드 소스는 다음과 같습니다.
HTML

<section>
  <div class='component-1 component'>
    <h3>Declarative</h3>
    <p>React makes it painless to create interactive UIs...</p>
    <p>Declarative views make your code more predictable...</p>
  </div>

  <div class='component-2 component'>
    <h3>Component-Based</h3>
    <p>Build encapsulated components that manage their...</p>
    <p>Since component logic is written in JavaScript...</p>
  </div>

  <div class='component-3 component'>
    <h3>Learn Once, Write Anywhere</h3>
    <p>We don't make assumptions about the rest of...</p>
    <p>React can also render on the server using...</p>
  </div>
</section>

CSS

section {
  display: flex;
  flex: 0 1 30%;
  -webkit-flex: 0 1 30%;
  margin: 0 auto;
  width: 97%;
  overflow-x: auto;
}

.component {
  margin-left: 5px;
  margin-right: 5px;
  padding: 10px
}

h3 {
  font-size: 1.25rem;
  font-family: sans-serif;
  margin-bottom: 20px;
  color: #6d6d6d;
  padding-top: 0;
  font-weight: 300;
  line-height: 1.3;
}

p {
  margin-top: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 42rem;
}

a {
  background: #bbeffdad;
  background-color: #bbeffdad;
  color: #1a1a1a;
  border-bottom: 1px solid #00000033;
  text-decoration: none;
}

h3,
p {
  font-family: sans-serif;
}

a:hover {
  background: #bbeffd;
  background-color: #bbeffd;
}

@media (max-width: 779px) {
  .component {
    min-width: 50%;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 600px) {
  .component {
    min-width: 80%;
    margin-left: 0;
    margin-right: 0;
  }
}

템플릿 구성 요소

다음 예제에서는 템플릿과 유사한 구성 요소를 생성합니다Adcomponent.

가장 기본적인 형식의 반응 구성 요소는 함수(기능 구성 요소)일 뿐이다.React는 뚱뚱한 화살표 함수와 같은 ES6+ 구문을 지원합니다.

const Adcomponent = props => {...}

여러 React 요소가 있는 어셈블리는 모 피쳐 요소에 배치됩니다.이곳의 부원소는<div>

JSX

<div className="component-1 component">
    <h3>{props.adHeading}</h3>
    <p>{props.adParagraph1}</p>
    <p>{props.adParagraph2}</p>
</div>

모든 Hierarchy React 요소를 괄호에 넣고 DOM (문서 대상 모델) 으로 되돌려줍니다.

return (
    <div className="component-1 component">
      <h3>{props.adHeading}</h3>
      <p>{props.adParagraph1}</p>
      <p>{props.adParagraph2}</p>
    </div>
  );

템플릿과 유사한 기능 구성 요소의 목적은 데이터를 전달하는 것이다.

React 기능 구성 요소 요소<Adcomponent ... />는 속성을 허용합니다.속성 값은 속성 이름을 통해 비슷한 템플릿의 구성 요소에 전달되어 구성 요소 데이터를 변경합니다.

id 선택기를 사용하여 각 기능 구성 요소 요소를 선택합니다.예: document.querySelector("#ad1").

HTML 및 JSX에서 다음 세 구성 요소의 코드 소스는 다음과 같습니다.
HTML

<section>
  <div class='component-1 component'>
    <div id='ad1'></div>
  </div>

  <div class='component-2 component'>
    <div id='ad2'></div>
  </div>

  <div class='component-3 component'>
    <div id='ad3'></div>
  </div>
</section>

JSX

ReactDOM.render(
  <Adcomponent
    adHeading="Declarative"
    adParagraph1="React makes it painless to create interactive UIs..."
    adParagraph2="Declarative views make your code more predictable..."
  />,
  document.querySelector("#ad1")
);

ReactDOM.render(
  <Adcomponent
    adHeading="Component-Based"
    adParagraph1="Build encapsulated components that manage their..."
    adParagraph2="Since component logic is written in JavaScript..."
  />,
  document.querySelector("#ad2")
);

ReactDOM.render(
  <Adcomponent
    adHeading="Learn Once, Write Anywhere"
    adParagraph1="We don't make assumptions about the rest..."
    adParagraph2="React can also render on the server..."
  />,
  document.querySelector("#ad3")
);

전체 JSX 코드는 다음과 같습니다.

const Adcomponent = props => {
  return (
    <div className="component-1 component">
      <h3>{props.adHeading}</h3>
      <p>{props.adParagraph1}</p>
      <p>{props.adParagraph2}</p>
    </div>
  );
};

ReactDOM.render(
  <Adcomponent
    adHeading="Declarative"
    adParagraph1="React makes it painless to create interactive UIs..."
    adParagraph2="Declarative views make your code more predictable..."
  />,
  document.querySelector("#ad1")
);

ReactDOM.render(
  <Adcomponent
    adHeading="Component-Based"
    adParagraph1="Build encapsulated components that manage their..."
    adParagraph2="Since component logic is written in JavaScript..."
  />,
  document.querySelector("#ad2")
);

ReactDOM.render(
  <Adcomponent
    adHeading="Learn Once, Write Anywhere"
    adParagraph1="We don't make assumptions about the rest..."
    adParagraph2="React can also render on the server..."
  />,
  document.querySelector("#ad3")
);

구성 요소가 루트 요소<div id='root'></div>를 불러올 때 HTML과 JSX 파일로 작성한 코드가 더 적습니다.

HTML

<div id='root'></div>

JSX

const Adcomponent = props => {
  return (
    <div className="component-1 component">
      <h3>{props.adHeading}</h3>
      <p>{props.adParagraph1}</p>
      <p>{props.adParagraph2}</p>
    </div>
  );
};

const app = (
  <section>
    <Adcomponent
      adHeading="Declarative" 
      adParagraph1="React makes it painless to create interactive..." 
      adParagraph2="Declarative views make your code more..."
    />
    <Adcomponent
      adHeading="Component-Based" 
      adParagraph1="Build encapsulated components that manage their..." 
      adParagraph2="Since component logic is written in JavaScript..."
    />
    <Adcomponent
      adHeading="Learn Once, Write Anywhere" 
      adParagraph1="We don't make assumptions about the rest..."
      adParagraph2="React can also render on the server..." />
  </section>
);

const rootNode = document.querySelector("#root");
ReactDOM.render(app, rootNode);

above code snippet는 응용 프로그램에서 구성 요소를 한 번 렌더링할 수 있음을 보여 줍니다.

용어

JSX

JSX stands for JavaScript XML. JSX allows us to write HTML-like in Babel (JavaScript)

React에서 제공하는 사용자 정의 HTML이지만 JavaScript로 배후에서 컴파일됩니다.JSX는 React의 문법사탕일 뿐입니다.

반응 상태

ReactDOM is a package that provides DOM (Document Object Model) specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page.

ReactDOM은 개발자에게 API 방법, 속성, 대상 등을 제공합니다. 예를 들어 ReactDOM 대상의.render() 방법입니다.

도구

Props are arguments passed into React components. Props are passed to components via HTML attributes.

구성 요소나 프로그램이 화면에 나타날 때 상태를 바꿀 수 있습니다.

바벨

Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript that can be run by older JavaScript engines

CSS 자동 접두사 및 브라우저 호환성(CSS 및 JavaScript)을 담당합니다.즉, 모든 브라우저에 적용되는 코드를 작성하는 것이다.
JavaScript 프로그래밍 언어(ECMAScript 2015+)의 최신 기능을 사용하는 유틸리티입니다.
React를 설치하면 Node package manager(NPM)와 같은 모든 패키지 관리자를 통해 여러 패키지와 종속 항목을 찾을 수 있습니다.json 파일.예를 들어, webpack 추가 패키지가 포함되어 있습니다.

웹 패키지

Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource (asset)

Babel file 버튼을 클릭한 다음 View Compiled 버튼을 클릭하여 JSX(사용자 정의 HTML)를 JavaScript로 컴파일하는 React 보기
해피 코딩!!!

Techstack | 진동파

Techstack 기사, Flatter Wave가 협찬합니다.FlatterWave는 전 세계 고객의 온라인 및 오프라인 결제를 위한 가장 간단한 방법입니다.이건 절대 공짜야!이외에 signup 구매할 때 달러 바터 카드를 받을 수 있습니다.인터넷 쇼핑몰을 열어 당신의 사업을 세계 어느 곳에나 가져다 놓으세요.
Sign up today to get started
Support 내가 한 일은 나로 하여금 계속 무료 콘텐츠를 제작하게 했다.