# Getting Started with SQL Scratchpad This projects demonstrates how you can use the Hue web components from within a React project to create a SQL Scratchpad. It's based on a clean create-react-app project, relevant changes are: - gethue dependency in package.json, note that this can also be pulled in from the npm repo by specifing a version > 4.9) - "components" folder with React wrappers around the Hue web components - App.tsx using the React wrappers We wrap the web components to be able to set certain attributes/properties on the web component elements that are required by the web components. ## To run this project 1. Go to the Hue root folder `cd ../../../../` 2. `npm install` 3. `npm run webpack-npm` 4. Go to the example project `cd tools/examples/components/sql-scratchpad` 5. `npm install` 6. `npm start` 7. Open [http://localhost:3000](http://localhost:3000) to view it in the browser. ## Base project creation steps (for reference) 1. `npx create-react-app sql-scratchpad --template typescript` 2. add `"gethue": "file:../../../../npm_dist"` to dependencies in package.json 3. add `SKIP_PREFLIGHT_CHECK=true` to .env (required when running inside nested Hue folder)