Skip to content

Added Another example with react #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions with-python/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ In you terminal the endpoint at which your GraphQL API is deployed is logged. A

In your virtual environment and inside your `with-python` folder in your terminal, run ` /Users/YOUR_USERNAME_HERE/with-python/env/bin/python /Users/YOUR_USERNAME)HERE/with-python/main.py` to see the data coming back from your GraphQL API.


## Learn More

You can learn more in the [StepZen documentation](https://stepzen.com/docs). Questions? Head over to [Discord](https://discord.com/invite/9k2VdPn2FR) or [GitHub Discussions](https://github.com/stepzen-dev/examples/discussions) to ask questions.
132 changes: 132 additions & 0 deletions with-react-native/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,138 @@ stepzen start

In you terminal the endpoint at which your GraphQL API is deployed is logged. A proxy of the GraphiQL playground is available at your suggested endpoint (in example `http://localhost:5001/api/with-react-native`), which you can use to explore the GraphQL API.

## Another way to Integrate Stepzen with React

1.Download the StepZEN SDK from the website.

2.In your React project, create a new folder called StepZEN.

3.Copy the contents of the StepZEN SDK into the StepZEN folder.

4.In your code editor, open the index.js file in the StepZEN folder.

5.Import the StepZEN SDK into your React project.

```bash
import StepZEN from './stepzen-sdk/index.js';
```
6.Initialize the StepZEN SDK in your React project.
```bash
StepZEN.init({

appKey: 'YOUR_APP_KEY',

});
```

7.In your code editor, open the App.js file in the src folder.

8.Import the StepZEN SDK into the App.js file.
```bash
import StepZEN from '../StepZEN/index.js';
```
9.Initialize the StepZEN SDK in the App.js file.
```bash
StepZEN.init({

appKey: 'YOUR_APP_KEY',

});
```
10.Create a new component called StepZENButton.
```bash
import React from 'react';

import StepZEN from '../StepZEN/index.js';

class StepZENButton extends React.Component {

constructor(props) {

super(props);

this.state = {

isLoading: false,

};

}

render() {

return (

<button onClick={this.handleClick}>

{this.state.isLoading ? 'Loading...' : 'Click Me'}

</button>

);

}

handleClick = async () => {

this.setState({ isLoading: true });

try {

const response = await StepZEN.sendMessage({

text: 'Hello World!',

});

console.log(response);

} catch (error) {

console.error(error);

} finally {

this.setState({ isLoading: false });

}

};

}

export default StepZENButton;
```
11.In the App.js file, import the StepZENButton component.
```bash
import StepZENButton from './StepZENButton.js';
```
12.Add the StepZENButton component to the App.js file.

<StepZENButton />

13.Save the App.js file.

14.Open the index.html file in the public folder.

15.Add the StepZEN SDK script tag to the index.html file.

```bash
<script src="/stepzen-sdk/index.js"></script>
```
16.Save the index.html file.

17.Start the React development server.

```bash
npm start
```
18.Open http://localhost:3000 in your web browser.

19.Click the Click Me button.

20.View the console to see the StepZEN SDK response.

## Learn More

You can learn more in the [StepZen documentation](https://stepzen.com/docs). Questions? Head over to [Discord](https://discord.com/invite/9k2VdPn2FR) or [GitHub Discussions](https://github.com/stepzen-dev/examples/discussions) to ask questions.