React 원료약 소개

17352 단어 react codenewbie javascript

안녕, 세상.👋

My Review of Kent C. Dodd's EpicReact.Dev Series의 세 번째 글을 환영합니다. 이 글은 EpicReact.Dev에서 제공한 Kent C. Dodds 현장 자료를 바탕으로 합니다.만약 이 시리즈의 이전 문장을 읽지 않았다면, 이 문장을 계속 읽기 전에 읽으십시오.
다음은 이전 글입니다.

Epic React: Introduction

Epic React: Javascript You Need To Know For React

이 문서에서는 React에 대한 기본 지식을 학습합니다.기본 HTML과javascript는 React raw API로만 처리됩니다.본문에서 우리는 심지어 어떤 JSX도 사용하지 않을 것입니다. (JSX가 무엇인지 모르신다면 걱정하지 마십시오. 우리는 다음 글에서 그것을 이해할 것입니다.)React 원시 API 사용이 어려운 이유를 확인할 수 있습니다.많은 사람들이 React를 배우기 전에 이러한 기초 지식을 뛰어넘었지만, 이러한 추상적인 지식을 이해하는 것은 React의 일부 내용을 이해하는 데 매우 중요하다. 우리는 다음 글에서 이러한 내용을 볼 것이다.
우리는 세미나의 유사한 형식, 즉 모든 주제에 대해 우리가 실현하고자 하는 목표를 먼저 소개한 다음에 이 목표를 어떻게 실현하는지 볼 것이다.

카탈로그

Basic JS "Hello World"

Introduction

Generate DOM Nodes

Intro to Raw React APIs

Introduction

Raw React APIs

Nesting Elements

기본 JS "Hello World" 입니다.

소개

우리의 목표는 기본 자바스크립트 렌더링 Hello World 을 사용하는 것이다.
현재 HTML에는 다음과 같은 내용이 있습니다.

<div id="root"></div>

HTML은 다음과 같습니다.

<div id="root">
    <div class="container">Hello World</div>
</div>

DOM 노드 생성

우리는 자바스크립트document API를 사용하여 상술한 결과를 실현할 수 있다.

// Fetches the element with id as `root` from DOM
const rootElement = document.getElementById("root")

// Creates an element with `div` tag
const helloWorldElement = document.createElement("div")
helloWorldElement.textContent = "Hello World"
helloWorldElement.className = "container"

// Appends the helloWorldElement to the rootElement
rootElement.append(helloWorldElement)

우리가 여기서 한 일을 분석해 봅시다.

DOM에서 id 가 root 인 요소를 가져옵니다.

새 DOM 요소를 만들고 속성을 설정합니다.

새로 생성된 요소를 DOM에서 가져온 루트 요소에 추가합니다.

비록 위의 코드는 매우 명확하지만, 나는 그것을 몇 단계로 분해한다. 왜냐하면 다음 절에서, 우리는 이 정확한 절차를 사용하여 이 점을 실현하지만, React API를 사용해야 하기 때문이다.

원본 반응 API 소개

인용 2

React는 이전에 백그라운드에서 보았던 동일한 문서 API를 사용합니다.하지만 이를 추상화하여 사용하기 쉽고 직관적인 API를 제공합니다.
이전과 같은 Hello World 태그를 만들어 보겠습니다. 이번에는 React를 사용하겠습니다.

원시 반응 원료약

// Fetches the element with id as `root` from DOM
const rootElement = document.getElementById("root")

// Creates an element with `div` tag
const helloWorldElement = React.createElement("div", { 
    className: "container", 
    children: "Hello World" 
})

// Appends the helloWorldElement to the rootElement
ReactDOM.render(helloWorldElement, rootElement)

이 코드를 이해하기 전에 React과ReactDOM를 사용했습니다. 이것은 기본적인javascript의 일부분이 아닙니다.따라서 우리가 그것을 사용할 수 있기 전에 그것을 추가해야 한다.
CDN 스크립트를 사용하여 추가할 수 있습니다.CDNunpkg을 사용합니다.

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

