프로젝트 55/100- 통과 2021 React 퀘스트 응용

어이!내 임무는 100명이 반응하도록 하는 것이다.js 프로젝트는 3월 31일에 끝납니다.개발자 파일이나 업데이트에 관심을 가져 주십시오. 문제가 있으면 언제든지 연락 주십시오.지지해 주셔서 감사합니다!
배포된 프로젝트 링크: Link
repo-with json 서버에 링크: github
재구매 계약 링크 - 백엔드 없음: github
이 블로그는 브래드 트래퍼시가 2021년 리액트 속성반에서 배운 것을 정리한다.나는 때때로 기초로 돌아가는 것을 좋아한다. 내가 아주 잘 아는 것만 수업을 듣거나 과외를 하는 것을 좋아한다. 왜냐하면 너는 언어의 기초 부분이 어떻게 일을 하는지 복습할 기회가 있기 때문이다. 그리고 네가 더욱 높은 주제에서 길러낸 습관을 되돌아보면 매우 좋다.
나는 이런 강좌를 정말 좋아한다. 왜냐하면 너는 이전에 배웠지만 한동안 사용하지 않았던 기술을 다시 얻을 수 있기 때문이다.총결산으로서 저는 이 프로젝트를 구축할 때 토론한 주요 주제를 하나하나 되돌아보고 영상 과정의 텍스트 반주 같은 총결산으로 저(다른 개발자)가 원하는 상황에서 참고할 수 있도록 하겠습니다.동영상 설명 중의 시간 스탬프를 통해 유튜브의 주제를 찾을 수 있다.

1. React 애플리케이션 만들기

create-react-app은 페이스북 리액트 팀이 유지하는 라이브러리로 개발자가 신속하게 시작하고 실행할 수 있도록 한다.일반적으로 React 애플리케이션을 시작하는 기본 방법으로 간주됩니다.그것을 사용하려면 npm를 설치하고 npx를 설치한 다음 실행할 폴더에서 npx create-react-app .을 실행하십시오.

2.JSX

JSX는 순수한 자바스크립트로 요소를 만드는 속기 언어로 대부분의 경우 HTML처럼 보이고 느껴진다.만약 네가 HTML을 안다면, 너는 JSX로 글을 쓰는 것을 이해할 수 있을 것이다.
비교 생성
JSX 요소 없음:

JSX가 없어요.

const appEl = document.getElementById("app")
const myParagraph = document.createElement("<p>");
myParagraph.innerText("I am a paragraph")
appEl.appendChild(myParagraph)

JSX 사용

<div id="app">
  <p>I am a paragraph!</p>
</div>

3. JSX의 표현식

JSX의 또 다른 중요한 특징은 코드에 자바스크립트를 직접 작성할 수 있다는 것이다. 방법은 괄호 {}을 사용하여 페이지를 나타낼 때 계산하는 것이다.이전에 CMS와 같은 템플릿 언어를 다른 곳에서 사용한 적이 있다면, 이것은 매우 익숙할 것입니다.

<div id="app">
  <p>I am a paragraph!</p>
  <p>I have been able to drive for {29 - 16} years!</p>
</div>

4. 어셈블리 생성

구성 요소는 JSX 코드를 반환하는 Javascript 함수로, 전체 응용 프로그램에 이러한 코드를 포함하고 재사용할 수 있습니다.그것들은 함수를 만들고 Return 문장에 JSX를 작성함으로써 이루어진다.다른 곳에서 사용하려면 ES6 모듈 구문을 사용하여 내보내야 합니다.

5. 구성 요소 도구

Props은 React를 인코딩할 때 사용하는 단어로, "속성"의 약어입니다.이 차이점은 JS 객체의 키 값 쌍을 설명하는 데도 속성이 사용되기 때문에 유용합니다.그것도 비교적 짧다.
도구를 부모 어셈블리에 전달하려면 부모 어셈블리의 JSX 요소에 단어를 추가하고 그 뒤에 서브어셈블리에 전달할 데이터를 추가합니다.서브어셈블리에서는 props을 함수 매개 변수로 사용하여 어셈블리의 도구에 액세스할 수 있습니다.

