OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2026-01-15 12:15:22 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Updated README docs, example screenshots, etc

Browse Source
This commit is contained in:
Brian Vaughn
2019-08-27 15:20:34 -07:00
parent 7153dd516f
commit bc8b15332b
5 changed files with 66 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/react-devtools-core/README.md
View File

@@ -12,20 +12,17 @@ This is similar requiring the `react-devtools` package, but provides several con
```js
const { connectToDevTools } = require("react-devtools-core");
connectToDevTools({
// Config options
});
connectToDevTools(config);
```
Run `connectToDevTools()` in the same context as React to set up a connection to DevTools.
Be sure to run this function *before* importing e.g. `react`, `react-dom`, `react-native`.
The `options` object may contain:
The `config` object may contain:
* `host: string` (defaults to "localhost") - Websocket will connect to this host.
* `port: number` (defaults to `8097`) - Websocket will connect to this port.
* `websocket: Websocket` - Custom websocked to use. Overrides `host` and `port` settings if provided.
* `resolveNativeStyle: (style: number) => ?Object` - Used by the React Native style plug-in.
* `resolveRNStyle: (style: number) => ?Object` - Used by the React Native style plug-in.
* `isAppActive: () => boolean` - If provided, DevTools will poll this method and wait until it returns true before connecting to React.
## `react-devtools-core/standalone`
@@ -42,3 +39,15 @@ require("react-devtools-core/standalone")
```
Reference the `react-devtools` package for a complete integration example.
## Development
Watch for changes made to the backend entry point and rebuild:
```sh
yarn start:backend
```
Watch for changes made to the standalone UI entry point and rebuild:
```sh
yarn start:standalone
```

13
packages/react-devtools-extensions/README.md
View File

@@ -1,17 +1,22 @@
This is the source code for the React DevTools browser extension.
# Installation
## Installation
The easiest way to install this extension is as a browser add-on:
* [Chrome web store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
* [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
# Build
## Development
You can also build and install from source:
```sh
yarn install
yarn build:chrome # builds at "packages/react-devtools-extensions/chrome/build"
yarn build:firefox # builds at "packages/react-devtools-extensions/firefox/build"
cd packages/react-devtools-extensions/
yarn build:chrome # => packages/react-devtools-extensions/chrome/build
yarn run test:chrome # Test Chrome extension
yarn build:firefox # => packages/react-devtools-extensions/firefox/build
yarn run test:firefox # Test Firefox extension
```

25
packages/react-devtools-inline/README.md
View File

@@ -21,24 +21,32 @@ The frontend and backend can be initialized in any order, but **the backend must
### `react-devtools-inline/backend`
* **`initialize(contentWindow)`** -
Installs the global hook on the window. This hook is how React and DevTools communicate. **This method must be called before React is loaded.** (This means before any `import` or `require` statements!)
Installs the global hook on the window. This hook is how React and DevTools communicate. **This method must be called before React is loaded.**<sup>2</sup>
* **`activate(contentWindow)`** -
Lets the backend know when the frontend is ready. It should not be called until after the frontend has been initialized, else the frontend might miss important tree-initialization events.
```js
import { activate, initialize } from 'react-devtools-inline/backend';
// This should be the iframe the React application is running in.
const iframe = document.getElementById(frameID);
const contentWindow = iframe.contentWindow;
// Call this before importing React (or any other packages that might import React).
initialize();
initialize(contentWindow);
// Initialize the frontend...
// Call this only once the frontend has been initialized.
activate();
activate(contentWindow);
```
<sup>2</sup> The backend must be initialized before React is loaded. (This means before any `import` or `require` statements or `<script>` tags that include React.)
### `react-devtools-inline/frontend`
* **`initialize(contentWindow)`** -
Configures the DevTools interface to listen to the `window` the backend was injected into. This method returns a React component that can be rendered directly<sup>2</sup>.
Configures the DevTools interface to listen to the `window` the backend was injected into. This method returns a React component that can be rendered directly<sup>3</sup>.
```js
import { initialize } from 'react-devtools-inline/frontend';
@@ -52,7 +60,7 @@ const contentWindow = iframe.contentWindow;
const DevTools = initialize(contentWindow);
```
<sup>2</sup> Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using either `ReactDOM.unstable_createRoot` or `ReactDOM.unstable_createSyncRoot`. It should not be rendered with `ReactDOM.render`.
<sup>3</sup> Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using either `ReactDOM.unstable_createRoot` or `ReactDOM.unstable_createSyncRoot`. **It should not be rendered with `ReactDOM.render`.**
## Examples
@@ -143,4 +151,11 @@ iframe.onload = () => {
"*"
);
};
```
## Development
Watch for changes made to the source code and rebuild:
```sh
yarn start
```

18
packages/react-devtools-shell/README.md
View File

@@ -1 +1,17 @@
Harness for testing local changes to the `react-devtools-inline` and `react-devtools-shared` packages.
Harness for testing local changes to the `react-devtools-inline` and `react-devtools-shared` packages.
## Development
This target should be run in parallel with the `react-devtools-inline` package. The first step then is to watch for changes to that target:
```sh
cd packages/react-devtools-inline
yarn start
```
Next, watch for changes to the test harness:
```sh
cd packages/react-devtools-shell
yarn start
```

9
packages/react-devtools/README.md
View File

@@ -4,7 +4,7 @@ React DevTools is available as a built-in extension for Chrome and Firefox brows
It works both with React DOM and React Native.
<img src="http://i.imgur.com/IXeHiZD.png" width="600" alt="Screenshot of React DevTools running with React Native">
![React DevTools screenshot](https://user-images.githubusercontent.com/29597/63811956-bdd9b580-c8dd-11e9-8962-c568e475c425.png)
## Installation
Install the `react-devtools` package. Because this is a development tool, a global install is often the most convenient:
@@ -47,7 +47,8 @@ You can open the [in-app developer menu](https://facebook.github.io/react-native
However, when `react-devtools` is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:
![React DevTools Inspector Integration](http://i.imgur.com/wVgV9RP.gif)
![React DevTools Inspector Integration](https://user-images.githubusercontent.com/29597/63811958-be724c00-c8dd-11e9-8587-37357334a0e1.gif)
You can choose "Hide Inspector" in the same menu to exit this mode.
@@ -61,7 +62,7 @@ Make sure that the dropdown in the top left corner of the Chrome console says `d
Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. As soon as you select it, it will be available as `$r` in the Chrome console, letting you inspect its props, state, and instance properties.
![React DevTools Chrome Console Integration](http://i.imgur.com/Cpvhs8i.gif)
![React DevTools Chrome Console Integration](https://user-images.githubusercontent.com/29597/63811957-be724c00-c8dd-11e9-9d1d-8eba440ef948.gif)
## Usage with React DOM
@@ -90,7 +91,7 @@ This will ensure the developer tools are connected. **Don’t forget to remove i
By default DevTools listen to port `8097` on `localhost`. If you need to customize host, port, or other settings, see the `react-devtools-core` package instead.
## Developing
## Development
* Run `yarn start:backend` and `yarn start:standalone` in `../react-devtools-core`
* Run `yarn start` in this folder