이것을 추가하면 자바스크립트에서 React 및 ReactDOM 에 접근할 수 있습니다.
이제 코드를 이해해 봅시다.

DOM에서 id 가 root 인 요소를 가져옵니다.

이 부분은 변경되지 않았습니다.우리는 루트 요소를 얻기 위해 여전히 document API를 사용하고 있다.

새 DOM 요소를 만들고 속성을 설정합니다.

여기서 React.createElement()라는 새로운 React API를 소개합니다.

매개변수 2개 필요

우리가 만들 HTML 태그입니다.

속성과 우리가 설정할 값.

주의, 우리는 children라는 새로운 속성을 도입했다.

children 기본적으로 우리가 만든 HTML 태그 내부에 필요한 내용을 대체합니다.

따라서 렌더링 <div>Hello World</div> 을 원한다면 div 표시가 있는 React 요소를 만들고 하위 속성을 Hello World 로 설정합니다.

새로 생성된 요소를 DOM에서 가져온 루트 요소에 추가합니다.

ReactDOM을 사용하여 렌더링합니다.해당 API는 ReactDOM.render()

두 개의 인자가 더 필요합니다.

우리가 부가해야 할 원소.

원소, 우리는 상술한 원소를 여기에 추가하기를 희망한다.

우리가 element1 뒤에 element2 를 붙이고 싶다면.그럴 거야ReactDOM.render(element1, element2).

React API와 document API의 유사성을 보고 감상할 수 있습니까?우리가 알고 있는 지식에 따라 React를 사용하여 다음 표시를 만듭니다.

중첩 요소

React를 사용하여 다음 태그를 작성해 보겠습니다.

<div id="root">
    <div>
        <span>Hello</span>
        <span>World</span>
    </div>
</div>

이 동작을 실행하기 전에, 우리가 전에 본 children 속성도 수조를 그 값으로 받아들인다는 것을 알아야 합니다.
예를 들어, 다음 두 호출은 동일한 HTML 출력을 생성합니다.

// 1.
React.createElement("div", { children: "Hello World" })

// 2.
React.createElement("div", { children: ["Hello", " ", "World"] })

이제 우리는 이 점을 알게 되었다. 주어진 표시를 만들어 보자.

// Fetches the element with id as `root`
const rootElement = document.getElementById("root")

// Creates a `span` element with content as `Hello`
const helloElement = React.createElement("span", {children: "Hello"})

// Creates a `span` element with content as `World`
const worldElement = React.createElement("span", {children: "World"})

// Let's put the above two elements in to a single div
const helloWorldElement = React.createElement("div", {
    children: [helloElement, worldElement]
})

위의 코드는 우리가 원하는 HTML 태그를 만들 것입니다.
주:
반응하다createElement도 2개 이상의 매개변수를 수용할 수 있습니다.
다음 두 호출은 같은 내용을 생성합니다.

// 1.
React.createElement("div", {children: [element1, element2, element3]})

// 2.
React.createElement("div", {}, element1, element2, element3)

따라서 기본적으로 압축 children 수조를 풀고 다른 매개 변수로 추가할 수 있다.
지금 이대로.

다음은 무엇입니까

이 문서에서는 React 원시 API에 대한 자세한 내용을 볼 수 있습니다.따라서 많은 원소가 있고 모든 원소가 서로 다른 속성을 가지고 있을 때 이런 코드를 작성하는 것은 좀 어려워진다.
이것이 바로 React가 우리에게 간략한 방법을 제공하고 JSX 라는 형식으로 코드를 작성하는 이유입니다. 이 형식은 HTML 과 약간 유사해 보입니다.다음 글에서는 JSX 에 대한 모든 내용을 볼 수 있고, 사용자 정의 구성 요소를 만들고 CSS를 사용하여 스타일 설정을 하는 방법도 볼 수 있습니다.