Skip to content
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.

Sign up for GitHub

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

Jump to bottom

docs: replace cra with vite in quick start #1511

Merged
merged 1 commit into from
Jun 13, 2024
Merged

docs: replace cra with vite in quick start #1511

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
27 changes: 14 additions & 13 deletions docs/getting-started/usage.md
View file
Open in desktop
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
Loading