### Installing Dependencies - npm - bash

Source: https://github.com/plotly/react-plotly.js/blob/master/README.md

Basic command to install all project dependencies listed in the `package.json` file. This is the standard first step for setting up the development environment. Requires Node.js and npm installed.

```bash
$ npm install
```

--------------------------------

### Installing React Plotly.js Packages (bash)

Source: https://github.com/plotly/react-plotly.js/blob/master/README.md

Installs the required npm packages for using react-plotly.js in a project. This includes the react-plotly.js component itself and the core plotly.js library.

```bash
$ npm install react-plotly.js plotly.js
```

--------------------------------

### Running Prepublish Script - npm - bash

Source: https://github.com/plotly/react-plotly.js/blob/master/README.md

Executes the `prepublishOnly` script defined in `package.json`, typically used to transpile source code before publishing the package. This prepares the library for distribution. Requires project dependencies to be installed.

```bash
$ npm run prepublishOnly
```

--------------------------------

### Importing Plot Component - React-Plotly.js - Javascript

Source: https://github.com/plotly/react-plotly.js/blob/master/README.md

Shows the two primary ways to import the Plot component: the default import for the standard bundle and using `createPlotlyComponent` for custom bundles or CDN-loaded Plotly.js. Requires `react-plotly.js` and potentially `plotly.js` (depending on method) installed.

```javascript
// simplest method: uses precompiled complete bundle from `plotly.js`
import Plot from 'react-plotly.js';

// customizable method: use your own `Plotly` object
import createPlotlyComponent from 'react-plotly.js/factory';
const Plot = createPlotlyComponent(Plotly);
```

--------------------------------

### Loading Plotly and React-Plotly Factory - CDN - HTML

Source: https://github.com/plotly/react-plotly.js/blob/master/README.md

Provides HTML `<script>` tags to load the Plotly.js library and the `react-plotly.js` component factory directly from CDNs. This method is suitable for quick demos and non-production use cases like CodePen or JSFiddle. Requires internet access to fetch the scripts.

```html
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://unpkg.com/react-plotly.js@latest/dist/create-plotly-component.js"></script>
```

--------------------------------

### Running Tests - npm - bash

Source: https://github.com/plotly/react-plotly.js/blob/master/README.md

Executes the test suite defined by the `test` script in `package.json`. This command is used to verify the correctness and functionality of the library code. Requires project dependencies and test runners to be configured.

```bash
$ npm run test
```

--------------------------------

### Rendering Plot Component - ReactDOM - Javascript

Source: https://github.com/plotly/react-plotly.js/blob/master/README.md

Demonstrates how to instantiate and render a Plot component loaded via a `<script>` tag using `ReactDOM.render` and `React.createElement`. It shows passing basic `data` props to the component to display a simple chart. Requires React and ReactDOM libraries in addition to the Plotly components.

```javascript
const Plot = createPlotlyComponent(Plotly);

ReactDOM.render(
  React.createElement(Plot, {
    data: [{x: [1, 2, 3], y: [2, 1, 3]}],
  }),
  document.getElementById('root')
);
```

--------------------------------

### Rendering Basic Plotly Chart (JavaScript)

Source: https://github.com/plotly/react-plotly.js/blob/master/README.md

Demonstrates how to quickly render a simple Plotly chart within a React class component. It shows importing the `Plot` component and passing data and layout configurations as props to generate a basic scatter and bar chart.

```javascript
import React from 'react';
import Plot from 'react-plotly.js';

class App extends React.Component {
  render() {
    return (
      <Plot
        data={[
          {
            x: [1, 2, 3],
            y: [2, 6, 3],
            type: 'scatter',
            mode: 'lines+markers',
            marker: {color: 'red'},
          },
          {type: 'bar', x: [1, 2, 3], y: [2, 5, 3]},
        ]}
        layout={{width: 320, height: 240, title: 'A Fancy Plot'}}
      />
    );
  }
}
```

--------------------------------

### Managing Plotly State with Callbacks (JavaScript)

Source: https://github.com/plotly/react-plotly.js/blob/master/README.md

Illustrates how to handle user interactions (like zooming or panning) and preserve plot state by capturing the updated figure object using the `onInitialized` and `onUpdate` callback props. The parent component's state is updated with the new figure configuration.

```javascript
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {data: [], layout: {}, frames: [], config: {}};
  }

  render() {
    return (
      <Plot
        data={this.state.data}
        layout={this.state.layout}
        frames={this.state.frames}
        config={this.state.config}
        onInitialized={(figure) => this.setState(figure)}
        onUpdate={(figure) => this.setState(figure)}
      />
    );
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.