From e493b8a699935aa09710c7427226818b769d0501 Mon Sep 17 00:00:00 2001 From: Peter Pal Hudak Date: Wed, 8 May 2024 12:27:49 +0200 Subject: [PATCH] docs: replace cra with vite in quick start Closes: INSTUI-3989 --- docs/getting-started/usage.md | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/docs/getting-started/usage.md b/docs/getting-started/usage.md index 1a9d3cc627..ddf88bea7c 100644 --- a/docs/getting-started/usage.md +++ b/docs/getting-started/usage.md @@ -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 --- @@ -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 :)