반응 개념 배우기

안녕하세요. React를 시작하는 방법에 대한 이 튜토리얼에 오신 것을 환영합니다. React는 사용자 인터페이스를 만드는 데 사용되는 JavaScript 라이브러리입니다. 이를 통해 확장 가능한 모듈식 앱을 만들 수 있습니다.

🎯 전제 조건

PC에 설치된 NodeJ
자바스크립트 지식

바로 시작합시다.

설정

npx create-react-app [project name]를 실행하여 반응 프로젝트 설정

.

위의 명령은 반응에서 특정 폴더와 코드를 가져옵니다.

다음을 실행하여 디렉토리를 변경하고 반응 앱을 시작하십시오.cd react-tut && npm start
브라우저의 포트3000에서 열린 이 멋진 페이지를 볼 수 있습니다.

첫 번째 메인 앱

이제 첫 번째 앱을 작성해 보겠습니다. 필요하지 않은 파일을 제거하기 위해 내 src 폴더를 정리하겠습니다.

위 파일을 제거 후 정리합니다. 우리는:

브라우저를 방문하여 앱의 변경 사항을 확인하세요.

구성품

함수를 사용하여 앱을 모듈화하거나 구성하는 방법을 살펴보겠습니다. 구성 요소를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것입니다.

여기서 주목해야 할 두 가지 중요한 사항:

1. We created the Emojis component
2. We are rendering the Emojis component in the App component.

모든 것이 여전히 브라우저에서 동일하게 유지되어야 합니다.

내 브라우저에서 반응하는 4줄의 이모티콘을 빠르게 작성하려면 Emoji 구성 요소를 복제하기만 하면 됩니다.

브라우저로 이동하십시오.

모듈 내보내기 및 가져오기

즉, 가져오기 및 내보내기 기능을 사용하여 Emoji 구성 요소를 다른 파일로 완전히 이동합니다.

모든 것이 여전히 동일하게 작동해야 하며 코드 베이스가 더 깔끔해야 합니다.

소품

Greeting.js 구성 요소를 생성해 보겠습니다.

export const Greeting = () => {
  return (
    <div>
      <h1>Hello James</h1>
    </div>
  );
};

그리고 App.js 컴포넌트 내부로 가져옵니다.

import './App.css';

import { Emojis } from './components/Emojis';
import { Greeting } from './components/Greeting';

function App() {
  return (
    <div className="App">
      <Emojis />
      <Greeting />
    </div>
  );
}
export default App;

우리는 이런 것이 있어야 합니다.

따라서 다른 사람에게 동일한 인사말을 출력하려면 어떻게 해야 합니까? 이를 달성하기 위해 소품을 사용할 수 있습니다. 매개변수로 전달된 소품을 사용하도록 코드를 리팩토링해 봅시다.

결과는 다음과 같아야 합니다.

상태 관리 및 이벤트 처리

상태는 구성 요소 내부에서 유지되는 변수입니다.

설명

1. We use the useState hook to create a state variable called message.
2. We set the initial value of the message to 'Is react the best framework?'.
3. We create a button that when clicked, sets the message to 'yes of course!'.
4. We return a div with a h1 tag that contains the message.

반응이 최고의 프레임워크인지 묻는 버튼을 클릭하여 물어봅시다.

전에

후에

계속 진행하기 전에 이 코드를 약간 리팩터링해 보겠습니다.Message.js

import { useState } from 'react';

export const Message = () => {
  const [message, setMessage] = useState('Is react the best framework?');
  const handleMessage = () => {
    setMessage('yes of course!');
  };
  return (
    <div>
      <h1>{message}</h1>
      <button onClick={handleMessage}>Ask</button>
    </div>
  );
};