반응하기위한 초보자 가이드

Unsplash에 Alexander Andrews의 사진

더 기술적 인 내용을 다시 작성하고 싶습니다. React는 내가 가장 좋아하는 기술 중 하나이므로 React 소개를 만들겠다고 생각했습니다! 이 게시물에는 HTML 및 JavaScript에 대한 지식이 필요합니다. React와 같은 라이브러리로 이동하기 전에 이것들을 알아야한다는 확고한 견해입니다!

반응이란?

React는 Facebook 개발 팀이 2013 년에 구축 한 JavaScript 라이브러리입니다. React는 사용자 인터페이스를보다 모듈 식 (또는 재사용 가능)으로 유지 관리하기 쉽게 만들고 싶었습니다. React의 웹 사이트에 따르면 "자체 상태를 관리하는 캡슐화 된 구성 요소를 만든 다음 구성하여 복잡한 UI를 만드는 데 사용됩니다."

나는 처음부터 React를 썼기 때문에이 글에서 Facebook 예제를 많이 사용할 것입니다!

Facebook이 좋아요에서 반응으로 전환 한 것을 기억하십니까? 게시물을 좋아하는 대신 이제 마음, 웃는 얼굴 또는 모든 게시물에 반응 할 수 있습니다. 이러한 반응이 주로 HTML로 이루어 졌다면 모든 좋아하는 것을 반응으로 바꾸고 작동하는지 확인하는 것은 엄청난 일입니다.

여기 React가 등장합니다. "문제 분리"를 구현하는 대신 React에는 다른 아키텍처가 있습니다. 이 아키텍처는 구성 요소의 구조에 따라 모듈성을 향상시킵니다.

오늘은 CSS를 별도로 유지하지만 원하는 경우 해당 구성 요소를 구체적으로 만들 수도 있습니다!

반응 대 바닐라 JavaScript

"vanilla"JavaScript에 대해 이야기 할 때 일반적으로 JQuery, React, Angular 또는 Vue와 같은 추가 라이브러리를 사용하지 않는 JavaScript 코드 작성에 대해 이야기합니다. 이것들과 프레임 워크에 대해 더 자세히 읽고 싶다면 웹 프레임 워크에 대한 게시물을 가지고 있습니다.

시작하기 전에 몇 가지 간단한 메모

  • 이 튜토리얼을 좀 더 간결하게 만들기 위해 일부 코드 예제에는 이전 또는 이후가 있습니다. 이것은 우리가 일부 코드를 생략했음을 의미합니다.
  • 어떤 위치에서 Git diff를 사용하여 변경되는 코드 줄을 표시합니다. 복사하여 붙여 넣은 경우 줄의 시작 부분에서 +를 삭제해야합니다.
  • 각 섹션의 완성 된 버전이 포함 된 전체 CodePens가 있으므로이를 사용하여 캐치 업을 할 수 있습니다!
  • 튜토리얼에 필수적이지 않은 고급 개념은 인용 부호로 표시됩니다. 이것들은 흥미로운 사실입니다!

설정

프로덕션 React 애플리케이션을 작성하는 경우 Webpack과 같은 빌드 도구를 사용하려고합니다. React는 기본적으로 브라우저에서 작동하지 않는 일부 패턴을 사용하므로 Webpack은 코드를 번들로 제공합니다. React 앱 만들기는 대부분의 구성을 수행하므로 이러한 목적에 매우 유용합니다!

지금은 개발 목적으로 만 사용되는 React CDN을 사용할 것입니다! 또한 비표준 JavaScript 기능을 사용할 수 있도록 Babel CDN을 사용할 것입니다 (나중에 자세히 설명하겠습니다).