# React Webpack Example
This example will demonstrate how to use the **webpack variant** of ZilliqaJS in a React project. This react project is created using `create-react-app`.
The webpack variant comes in a `zilliqa.min.js` file and is meant for users who wishes to use ZilliqaJS functions in traditional HTML. Users need to build the webpack variant and import the js file in the HTML.
## Note: Frontend Framework Users
If you are using a frontend framework such as React, Vue, AngularJS, etc, we **strongly recommend you to use our node version** instead of the webpack variant as the schematic is easier to work with. Skip to the [Zilliqa-Javascript-Library README](https://github.com/Zilliqa/Zilliqa-JavaScript-Library#installation) for the NodeJS approach examples. If you are still interested in using the webpack variant, continue below.
## How to get started
1. Build the webpack variant to generate a `zilliqa.min.js` located under `Zilliqa-JavaScript-Library/dist`.
```
git clone https://github.com/Zilliqa/Zilliqa-JavaScript-Library
cd Zilliqa-JavaScript-Library
yarn install
yarn build:web
```
2. Copy `zilliqa.min.js` into the react examples folder.
```
cp Zilliqa-JavaScript-Library/dist/zilliqa.min.js examples/webpack/react/public
cd examples/webpack/react
yarn
yarn start
```
You should see a sample project that looks like this:
Try it by clicking on the 'Send Payment' button!
The sample project would perform the following:
- add a default wallet to a Zilliqa object
- query the wallet and its balance
- send a transaction of 1 ZIL from the wallet to another wallet
### How it works
In the `examples/webpack/react`, open `index.html`:
```
Document
>
```
In the above HTML, we import our minified `zilliqa.min.js`. This must be imported first before other Javascript files so that the other Javascript files can access ZilliqaJS sdk functions.
Next, we import `index.js` and `load-keystore-demo.js`. These two files contain example of acessing the `zilliqa.min.js` functions.