Installation

WireBootstrap for React and its source code are available in GitHub at https://github.com/WireBootstrap/react.

git clone https://github.com/WireBootstrap/react

The source code includes a sample project that demonstrates how to use WireBootstrap with React to build applications. It also includes the source code for the WireBootstrap for React Component. The component can also be installed directly by itself from an NPM package.

npm install @wirebootstrap/wire-react

Project

The solution is a web project that demonstrates how to use WireBootstrap when developing applications in React.

After downloading or cloning the project, open it in a web application editor. The examples in this documentation use Visual Studio Code but any web editor can be used. The project has no web service dependencies.

The project was created using the create-react-app generator with the React project Typescript template. For details, visit Using React in Visual Studio Code.

In Visual Studio Code, open a terminal window and run npm start. This will install thenpm packages required to run the project and then open the application in a browser.

WireBootstrap for React Sample Project

tsconfig.json

When using WireBootstrap with TypeScript projects including WireBootstrap for React, register the location of the WireBootstrap NPM scope root directory in the compilerOptions.typeRoots array inside the project's tsconfig.json file.

{  
  "compilerOptions": {
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@wirebootstrap"
      ]
  }
}

ESLint Config

The Create React App template creates a project that uses ESLint to compile source code. This can conflict with the native TypeScript compiler. To address the conflicts, turn the no-undef ESLint rule off in the eslintConfig section in the package.json file.

  "eslintConfig": {
    "rules": {
      "no-undef": "off"
    }