react-perf-tool - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #llm #android #rust #java #windows #awesome #kubernetes #vue #security #pytorch #openai #open-source

react-perf-tool

(★ 413)

[Deprecated] Debug performance of your React application

파일 탐색기

최종 버전 다운로드 (.zip)

- react-perf-tool.d.ts
- react-perf-tool.js
- react-perf-tool.js.map
- react-perf-tool.min.js
- react-perf-tool.min.js.map
- styles.css
- styles.css.map
- - ChartComponent.js
  - ReactPerfTool.js
  - Settings.js
  - Tab.js
  - TabHeader.js
  - TabManager.js
  - TimeWasted.js
- - defaultSettings.js
  - excludedComponents.js
  - excludedSettings.js
  - features.js
- - button.css
  - container.css
  - features.css
  - left-hand.css
  - reset.css
  - right-hand.css
  - settings.css
  - tabs.css
  - tools.css
- - formatTime.js
  - getUserSettings.js
  - setUserSettings.js
  - titleize.js
- index.js
- - setup.js
  - test.spec.js
- - getUserSettings.spec.js
  - setUserSettings.spec.js
  - titleize.js
.babelrc
.eslintrc
.gitignore
.npmignore
.travis.yml
LICENSE
package.json
README.md
screenshot.png
webpack.config.js
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/RamonGebben/react-perf-tool

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-perf-tool

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm i react-perf-tool react-addons-perf -D

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm run lint

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Deprecated 😞

> As of React 16, react-addons-perf is not supported. Please use your browser’s profiling tools to get insight into which components re-render.

For examples on how to use browsers profiler for performance testing check the [React Docs](https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab)

# ReactPerfTool

[![Package Quality](http://npm.packagequality.com/shield/react-perf-tool.png)](http://packagequality.com/#?package=react-perf-tool)
[![Build Status](https://travis-ci.org/RamonGebben/react-perf-tool.svg?branch=master)](https://travis-ci.org/RamonGebben/react-perf-tool) [![Gitter](https://badges.gitter.im/RamonGebben/react-perf-tool.svg)](https://gitter.im/RamonGebben/react-perf-tool?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[![npm version](https://badge.fury.io/js/react-perf-tool.svg)](https://badge.fury.io/js/react-perf-tool)
[![license](https://img.shields.io/github/license/RamonGebben/react-perf-tool.svg?maxAge=2592000)](https://github.com/RamonGebben/react-perf-tool/blob/master/LICENSE)

ReactPerfTool tries to give you a more visual way of debugging performance of your React application.
It does this by using the addons delivered by the React team and community to get measurements and visualize this using graphs. This makes it easier to spot bottlenecks.

![screenshot](https://raw.githubusercontent.com/RamonGebben/react-perf-tool/master/screenshot.png)

## Usage

```bash
npm i react-perf-tool react-addons-perf -D
```

```javascript
import ReactPerfTool from 'react-perf-tool';
import Perf from 'react-addons-perf';

// Import styles if they don't get loaded already
import 'react-perf-tool/lib/styles.css';

export default function YourApp(props) {
  return (<div className="your-app">
    {/*...yourApp */}
    <ReactPerfTool perf={Perf} />
  </div>);
}
```

## Contributing

If you want to contribute just fork the project and start working on one of the open issues or on your own ideas.
When you are done you can open a pull request.

### Code style
The project uses a trimmed down version of the [Airbnb Javascript styleguide](https://github.com/airbnb/javascript), and can be checked by running:

```bash
npm run lint
```

### Testing
For testing the project uses [Mocha](http://mochajs.org/) and [Chai](http://chaijs.com/).
For testing of components the project uses [Enzyme](https://github.com/airbnb/enzyme).

### TL;DR

* `npm run build` - produces production build
* `npm run dev` - start webpack watch
* `npm run test` - runs the tests and lints
  - `npm run lint` - lints all the code
  - `npm run test:unit` - run only the unit tests
  - `npm run test:component` - run only the component tests