우리 리액션에 대해 깊이 토론합시다(3부분)

지난 글과 함께 우리는 우리의 프로젝트를 설정하고 실제 발생한 일에 대해 잡담을 나누었다.하지만 이제 코드를 작성하자.이 프로젝트에서, 우리는 하나의 단추가 계수를 증가시키고, 다른 단추가 계수를 감소시키는 계수기를 만들 것이다.
선택한 코드 편집기를 열고 저희 index.jsx 로 이동합니다. 모든 동작이 여기에서 진행됩니다.이제 상관하지 말자index.html와index.css.

우리 위에 쓴 코드를 설명해 봅시다.

import React from 'react'

위 코드에서, 우리는 node_modules 폴더에서React 라이브러리를 가져왔습니다. (직접 갈 수 있습니다. react 라는 폴더를 볼 수 있습니다.) 이것은 필수적이며, React 코드를 작성한 모든 페이지에서 가져올 것입니다.

import ReactDOM from 'react-dom`

위의 코드를 사용하면 React DOM을 파일로 가져옵니다. 이것은 입문 파일에서만 필요합니다. (우리의 예에서 index.jsx). 이 코드를 사용하면 페이지를 보여 줍니다.
렌더링은 브라우저에 React 파일에서 작성한 내용만 표시합니다.
마지막으로, 우리는 웹 페이지를 제공하기 위해 render() 함수를 호출했다.이 방법은 두 개의 매개 변수가 필요합니다. 첫 번째는 내용을 렌더링하고, 두 번째는 렌더링 위치입니다.우리는 렌더링 Hello React 을 선택하고 id: <div> 의 root 요소에서 렌더링을 합니다.

ReactDOM.render('Hello React', document.getElementById('root'))

코드를 편집합시다. 코드를 두 번째 줄 아래에 써서 마지막에 렌더링할 수 있습니다. 그러나 만약 그것이 사이트라면?페이지와 몇 개의 링크가 가득합니까?우리의 코드는 매우 길어서 이것은 매우 불편하다.
반대로 코드를 모듈이나 다른 파일로 나누어 index.jsx에 보여 드리겠습니다.우선, 우리는 App.jsx라는 새 파일을 만들었다

이것은 첫 번째 일입니다. 지금 모듈에서 'React' 를 가져오라고 합니다. (아직 답이 표시되지 않았습니다. 위의 힌트를 참고하십시오.)구성 요소를 만듭니다.
구성 요소란?:구성 요소는 JavaScript 함수나 클래스로 간단하게 정의할 수 있으며, 이 함수에는 HTML 페이지의 간단한 제목이 포함되어 있으며, 다른 곳에서 사용할 수 있습니다.이것은 우리에게 리액션이 순수한 HTML보다 우수하다는 장점을 가져왔다. 이것이 바로 중용성이다.우리가 추첨 게임을 하나 가지고 있다고 상상해 보세요.HTML에서, 우리는 9개의 네모난 블록 중 하나하나에 대해 별도의 코드를 작성해야 하며, 누르면 무슨 일이 일어날지 알아야 한다.React에서 우리는 간단하게 정사각형을 위해 코드를 작성하고 9번 반복해서 사용할 수 있기 때문에 코드가 더욱 짧고 생산 효율이 높다.App 구성 요소에서 App라는 함수를 만듭니다.화살표 함수일 수도 있고, 일반 함수일 수도 있어, 괜찮아.
우리의 함수는 <div> 표시를 만들고 'Hello World' 를 쓰는 되돌아오는 방법이 있습니다.<div>에 탭을 추가하고 더 많은 것을 쓸 수 있습니다.이것은 또 다른 중요한 규칙을 가져왔다. 반환 함수는 단지 하나의 것만 반환할 수 있는데 우리의 예에서 하나<div>이다.

우리는 코드를 저장하고 실행할 수 있지만, 등등, 우리는 여전히 Hello React를 볼 수 있다.이것은 npm run start가 우리의 입구점이기 때문이다. 우리는 그것을 index.jsx에 연결하지 않았기 때문에 우리는 여전히 낡은 코드를 볼 수 있다.App.jsx를 App.jsx에 가져오려면 먼저 함수index를 기본 내보내기로 내보내야 합니다. 아래와 같습니다.

현재 우리는 이미 완성되었다. 우리의 App 는 프로젝트의 모든 문서에서 볼 수 있다.아직 변경 사항이 없습니다. 변경 사항이 없습니다. App.jsx. index.jsx 에서 App 파일로 가져오겠습니다.

파일에 App.jsx나 .js를 추가할 필요가 없습니다. Snowpack 도구는 자동으로 처리됩니다. (JS 파일에만 적용되며, CSS나 다른 파일이라면 확장자를 추가할 것입니다.)첫 번째 매개변수에서 응용 프로그램을 렌더 객체로 설정합니다.우선, 우리는 제거했다."Hello React"메시지를 작성한 다음 가져오는 내용(.jsx을 HTML처럼 작성합니다(태그 기호 사이, <>).아래처럼

끝 표시가 없는 어떤 표시도 여기에 보충할 수 있도록 허락해 주십시오. 예를 들어 App 표시는 반드시 끝에 <br>, 즉 /가 있어야 합니다. 입력만 하면 <br/> 오류가 발생합니다.그래서 우리는 그것을 가지고 그것을 보존하고 운행했다.

봐라!우리는 지금 거기에 Hello World를 썼다.다음 글에서는 실제로 카운터 프로그램을 구축하고 CSS를 추가합니다.임의로 추가하거나 변경하거나 할 수 있습니다.더 큰 도전을 원한다면, 새로운 구성 요소를 만들고 <br> 가져와서 App.jsx 처럼 보여주고, 즐거움을 계속 누리십시오.