func ChildComponent(props) {
  return (
    <p>My name is {props.name}</p>
  )
}

func ParentComponent() {
  return (
    <div>
      <ChildComponent name="James" />
    </div>
  )
}

6. 아이템 유형

PropsTypes는 구성 요소에 전달된 도구가 특정한 데이터 형식에 속하는지 검증하는 라이브러리를 가리킨다.라이브러리 prop-types 가져오기를 통해 사용 가능

import PropTypes from `prop-types`

function MyComponent = (props) => (...)

MyComponent.propTypes = {
  name: PropTypes.string
} 

name 아이템에 string 데이터 유형이 없으면 상술한 조작은 오류를 일으킬 수 있습니다.
이와 유사하게, 이 기기의 defaultProps 속성을 사용하여 도구에 기본값을 지정하여 이 하위 구성 요소에 데이터가 전달되지 않도록 할 수 있습니다.

function MyComponent = () => (...)

MyComponent.defaultProps = {
  name: "James"
} 

7. 스타일

React 어셈블리의 스타일을 설정할 수 있는 여러 방법이 있습니다.지정된 스타일을 JS 속성(예: backgroundColor: "green")으로 지정하여 인라인 스타일 또는 객체 스타일을 사용할 수 있습니다.
그러나 가장 좋아하는 것은 모든 주요 구성 요소에 자신의 CSS 스타일시트를 제공하고 스타일시트를 구성 요소로 직접 가져오는 것입니다.이것은 React 응용 프로그램의 모듈화에 대한 보충이며 구성 요소의 스타일을 쉽게 포지셔닝할 수 있도록 합니다.

8. 활동

React의 이벤트는 로컬 JSX 이벤트 처리 프로그램(예를 들어 onClick과 onChange)을 사용하여 구성 요소에 프로그래밍할 수 있습니다.네가 이 아이템들에게 준 값은 어떤 특정 사건이 발생하면 어떤 일이 일어날지 결정한다.

9. 를 사용하여 JSX 요소를 작성합니다.지도 ()

ES6 Javascript array methods은 React에 널리 사용됩니다.그것들은 우리가 주어진 데이터 그룹의 상황에서 동적 구성 요소를 만들 수 있도록 합니다.

const names = ["James","Rufus","Mary"];

const App = () => (
  <div className="app">
    <ul>
      {names.map((name,idx) => <li key={idx}>{name}</li>)}
    </ul
  </div>
)

10. 사용 상태

React 구성 요소는 상태가 있습니다. 구성 요소를 위한 변수로 간주될 수 있습니다. (도구를 통해 다른 곳에서 사용할 수 있지만.)State는 변경된 값을 반영하도록 State가 변경되면 어셈블리가 새로 고쳐지기 때문에 일반적인 이전 변수와 다릅니다.
React useState 훅을 사용하여 기능 어셈블리의 상태를 생성합니다.이것은 비구조화된 그룹 문법을 사용하여 상태 변수를 명명하고 변수를 변경하는 함수를 보존합니다.또한 어셈블리를 렌더링할 때 상태의 기본값도 설정합니다.

import React, {useState} from 'react

function MyComponent () {
  const [name,setName] = useState('') 

  return (...)
}

11. 글로벌 국가

이 강좌의 전역 상태는 상위 구성 요소(예를 들어 App)에서 상태 변수를 보존하여 전체 응용 프로그램에서 이 상태를 더욱 쉽게 사용할 수 있도록 하는 것을 말한다.전역 상태를 만드는 방법은 여러 가지가 있지만 가장 간단한 방법은 부모 구성 요소에서 상태를 만들고 도구를 통해 하위 구성 요소에 제공하는 것이다.
이것은 시간을 절약하지만, 여러 구성 요소가 표시하는 데이터를 동시에 수정할 수 있도록 해 줍니다. 이것은 매우 편리합니다.

12. 반응

React icons은 제가 방금 들은 라이브러리입니다. 유행하는 아이콘 라이브러리 몇 개를 응용 프로그램에 동시에 가져올 수 있도록 합니다.CDN을 추적하는 대신 다시 사용하겠습니다.

