Skip to content

Files

Latest commit

b3ebbd8 · May 11, 2023

History

History
This branch is 3 commits behind microsoft/vscode-webview-ui-toolkit-samples:main.

hello-world-react-cra

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
May 6, 2022
May 11, 2023
May 6, 2022
Jan 20, 2023
May 11, 2023
May 6, 2022
May 6, 2022
May 6, 2022
May 6, 2022
May 11, 2023
Dec 14, 2022
May 11, 2023
May 6, 2022

Hello World (React + Create React App)

This is an implementation of the default Hello World sample extension that demonstrates how to set up and use a React + Create React App + Webview UI Toolkit webview extension.

A screenshot of the sample extension.

Documentation

For a deeper dive into how this sample works, read the guides below.

Run The Sample

# Copy sample extension locally
npx degit microsoft/vscode-webview-ui-toolkit-samples/frameworks/hello-world-react-cra hello-world

# Navigate into sample directory
cd hello-world

# Install dependencies for both the extension and webview UI source code
npm run install:all

# Build webview UI source code
npm run build:webview

# Open sample in VS Code
code .

Once the sample is open inside VS Code you can run the extension by doing the following:

  1. Press F5 to open a new Extension Development Host window
  2. Inside the host window, open the command palette (Ctrl+Shift+P or Cmd+Shift+P on Mac) and type Hello World (React + CRA): Show