ReactJS |간단한 React 계산기

이 기사에서는 ReactJS를 사용하여 기능적이고 사용자 친화적인 계산기를 만드는 과정을 안내합니다. 초보자가 이 프로젝트에 접근할 수 있도록 하고 React에 익숙한 사람들에게는 훌륭한 학습 경험이 될 수 있도록 상태 관리, 이벤트 처리, 구성 요소 구조와 같은 필수 개념을 다룰 것입니다.

프로젝트 설정

새 React 앱 만들기:
Create React App을 사용하여 새로운 React 프로젝트를 설정하는 것부터 시작하세요:

npx 생성-반응-앱 반응-계산기
CD 반응 계산기
content_copy
코드를 주의해서 사용하세요.
배쉬

개발 서버 시작:
개발 서버를 시작하려면 다음 명령을 실행하세요.

npm 시작
content_copy
코드를 주의해서 사용하세요.
배쉬

React 앱은 http://localhost:3000/에서 액세스할 수 있습니다.

구성요소 구조

단일 구성 요소인 App.js를 사용하여 계산기를 구성하겠습니다. 이 구성 요소는 전체 계산기의 논리와 렌더링을 처리합니다.

App.js(주요 구성 요소)

"react"에서 React, { useState } 가져오기;
"./App.css" 가져오기;

기능 앱() {
const [displayValue, setDisplayValue] = useState("0");
const [연산자, setOperator] = useState(null);
const [firstOperand, setFirstOperand] = useState(null);

// 숫자 버튼 클릭을 처리하는 함수
const handlerNumberClick = (번호) => {
if (displayValue === "0") {
setDisplayValue(number.toString());
} 그렇지 않으면 {
setDisplayValue(displayValue + number.toString());
}
};

// 연산자 버튼 클릭을 처리하는 함수
const handlerOperatorClick = (op) => {
setOperator(op);
setFirstOperand(parseFloat(displayValue));
setDisplayValue("0");
};

// 같음 버튼 클릭을 처리하는 함수
const handlerEqualsClick = () => {
const secondOperand = parsFloat(displayValue);
결과를 보자;

으아악

};

// 지우기 버튼 클릭을 처리하는 함수
const handlerClearClick = () => {
setDisplayValue("0");
setOperator(null);
setFirstOperand(null);
};

반품(

{/* 현재 값 표시 */}
{표시값} 으아악

);
}

기본 앱 내보내기;
content_copy
코드를 주의해서 사용하세요.
자바스크립트

설명

상태 관리:
useState 후크를 사용하여 계산기의 상태를 관리합니다. displayValue는 표시된 현재 값을 보유하고 연산자는 선택한 작업을 저장하며 firstOperand는 입력된 첫 번째 숫자를 저장합니다.

이벤트 처리:
handlerNumberClick, handlerOperatorClick, handlerEqualsClick 및 handlerClearClick과 같은 함수는 버튼과의 사용자 상호 작용을 처리합니다.

구성요소 구성:
앱 구성 요소는 계산기의 논리와 렌더링을 모두 담당하며 구성 요소가 기능과 프레젠테이션을 결합하는 방법을 보여줍니다.

스타일 추가(App.css)

.계산기 {
디스플레이: 플렉스;
플렉스 방향: 열;
너비: 300px;
테두리: 1px 단색 #ccc;
패딩: 20px;
테두리 반경: 5px;
}

.디스플레이 {
높이: 50px;
배경색: #eee;
글꼴 크기: 24px;
텍스트 정렬: 오른쪽;
패딩: 10px;
테두리 반경: 5px;
여백 하단: 10px;
}

.버튼 {
디스플레이: 그리드;
그리드 템플릿 열: 반복(4, 1fr);
그리드 간격: 10px;
}

버튼 {
패딩: 10px;
테두리: 없음;
테두리 반경: 5px;
배경색: #f0f0f0;
글꼴 크기: 18px;
커서: 포인터;
}

버튼:호버 {
배경색: #ddd;
}
content_copy
코드를 주의해서 사용하세요.
CSS

결론

이 단계를 따르면 React를 사용하여 완전한 기능을 갖춘 계산기를 만들 수 있습니다! 이 프로젝트는 React의 기능을 추가로 탐색하기 위한 훌륭한 기반이 됩니다. 이제 고급 작업, 메모리 기능 또는 시각적 테마와 같은 기능을 추가할 수 있습니다. 실험하고 재미있게 보내세요!

위 내용은 ReactJS |간단한 React 계산기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!