반응 시작하기

이제 막 JavaScript, HTML 및 CSS에 익숙해지기 시작했지만 이제 웹 개발자 여정에서 다음 논리적 단계가 무엇인지 궁금하십니까? 그에 대한 답은 React입니다.

React는 Meta에서 만들고 유지 관리하는 JavaScript 라이브러리입니다.
사용하기 쉽고 빠르며 확장 가능합니다. 개발자는 이를 사용하여 페이지를 다시 로드하지 않고 데이터를 수정할 수 있는 복잡한 웹 애플리케이션을 구축합니다.

우리는 사용자 인터페이스를 구축하기 위해 React를 사용하고 다양한 UI 요소를 React가 구성 요소라고 부르는 것으로 분할합니다.

React'sofficial documentation on components는 이를 훌륭하게 요약합니다.

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

정말 깔끔하죠? 앱의 다양한 구성 요소에서 작업하는 것이 바닐라 JavaScript의 단일 페이지index.html에서 길을 잃는 것보다 훨씬 낫습니다.

설치

React를 시작하기 전에 컴퓨터에 Node가 설치되어 있는지 확인하세요. Node를 설치하는 데 문제가 있는 경우 official documentation을 참조하십시오.

내가 권장하는 것은 Node 17에 여러 JS 라이브러리에 문제가 있기 때문에 Node 16에 있는지 확인하는 것입니다. nvm list로 터미널을 체크인할 수 있습니다. ->는 어느 것이 기본값인지 알려줍니다.

nvm list

->     v16.13.0
        v17.0.1
         system
16 (-> v16.13.0)

Node 16이 기본 버전이 아닌 경우 다음 명령을 사용하여 설치하고 기본값으로 설정할 수 있습니다.

nvm install 16
nvm alias default 16
nvm use 16

노드를 정렬한 후 터미널에서 다음 코드를 실행하여 React 프로젝트를 만들 수 있습니다.

npx create-react-app my-example-app
cd my-example-app
npm start

create-react-app를 실행하면 React 앱이 생성된 새 브라우저 창이 localhost:3000에 나타납니다!

구성품

선택한 IDE에서 my-example-app를 열면 세 개의 디렉토리가 표시됩니다.
./node_modules를 열면 React Demo 화면이 ./public에서 멋진 것들을 렌더링하는 방법에 대한 고기와 감자가 표시되지만 지금은 7-20행에서 모든 것을 제거하여 간단하게 만들겠습니다.

function App() {
  return (
    <div className="App">
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

이것을 분석해 보겠습니다.

기능이 있습니다./src.

제목./src을 반환하는 ./src/App.js가 있습니다.

아주 간단하죠? 이제 React가 일반 JS 파일이 아닌 구성 요소임을 알 수 있도록 구성 요소의 첫 글자가 항상 대문자인지 확인하여 localhost:3000에 콘텐츠 구성 요소를 추가해 보겠습니다.

import React from "react";

function Content() {
  return (
      <div className="Content">
          <h1>This is our content!</h1>
          <img src="https://i.redd.it/9odfz0kwy2i21.jpg" alt="meme"/>
      </div>
  )
}

export default Content;

이제 이 콘텐츠 구성 요소를 App에 추가하려면 다음과 같이 합니다.

import Content from './Content';

function App() {
  return (
    <div className="App">
      <h1>Hello, world!</h1>
      <Content />
    </div>
  );
}

export default App;

여기에 추가한 내용을 설명하겠습니다.

className 및 Hello, world!를 사용하면 React가 ./src에서 코드를 가져오고 해당 데이터를 App.js에 렌더링할 수 있습니다.

import가 export보다 낮기 때문에 우리는 Content 구성 요소가 Content.js 아래에 렌더링되기를 원한다고 React에 말했습니다.

JSX

JSX(JavaScript XML이라고도 함)는 구성 요소의 출력을 빌드하는 데 사용되는 특수 언어입니다. 여기서 실제로 JS, HTML 및 CSS를 사용할 수 있습니다! 여기저기서 일부 JS가 포함된 HTML과 매우 유사해 보이지만 실수하지 마십시오. JSX는 실제로 JS에 더 가깝기 때문에 다음과 같은 몇 가지 주요 차이점에 유의해야 합니다.

자동으로 닫히는 태그는 슬래시로 끝나야 합니다(예: App.js

JSX로 작성된 메서드 및 속성은 일반 JS와 마찬가지로 낙타 케이스로 작성해야 합니다

.

JS 표현식을 JSX에서도 사용할 수 있습니다! 예를 들면 다음과 같습니다.

const name = 'Steven'
const goodbye = <h1>Goodbye, {name}</h1>

결론

이 기사에서는 State, Inverse Data Flow 및 <Content />와 같은 항목을 다루지 않은 React에 대한 매우 기본적인 소개를 다루었지만, 이 기사가 React에 익숙해지는 데 도움이 되었기를 바랍니다. 처음 열 때 발생<h1>하고 가장 인기 있는 프론트엔드 JS 라이브러리인 이유를 확인하십시오.

출처

React Docs
Components
JSX