Skip to content

Commit

Permalink
docs: replace cra with vite in quick start
Browse files Browse the repository at this point in the history
Closes: INSTUI-3989
  • Loading branch information
joyenjoyer committed Jun 13, 2024
1 parent 1c380a9 commit eded609
Showing 1 changed file with 14 additions and 13 deletions.
27 changes: 14 additions & 13 deletions docs/getting-started/usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,37 +8,38 @@ order: 1

The following steps will create a React app that uses Instructure UI. Recommended if you are starting from scratch.

1. Create a new React app, e.g. with [create-react-app](https://reactjs.org/docs/create-a-new-react-app.html):
##### Create a new React app, e.g. with [create vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project):

```md
---
type: code
---

npx create-react-app my-cool-app
npm create vite@latest my-cool-app
```

This will generate a vanilla React app with tests, sample code and scripts. You can try it by running `npm start`.
During the interactive project generation phase, please choose React and either JavaScript or TypeScript as the project language. After you have installed the dependencies by running `npm install`, you can try it by running `npm run dev`.

##### Add InstUI dependencies to your `package.json`

2. Add InstUI dependencies to your `package.json`. We recommend that you add the `@instructure/ui` meta-package, this contains all of our UI components (substitute the version number with the latest one):
We recommend that you add the `@instructure/ui` meta-package, this contains all of our UI components (substitute the version number with the latest one):

```md
---
type: code
---

{
...
"dependencies": {
...
"@instructure/ui": "^9"
}
...
"dependencies": {
...
"@instructure/ui": "^9"
}
}
```

Run `npm install`, so InstUI is downloaded to your `node_modules` folder and can be used.

3. Now you are ready to use InstUI, let's try it out. Replace the code in `App.js` with the following:
##### Try the sample code
Now you are ready to use InstUI, let's try it out. Replace the code in `App.js` with the following:

```js
---
Expand All @@ -62,7 +63,7 @@ What does this code do?
- [InstUISettingsProvider](#InstUISettingsProvider) allows to specify the text direction (default is the direction that the user's browser supplies) and the theme to your application. InstUI components require a theme to work, all components are themeable, and themes control their look and feel. There are 3 built-in themes: [`canvas`](#canvas), [`canvasHighContrast`](#canvas-high-contrast), [`instructure`](#instructure). The component examples seen throughout the documentation use the [canvas theme](#canvas) by default.
- [Button](#Button) is an Instructure UI button component

Finally, run `npm start` to start up a basic development server.
Finally, run `npm run dev` to start up a basic development server.

Congrats, you have now a (very) basic app that uses Instructure UI :)

Expand Down

0 comments on commit eded609

Please sign in to comment.