13. 버팀목 시추

도구 연습은 도구를 여러 단계로 아래로 보내는 하위 단계의 실천을 말한다. 함수의 경우 부모 구성 요소에 저장된 함수를 하위 함수에 전달된 이벤트나 데이터를 정확하게 사용하도록 한다.
함수는 다른 모든 도구와 같이 하위 구성 요소를 통해 전달될 수 있기 때문에 본질적으로 부모 구성 요소에서 전송된 매개 변수에 대한 인용을 확보하기 위해서입니다.

14. 옵션 메시지

함수의 변수와 상태에 저장된 데이터에 따라 다르게 표시되는 JSX 요소를 만들 수 있습니다.이 작업은 항상 JSX의 조건문을 사용하여 수행됩니다.보시는 주요 조건문은 3원과 "short-circuited" and 연산자입니다.

15. 조건 스타일

조건 스타일은 구성 요소가 어떻게 나타나야 하는지 확인하기 위해 조건을 사용합니다.이것은 구성 요소 상태나 응용 프로그램에 전달되는 데이터 디스플레이 스타일을 기반으로 하는 편리한 방법이다.
다음은 이 프로그램의 예입니다. 창을 열거나 닫는지에 따라 단추의 색을 설정합니다.

<Button
  color={showAdd ? 'gray' : 'green'} 
  text={showAdd ? 'Close' : 'Add'} 
  onClick={onAdd} 
/>

16. 관리 대상 부품

폼 등 데이터를 받는 구성 요소도 편집할 때 자주 데이터를 표시합니다.예를 들어, 텍스트 입력은 입력할 때 요소에 저장된 데이터를 표시합니다.우리는 더욱 광범위한 응용 프로그램이 이 데이터를 사용할 수 있도록 상태를 업데이트하고 이 데이터를 어디에 저장해야 한다.
입력에서 데이터를 가져와 상태로 저장하고 value 속성을 사용하여 요소의 값을 상태로 저장하는 변수로 설정하는 방법

17. React에서 양식 제출

HTML 양식의 표준 비헤이비어는 URL의 양식 데이터를 사용하여 페이지를 새로 고칩니다. 일반적으로 양식에서 수행하려는 작업이 아니기 때문에 개발자가 양식의 처리 함수에서 e.preventDefault()을 사용하는 것을 자주 볼 수 있습니다.
양식 제출은 onSubmit 이벤트 처리 프로그램에서 처리됩니다.

18. 생산을 위해 건설

React는 브라우저 본체에서 읽지 않기 때문에 서버에 배치할 수 있도록 구축 단계에서 컴파일해야 합니다.create-react-app을 사용하면terminal 명령 npm run build을 사용하여build 폴더를 만들 수 있습니다.

19.JSON 서버

이 강좌에서 내가 가장 좋아하는 새 라이브러리 중 하나는 npm 가방 json-server이다.이것은 로컬 서버를 만들고 외부 서버처럼 전방 응용 프로그램과 상호작용을 할 수 있도록 합니다.이것은 서버와 노드가 외부이기 때문에 테스트에 매우 유용합니다.

20.fetch（）

Fetch API는 React가 아니라 네이티브 자바스크립트 API입니다. 실제로는 멋진 라이브러리일 뿐입니다. 네이티브 XMLHTTPRequest API보다 서버와 상호작용하기에 더 적합합니다.fetch API는 모든 HTTP 요청을 처리할 수 있으며 매우 유연합니다.

21. 효과 사용

useEffect는 기능 구성 요소의 본체 React 갈고리입니다. 프로그램에서 함수를 호출하는 시간을 변경할 수 있습니다.페이지를 로드하고 구성 요소를 렌더링할 때useEffect를 호출합니다.상태 변수를 지정하면 상태 변수가 변경될 때 호출할 수도 있습니다.

22. 반응 공유기

React Router는 또 다른 npm 패키지입니다.URL 경로의 내용에 따라 다른 구성 요소를 표시할 수 있습니다.어셈블리의 경로설정도 생성할 수 있습니다.