reactjs 20

실험 구문 'jsx'에 대한 Babel 던지기 지원이 현재 활성화되지 않았습니다.

실험 구문 'jsx'에 대한 Babel 던지기 지원이 현재 활성화되지 않았습니다. 리액션 어플리케이션을 위해 Jest와 효소를 사용하여 유닛 테스트 케이스를 새로 작성하기 시작했고 다음과 같은 농담을 사용하여 테스트 케이스를 실행하려고 할 때"test": "jest --watch"오히려."test": "react-scripts test"주자가 반응 구문을 이해할 수 있도록 babel을 통과하는 테스트를 수행합니다. 그리고 babel을 사용하여 단계별로 셋업을 하고 있지만 이 오류는Support for the experimental syntax 'jsx' isn't currently enabled내가 더 멀리 가는 것을 막았다.그리고 제가 시도했던 몇 가지 스레드에서 제안했듯이npm install --sa..

programing 2023.03.15

만약...엘세...을 사용할 수 있습니까?리액트 렌더 함수에 있는 문?

만약...엘세...을 사용할 수 있습니까?리액트 렌더 함수에 있는 문? 컴포넌트,즉 리액트 컴포넌트가 .render() (하지 않습니다.) render(){ return ( // note: logic only, code does not work here if (this.props.hasImage) else ) } 꼭 그렇지는 않지만, 해결 방법이 있습니다.React 문서에는 조건부 렌더링에 대한 섹션이 있으므로 살펴봐야 합니다.다음은 인라인 if-else를 사용하여 수행할 수 있는 작업의 예입니다. render() { const isLoggedIn = this.state.isLoggedIn; return ( {isLoggedIn ? ( ) : ( )} ); } jsx를 반환하기 전에 렌더링 함수 내에서 ..

programing 2023.03.10

리액션 리덕스 내 성분과 용기의 차이

리액션 리덕스 내 성분과 용기의 차이 리액트 리덕스의 구성 요소와 용기의 차이점은 무엇입니까?Component입니다.구성 요소는 React UI의 일부를 설명하는 클래스 또는 함수입니다. 컨테이너는 React 컴포넌트의 비공식 용어입니다.connect 레독스 스토어. - 레독스 스토어.는 Redux 및 Redux 상태를 합니다.dispatch동작은 일반적으로 DOM 요소를 렌더링하지 않고 프레젠테이션 하위 구성요소에 렌더링을 위임합니다. 자세한 내용은 Dan Abramov의 프레젠테이션 컴포넌트와 컨테이너 컴포넌트를 참조하십시오.구성 요소들 컴포넌트를 사용하면 UI를 재사용 가능한 독립된 조각으로 분할하고 각 조각을 분리하여 생각할 수 있습니다.그것들은 때때로 "프레젠테이션 컴포넌트"라고 불리며, 주요 ..

programing 2023.03.10

객체 위에 불변js를 사용해야 하는 이유는 무엇입니까?얼려?

객체 위에 불변js를 사용해야 하는 이유는 무엇입니까?얼려? 을 인터넷에서 조사했다.Object.freeze()!!할! !!!!! 질문입니다만, 왜 이 라이브러리를 사용하여 네이티브가 아닌 데이터 구조를 사용하여 작업해야 합니까?오래된 javascript 오브젝트를 프리즈할 수 있는데?불변의 J가 무엇을 제공하는지 이해하지 못한 것 같아.오브젝트를 불변하게 하는 라이브러리가 아니라 불변의 가치로 작업하는 라이브러리입니다. 단순히 문서와 사명 선언을 반복하지 않고 두 가지 사항을 설명하겠습니다. 유형. 무한 범위, 스택, 순서 집합, 목록 등을 구현했습니다. 모든 유형은 영구 데이터 구조로 구현됩니다. 거짓말이야, 여기 그들의 임무 성명서의 인용구가 있어: 한번 생성되면 불변의 데이터를 변경할 수 없기 때..

programing 2023.03.10

index.css 와"create-react-app"에 의해 작성된 기본 앱의 App.css는 어떤 차이가 있습니까?

index.css 와"create-react-app"에 의해 작성된 기본 앱의 App.css는 어떤 차이가 있습니까? index.css는 글로벌 스타일에, App.css는 App 컴포넌트에만 있는 것 같습니다만, App 컴포넌트도 보통 제 앱이 아닌가요?여기서의 베스트 프랙티스는 무엇입니까?App 컴포넌트는 기본적으로 React 기반 어플리케이션의 최상위 컴포넌트이며, 그 외의 컴포넌트는 모두 하위 컴포넌트입니다.따라서 create-react-app에서 App.css와 index.css가 존재하는 이유는 create-react-app이 매우 단순한 디렉토리 구조를 가질 수 있기 때문에 "App.css"와 "index.css" 간에 이름 경합이 발생하지 않기 때문에 일반적인 것을 삭제하는 데 걸리는 시간이..

programing 2023.02.28

google이 create-display-app을 사용하는 리액트 앱에 정의되어 있지 않습니다.

google이 create-display-app을 사용하는 리액트 앱에 정의되어 있지 않습니다. create-react-app이라는 CLI를 사용하여 리액트 앱을 만듭니다.Facebook은 웹팩 등 밑에서 많은 일을 한 것 같아요.하지만, 몇 가지 한계도 있을 수 있다고 생각합니다.저는 이 튜토리얼에 따라 구글 맵 API를 로드하려고 합니다.코드를 디버깅하면 구글 맵이 정상적으로 참조되고 있는 것을 알 수 있습니다. 그 후 [재생]을 클릭하여 응용 프로그램 실행을 종료합니다.webpack에서 google is not defined 오류 발생HotDevClient.js 및 응용 프로그램이 크래시됩니다. webpack은 파일을 바로 컴파일하기 때문에 https로 구글 맵을 로드하는 것은 곤란하다고 생각합니다..

programing 2023.02.28

재료.UI 사용자 지정 호버 스타일

재료.UI 사용자 지정 호버 스타일 저는 React에 처음 온 사람인데, Material UI에서 클래스를 덮어쓰는 방법을 좀 헷갈립니다.예시를 보고 흉내를 내려고 했지만 내가 원하는 대로 되지 않는 것 같았다. 기본적으로 테이블 행의 호버에서는 현재와 다른 배경색을 설정하고 싶습니다. 저의 접근방식은 다음과 같습니다. const styles = theme => ({ root: { width: "100%", marginTop: theme.spacing.unit * 3 }, table: { minWidth: 1020 }, tableWrapper: { overflowX: "auto" }, hover: { "&:hover": { backgroundColor: 'rgb(7, 177, 77, 0.42)' } } ..

programing 2023.02.28

create-react-app의 "npm run build"란 무엇입니까?

create-react-app의 "npm run build"란 무엇입니까? npm run build 작업에 대한 설명을 찾을 수 없었습니다. 심플하고 사용하기 쉽고, 「빌드」폴더를 입수해, 뛰어난 기능을 발휘합니다. 하지만 Create-React 앱에서는 이면에서 정확히 어떤 일이 일어날까요? 빌드 툴의 사용법이 완전히 다른가요? 그렇지 않은 경우 다른 빌드 툴을 사용하고 있습니까?개발자들은 종종 JavaScript와 CSS를 별도의 파일로 나눕니다.개별 파일을 사용하면 한 가지 작업을 수행하는 더 많은 모듈식 코드 청크를 작성하는 데 집중할 수 있습니다.파일을 관리하는 것은 매우 번거로운 작업이기 때문에 인식 부하가 감소합니다. 이면에서는 정확히 어떤 일이 벌어지나요? 애플리케이션을 운영 환경으로 이행..

programing 2023.02.23

클래스 소품을 사용하여 재료 UI에서 여러 클래스를 추가하려면 어떻게 해야 합니까?

클래스 소품을 사용하여 재료 UI에서 여러 클래스를 추가하려면 어떻게 해야 합니까? 사용방법css-in-js반응 컴포넌트에 클래스를 추가하는 방법, 여러 컴포넌트를 추가하려면 어떻게 해야 합니까? class 변수는 다음과 같습니다. const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); 사용 방법은 다음과 같습니다. return () 위의 내용은 동작합니다만, 두 클래스를 모두 추가할 수 있는 방법은 없습니다.classNamesnpm 패키지?예를 들어 다음과 같습니다. 문자열 보간을 사용할 수 있습니다. clsx를 사용할 수 있습니다.MUI 버튼의 예에서 사용되고 있는..

programing 2023.02.23

리액트JS에 표시되도록 div를 스크롤하려면 어떻게 해야 합니까?

리액트JS에 표시되도록 div를 스크롤하려면 어떻게 해야 합니까? .div로 나열되는 입니다.div 표시되어 있는 하기 위해 했습니다. 현재 강조 표시되어 있는 어린이를 변경하기 위해 키보드 네비게이션을 추가했습니다. 지금은 키를 몇 번 눌러도 강조 표시된 항목이 표시되지 않습니다.뷰가 스크롤된 경우에도 위 키와 같은 현상이 발생합니다. 올바른 입니까?div야에넣??? ??은 .List 및 의 '컴포넌트'Item요소.한 프로젝트에서는 아이템이 활성화되었는지 여부를 알려주는 방법을 사용했습니다. 아이템은 필요에 따라 목록을 스크롤하여 보기로 표시합니다.다음의 의사 코드에 대해 검토합니다. class List extends React.Component { render() { return {this.props..

programing 2023.02.23