리액트와 리액토트론

Reactotron은 React 및 React Native 앱을 검사하는 데 유용한 앱입니다. 애플리케이션 상태, API 요청 및 응답을 보고 성능 벤치마크를 수행하는 데 특히 유용합니다. 노드 버전 4 이상이 필요합니다. 전자를 사용하는 앱을 위한 Reactotron용 Redux 플러그인도 있습니다.

기타 기능:

애플리케이션 상태의 일부를 구독합니다

.

console.log와 유사한 메시지 표시

다음을 포함하는 소스 매핑 스택 추적으로 전역 오류를 추적합니다.
saga 스택 추적

디스패치 작업

Redux 또는 mobx-state-tree를 사용하여 앱의 상태를 핫스왑합니다

.

사가 추적

React Native에서 이미지 오버레이 표시

React Native에서 비동기 스토리지 추적

설치

개발자 종속성으로 설치

npm i --save-dev reactotron-react-js

초기화를 위해 src/ReactotronConfig.js에 구성 파일을 만들고 다음을 입력합니다.

import Reactotron from 'reactotron-react-js'

Reactotron
  .configure() // we can use plugins here -- more on this later
  .connect() // let's connect!

src/index.js에서 구성 파일 가져오기

import './ReactotronConfig'

웹 페이지를 새로 고치거나 npm start로 시작하면 다음과 같이 표시됩니다.



이제 Hello World 예제:

src/App.js에서 맨 위에 Reactotoron을 가져오고 렌더링 함수의 첫 번째 줄에 메시지를 기록합니다.

import Reactotron from 'reactotron-react-js'

Reactotron.log('hello rendering world')

이제 Reactotron에서 다음을 볼 수 있습니다.


이제 Reactotron의 기본 설정이 있습니다. Redux로 상태를 모니터링하고 잠재적으로 향후 블로그를 만들 네트워크 요청을 보는 것과 같이 할 수 있는 일이 더 많습니다.

참조

https://github.com/infinitered/reactotron

https://www.npmjs.com/package/reactotron

https://stackshare.io/stackups/linqpad-vs-reactotron